The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

RollOver Nav HTML & JQuery

View previous topic View next topic Go down

Solved RollOver Nav HTML & JQuery

Post by CatherinaAndrea on October 21st 2011, 10:29 pm

I got the rollover effect working, but only for one button. i don't know where to add this code, so i have more space to add more links and buttons.

I tried to put this code in "General">"Configuration">"Site Description", but there is limited space there. Also when i put this code in the "Homepage">"Generalities">"Message", it only displays on the forum and not the portal.

This is my code:
Code:

<ul id="topnav">
    <li><a href="http://m3rcs.forummotion.com">Home</a></li>

</ul>
<script type="text/javascript"
src="http://m3rcs.forummotion.com/10687.js"></script>

Where can i add this code in a bigger version so it applies to all pages?

CatherinaAndrea
Forumember

Female Posts : 230
Reputation : 19
Language : English, Russian, Dutch

http://www.nailphanatic.com/

Back to top Go down

Solved Re: RollOver Nav HTML & JQuery

Post by LGforum on October 21st 2011, 10:57 pm

Well your javascript file doesn't need to be referenced in HTML. Go to your javascript file in Modules and just click 'In all pages'.

LGforum
Hyperactive

Male Posts : 2254
Reputation : 254
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: RollOver Nav HTML & JQuery

Post by CatherinaAndrea on October 21st 2011, 11:17 pm

Right ok, it still works without the html reference, but i only have space for 3 buttons in the "General">"Configuration">"Site Description". Is there somewhere else i can put this html code:
Code:
<ul id=topnav>   
<li><a href=http://m3rcs.forummotion.com>Home</a></li>   
<li><a href=http://m3rcs.forummotion.com/forum>Forum</a></li>   
<li><a href=http://m3rcs.forummotion.com/faq>FAQ</a></li>
<li><a href=http://m3rcs.forummotion.com/profile?mode=editprofile>Profile</a></li>
<li><a href=http://m3rcs.forummotion.com/privmsg?folder=inbox>Inbox</a></li>     
</ul>

CatherinaAndrea
Forumember

Female Posts : 230
Reputation : 19
Language : English, Russian, Dutch

http://www.nailphanatic.com/

Back to top Go down

Solved Re: RollOver Nav HTML & JQuery

Post by LGforum on October 21st 2011, 11:47 pm

In an Announcement. Or a widget.

If you put it ina widget you will need to use CSS to place it where you want it.

LGforum
Hyperactive

Male Posts : 2254
Reputation : 254
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: RollOver Nav HTML & JQuery

Post by CatherinaAndrea on October 22nd 2011, 1:40 pm

Thank you for your reply Wink

Ok i have put that code into the Announcements, but i don't see any buttons only an empty block of where announcements supposed to be.
Putting it in a widget doesn't work btw

Could i use HTML pages for this? If yes how would i go about doing that, would i have to call/reference the html code somewhere?

CatherinaAndrea
Forumember

Female Posts : 230
Reputation : 19
Language : English, Russian, Dutch

http://www.nailphanatic.com/

Back to top Go down

Solved Re: RollOver Nav HTML & JQuery

Post by LGforum on October 22nd 2011, 1:58 pm

This:
Code:

<ul id=topnav> 
<li><a href=http://m3rcs.forummotion.com>Home</a></li> 
<li><a href=http://m3rcs.forummotion.com/forum>Forum</a></li> 
<li><a href=http://m3rcs.forummotion.com/faq>FAQ</a></li>
<li><a href=http://m3rcs.forummotion.com/profile?mode=editprofile>Profile</a></li>
<li><a href=http://m3rcs.forummotion.com/privmsg?folder=inbox>Inbox</a></li>   
</ul>
Is just basic HTML, it works fine in announcement. Make sure to have scrolling deactivated.

LGforum
Hyperactive

Male Posts : 2254
Reputation : 254
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: RollOver Nav HTML & JQuery

Post by CatherinaAndrea on October 22nd 2011, 2:03 pm

That's exactly what i had

Activate announcements : Yes
Announcements display : All Pages
Scrolling : Deactivated

But there is only an empty box above my forum when i put the code there.
have look yourself, maybe you'll see the problem.
http://m3rcs.forummotion.com/forum

CatherinaAndrea
Forumember

Female Posts : 230
Reputation : 19
Language : English, Russian, Dutch

http://www.nailphanatic.com/

Back to top Go down

Solved Re: RollOver Nav HTML & JQuery

Post by WHITESABBATH on October 22nd 2011, 3:34 pm

If you have anything else in announcements field list, make sure these codes(rollover navs) are 1st in order .
Beautiful site by the way Very Happy


