CODEWITHSUNDEEP
javascriptlinkerfooter
Cojocaru Daniel
Cojocaru Daniel

Reputation: 139

javascript driven navigation menu on footer

My navigation menu on header looks like this: 

            <ul id="nav">
                <li id="home">
                   <a class="mainmenu" href="#">Link1</a>                    
                </li>

                <li>
                   <a class="mainmenu" href="#">Link2</a>                    
                </li>


            </ul>

and the same markup is used for the footer section and it's not working. I have also a file called jscript.js which contains all the javascript for the website, and I found this variable:

 var navTarget = "ul#nav li a" //menu link to target

Also, if I remove for example the markup in the header sections the footer will work. I've tried also to use .nav instead of #nav and I have the same problem.

The navigation menu is controlled by javascript, I don't post the code here because it's huge, for better understanding of how the navigation menu works look here

I've found this in the javascript:

//SET MENU ITEM IDs

 $(navTarget).each(function(i){
    i++                     
    this.id = this.id +"_" +i ;
 });

//MENU CLICK FUNCTION

 $(navTarget).click(function() {

    //ensure link isnt clickable when active
    if ($(this).hasClass('active')) return false;

    //get id of clicked item
    activeNavItem = $(this).attr('id');

    //call the page switch function
    switchContent();



});

//CONTENT SWTICH FUNCTION

 var switchContent = function (){


        //set previous and next link & page ids
        var PrevLink = $(navTarget+'.active')
        $(PrevLink).removeClass('active');
        var PrevId = $(PrevLink).attr('id');
        //alert(PrevId)

        var NextLink = $('#'+activeNavItem).addClass('active');
        var NextId = activeNavItem
        //alert(NextId);

Upvotes: 0

Views: 528

Answers (3)

JimmiTh
JimmiTh

Reputation: 7449

If the code for the footer really is identical to the header, that's the problem. An id should only be used for a single element in a page, and jQuery's selectors will only return the first. Meaning code like "ul#nav li a" only works on the header.

Easiest solution is to change the id's to classes, e.g.:

<ul class="nav">

... and change your jQuery to match that, e.g.:

var navTarget = "ul.nav li a";

Update: And (ignoring that this may end up turning into three duplicate posts), that fix is probably not enough at all, since other parts of the script may only work with a single menu.

Upvotes: 1

Alex Wayne
Alex Wayne

Reputation: 187252

You can only have one element of a given id on the page. So based on your description, it sounds like you have 2.

I don't know exactly how this script works, but you can try using classes instead.

<ul class="nav">

var navTarget = "ul.nav li a";

You would have to change your HTML and the JS navTarget selector string.

But there is also a good chance that your script may not support creating multiple menus at all. And if thats the case, you may need to fix that script or find a better one.

Upvotes: 1

mtyson
mtyson

Reputation: 8580

From the looks of it, the JS code is using some CSS selector (like jquery's $ or dojo's dojo.query) that pulls in the DOM element target based on the value of navTarget, and then does something with it: turns it into a menu.

But its only doing it once.

You need to look at the JS and see where navTarget is used. Then it should be fairly easy to make it do the menu creation on all the results of $(navTarget) instead of just the first hit.

Also, you should only have on instance of an ID in your dom.

You can change this to a class instead:

var navTarget = "ul.nav li a"

And in the markup:

<div class='nav'>

But you will still have to look at the JS and make sure it functions against a set of targets returned by the CSS selector. That code is probably expecting just a single result and using just it: results[0].

Upvotes: 2

Related Questions