RollOver Nav HTML & JQuery

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?

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'.

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>

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.

Thank you for your reply

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?

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.

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

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

They are the only ones in there.

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. Oh nera...

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>

I wish i knew Cath. sorry.

No Problem, Thank you for your time anyways

Anyone else? ... am this close to giving up

[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>

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.

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.

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.

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

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>');
});


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

Yup sorry, edited the code above.

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.

Again edited the script above lol.

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

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.

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?

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.

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.

Lock