Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I have a script to fade in and out the page container when a link is clicked in the nav. I have attached the script to the .menu-item class to target just wordpress menu links. The script itself seems like it should work but when any link is clicked in the nav the location comes up http://www.domian.com/undefined. When you hover on the link it displays the acutual location but clicking it doesnt take you there. When I remove the script all links work fine. Here is the JS

$(document).ready(function() {
      $('#page-wrap').delay(500).fadeIn(1000);

      $(".menu-item").click(function(event){
        event.preventDefault();
        linkLocation = this.href;
        $("#page-wrap").fadeOut(1000, redirectPage);        
    });

    function redirectPage() {
        window.location = linkLocation;
    }
});
share|improve this question

put on hold as off-topic by ialocin, birgire, Mark Kaplun, Pieter Goosen, Johannes Pille 4 hours ago

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Your question should be specific to WordPress. Generic PHP/JS/HTML/CSS questions might be better asked at Stack Overflow or another appropriate site of the Stack Exchange network. Third party plugins and themes are off topic." – ialocin, birgire, Mark Kaplun, Pieter Goosen, Johannes Pille
If this question can be reworded to fit the rules in the help center, please edit the question.

    
This is probably off-topic since it is JS-related, but as a head's up you probably need to switch to jQuery non-conflict mode. jQuery(document).ready(function($){ –  helgatheviking Jul 30 '13 at 23:32

1 Answer 1

Can you try this instead? you need to do the click binding for each item, because you will always get the first item returned on $(".menu-item")

$(document).ready(function() {
      $('#page-wrap').delay(500).fadeIn(1000);

      $(".menu-item").each(function (){ 
        $(this).click(function(event){
            event.preventDefault();
            linkLocation = $(this).href;
            $("#page-wrap").fadeOut(1000, redirectPage);   
        });    
      });

      function redirectPage() {
        window.location = linkLocation;
      }
});
share|improve this answer
    
Tried it and still pulls the wrong href to domian.com/undefined –  Packy Jul 30 '13 at 22:23
    
This fixed it. Was targeting just the <li> as opposed to the action of the <li> $(".menu-item a").click(function(event){ event.preventDefault(); linkLocation = this.href; $("#page-wrap").fadeOut(1000, redirectPage); }); –  Packy Jul 30 '13 at 22:27
    
good to know.. I have no idea of your html structure so I wont have came up to that.. ;) –  reikyoushin Jul 31 '13 at 12:49

Not the answer you're looking for? Browse other questions tagged or ask your own question.