Last edited by WHITESABBATH on October 22nd 2011, 3:36 pm; edited 1 time in total

WHITESABBATH
Active Poster

Male Posts : 1198
Reputation : 119
Language : English, F-Bombs
Location : Chicago

Back to top Go down

Solved Re: RollOver Nav HTML & JQuery

Post by CatherinaAndrea on October 22nd 2011, 3:35 pm

They are the only ones in there.

CatherinaAndrea
Forumember

Female Posts : 230
Reputation : 19
Language : English, Russian, Dutch

http://www.nailphanatic.com/

Back to top Go down

Solved Re: RollOver Nav HTML & JQuery

Post by WHITESABBATH on October 22nd 2011, 3:39 pm

hymm. i tested it and got same as you. when i moved it to the top of list, it appeared. using same version as you.

edit: where's nera when ya need her. Very Happy Oh nera...


Last edited by WHITESABBATH on October 22nd 2011, 3:57 pm; edited 2 times in total (Reason for editing : removed link)

WHITESABBATH
Active Poster

Male Posts : 1198
Reputation : 119
Language : English, F-Bombs
Location : Chicago

Back to top Go down

Solved Re: RollOver Nav HTML & JQuery

Post by CatherinaAndrea on October 22nd 2011, 3:41 pm

That is so weird ... hmm

ok another idea:
Is there any code for referencing or calling an html file/code like this

<script type="text/javascript"
src="http://m3rcs.forummotion.com/10687.js"></script>

CatherinaAndrea
Forumember

Female Posts : 230
Reputation : 19
Language : English, Russian, Dutch

http://www.nailphanatic.com/

Back to top Go down

Solved Re: RollOver Nav HTML & JQuery

Post by WHITESABBATH on October 22nd 2011, 3:48 pm

I wish i knew Cath. sorry. :/

WHITESABBATH
Active Poster

Male Posts : 1198
Reputation : 119
Language : English, F-Bombs
Location : Chicago

Back to top Go down

Solved Re: RollOver Nav HTML & JQuery

Post by CatherinaAndrea on October 22nd 2011, 3:49 pm

No Problem, Thank you for your time anyways Wink

Anyone else? ... am this close to giving up Crying or Very sad

[EDIT]
Is there any code for referencing or calling an html file/code like this

<script type="text/javascript"
src="http://m3rcs.forummotion.com/10687.js"></script>

CatherinaAndrea
Forumember

Female Posts : 230
Reputation : 19
Language : English, Russian, Dutch

http://www.nailphanatic.com/

Back to top Go down

Solved Re: RollOver Nav HTML & JQuery

Post by LGforum on October 22nd 2011, 3:51 pm

Yes you can use Ajax to call other HTML documents.
I'm not sure as to why your HTML isn't showing up in announcements. Odd.

Try temporarily removing the javascript file which is related to this navbar from javascript management.

LGforum
Hyperactive

Male Posts : 2254
Reputation : 254
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: RollOver Nav HTML & JQuery

Post by CatherinaAndrea on October 22nd 2011, 3:53 pm

Javascript removed, nothing changed, no links came up in the announcements.

Oh man Ajax is totally over my head, i wouldn't know what to do with that.

CatherinaAndrea
Forumember

Female Posts : 230
Reputation : 19
Language : English, Russian, Dutch

http://www.nailphanatic.com/

Back to top Go down

Solved Re: RollOver Nav HTML & JQuery

Post by LGforum on October 22nd 2011, 4:01 pm

Try doing this then:

Code:

$(function() { $('#main-content').prepend('<ul id=topnav> <li><a href=http://m3rcs.forummotion.com>Home</a></li> <li><a href=http://m3rcs.forummotion.com/forum>Forum</a></li> <li><a href=http://m3rcs.forummotion.com/faq>FAQ</a></li><li><a href=http://m3rcs.forummotion.com/profile?mode=editprofile>Profile</a></li><li><a href=http://m3rcs.forummotion.com/privmsg?folder=inbox>Inbox</a></li>  </ul>'); });
Put that in a Javascript file, and click in all pages, this should add your menu to rouhly where the announcements are. Once we have confirmed this is working we can move it to where we want it more accurately.

LGforum
Hyperactive

Male Posts : 2254
Reputation : 254
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: RollOver Nav HTML & JQuery

Post by CatherinaAndrea on October 22nd 2011, 4:03 pm

Right ok, that puts the buttons in the announcement area, but they don't roll over (yet hopefully) nor react as links.

CatherinaAndrea
Forumember

Female Posts : 230
Reputation : 19
Language : English, Russian, Dutch

http://www.nailphanatic.com/

Back to top Go down

Solved Re: RollOver Nav HTML & JQuery

