I am trying to hook some jQuery to my nav to fade in and out the page wrapper when someone click on a main nav link. The code itself is working fine, but just have 2 issues:

• There is a flash in beggining like it loads everything, removes it, then fades it in (not sure if this is CSS related).
• The links are broken. For example: when you click "contact" instead of going to www.domain/contact it goes to www.domain/undefiend

Any help would be great. Thanks!!

JS

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

    $('.menu-item').click(function(event) {
        event.preventDefault();
        newLocation = this.href;
        $('#page-wrap').fadeOut(1000, newpage);
    });

    function newpage() {
        window.location = newLocation;
    }
});

The code for the Nav (using wordpress)

<div id="nav_wrap">
    <div id="nav"><?php wp_nav_menu( array( 'theme_location' => 'header-menu',) ); ?></div>
</div>

I am trying to hook some jQuery to my nav to fade in and out the page wrapper when someone click on a main nav link. The code itself is working fine, but just have 2 issues:

• There is a flash in beggining like it loads everything, removes it, then fades it in (not sure if this is CSS related).
• The links are broken. For example: when you click "contact" instead of going to www.domain./contact it goes to www.domain./undefiend

Any help would be great. Thanks!!

JS

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

    $('.menu-item').click(function(event) {
        event.preventDefault();
        newLocation = this.href;
        $('#page-wrap').fadeOut(1000, newpage);
    });

    function newpage() {
        window.location = newLocation;
    }
});

The code for the Nav (using wordpress)

<div id="nav_wrap">
    <div id="nav"><?php wp_nav_menu( array( 'theme_location' => 'header-menu',) ); ?></div>
</div>

• javascript
• jquery
• html
• css
• scope

• do the links work before this? It sounds like your href is wrong from the start, this doesn't change anything about that. – Jordan Commented Jul 26, 2013 at 21:55
• Can you post the code were "contact" is? – Sergio Commented Jul 26, 2013 at 21:59
• ya, if I remove the section on JS the navigation works just fine. And when you hover on the links at the bottom (in chrome) it tells you the the link is right but when clicked it goes to "undefined" – Packy Commented Jul 26, 2013 at 22:02
• @Sergio I edit the original post to show the nav code – Packy Commented Jul 26, 2013 at 22:15
• @Packy, I saw that, good. Do provide code so all can help better next time. Good you got your question answered! – Sergio Commented Jul 26, 2013 at 22:19

1 Answer 1

HTML:

<div id="page-wrap" style="display: none;">
    ...
</div>

jQuery:

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

    $('.menu-item').click(function(event) {
        event.preventDefault();
        var newLocation = this.href;
        $('#page-wrap').fadeOut(1000, function () {
            window.location = newLocation;
        });
    });
});