Post by LGforum on October 22nd 2011, 4:10 pm

Now we will put the script below it. Change the code to this:
Code:

$(function() {
$('#main-content').prepend('<ul id=topnav><li><a href=http://m3rcs.forummotion.com>Home</a></li><li><a href=http://m3rcs.forummotion.com/forum>Forum</a></li><li><a href=http://m3rcs.forummotion.com/faq>FAQ</a></li><li><a href=http://m3rcs.forummotion.com/profile?mode=editprofile>Profile</a></li><li><a href=http://m3rcs.forummotion.com/privmsg?folder=inbox>Inbox</a></li></ul><script type="text/javascript" src="http://m3rcs.forummotion.com/10687.js"></script>');
});


Last edited by LGforum on October 22nd 2011, 4:32 pm; edited 2 times in total

LGforum
Hyperactive

Male Posts : 2254
Reputation : 254
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: RollOver Nav HTML & JQuery

Post by CatherinaAndrea on October 22nd 2011, 4:14 pm

Not sure but there might be a lil typo somewhere, because it changed to only one button with "/script>" on it.

CatherinaAndrea
Forumember

Female Posts : 230
Reputation : 19
Language : English, Russian, Dutch

http://www.nailphanatic.com/

Back to top Go down

Solved Re: RollOver Nav HTML & JQuery

Post by LGforum on October 22nd 2011, 4:14 pm

Yup sorry, edited the code above.

LGforum
Hyperactive

Male Posts : 2254
Reputation : 254
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: RollOver Nav HTML & JQuery

Post by CatherinaAndrea on October 22nd 2011, 4:20 pm

The script thingy is gone, now its only one static button.

I feel so bad for making you give so much time to do this.

CatherinaAndrea
Forumember

Female Posts : 230
Reputation : 19
Language : English, Russian, Dutch

http://www.nailphanatic.com/

Back to top Go down

Solved Re: RollOver Nav HTML & JQuery

Post by LGforum on October 22nd 2011, 4:32 pm

Again edited the script above lol.

LGforum
Hyperactive

Male Posts : 2254
Reputation : 254
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: RollOver Nav HTML & JQuery

Post by CatherinaAndrea on October 22nd 2011, 4:34 pm

Cool that's all of em there, with the proper text. Still static tho.

CatherinaAndrea
Forumember

Female Posts : 230
Reputation : 19
Language : English, Russian, Dutch

http://www.nailphanatic.com/

Back to top Go down

Solved Re: RollOver Nav HTML & JQuery

Post by LGforum on October 22nd 2011, 4:35 pm

Now you need to add the javascript that makes them do what you want them to do back onto your forum. Get the file number and put it in my script above.

LGforum
Hyperactive

Male Posts : 2254
Reputation : 254
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: RollOver Nav HTML & JQuery

Post by CatherinaAndrea on October 22nd 2011, 4:41 pm

Code:
$(document).ready(function() {

   $("#topnav li").prepend("<span></span>"); //Throws an empty span tag right before the a tag

   $("#topnav li").each(function() { //For each list item...
      var linkText = $(this).find("a").html(); //Find the text inside of the <a> tag
      $(this).find("span").show().html(linkText); //Add the text in the <span> tag
   });

   $("#topnav li").hover(function() {   //On hover...
      $(this).find("span").stop().animate({
         marginTop: "-97" //Find the <span> tag and move it up 97 pixels
      }, 250);
   } , function() { //On hover out...
      $(this).find("span").stop().animate({
         marginTop: "0"  //Move the <span> back to its original state (0px)
      }, 250);
   });

});

So put this code above your code?

CatherinaAndrea
Forumember

Female Posts : 230
Reputation : 19
Language : English, Russian, Dutch

http://www.nailphanatic.com/

Back to top Go down

Solved Re: RollOver Nav HTML & JQuery

Post by LGforum on October 22nd 2011, 5:23 pm

No below it. In the same file.

OR, in its own seperate file, and then get the script file number, and place it in the script tag in my code.

LGforum
Hyperactive

Male Posts : 2254
Reputation : 254
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: RollOver Nav HTML & JQuery

Post by CatherinaAndrea on October 22nd 2011, 9:12 pm

I have played around with the codes, and can't get it to be the way i envision it to be. So decided to go a slightly different way with only using 4 main rolling buttons.

I want to Thank everyone who took time to help me on this!

Topic can now be Locked.

CatherinaAndrea
Forumember

Female Posts : 230
Reputation : 19
Language : English, Russian, Dutch

http://www.nailphanatic.com/

Back to top Go down

Solved Re: RollOver Nav HTML & JQuery

Post by Nera. on October 22nd 2011, 9:14 pm

Lock Hello

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum