Question

I am currently working on building a very simple site for an open source research project for my University. I am using JQuery to animate the sub-navigation of the site. However, my code only seems to work in IE and not Firefox or Chrome.

I’m not sure if it is a compatibility issue, or if it is my fault. I looked up examples on the web, and I do not see any differences in code as to why mine will not work.

The HTML for the section of the site is as follows :

<!-- START NAVIGATION & SUB NAVIGATION -->
<div class="nav">
    <ul>
        <li><a class="nav_home" href='#'><span>home</span></a></li>
        <li><a class="nav_about" href="#"><span>about</span></a></li>
        <li><a><span>research</span></a></li>
        <li><a><span>findings</span></a></li>
        <li><a><span>contact</span></a></li>
    </ul>
</div>
<div class="sub_nav">
    <ul class="sub_nav_home">
        <li><a><span>sub link</span></a></li>
        <li><a><span>sub link</span></a></li>
        <li><a><span>sub link</span></a></li>
        <li><a><span>sub link</span></a></li>
        <li><a><span>sub link</span></a></li>
        <li><a><span>sub link</span></a></li>
        <li><a><span>sub link</span></a></li>
    </ul>
    <ul class="sub_nav_about">
        <li><a><span>sub link</span></a></li>
        <li><a><span>sub link</span></a></li>
        <li><a><span>sub link</span></a></li>
        <li><a><span>sub link</span></a></li>
        <li><a><span>sub link</span></a></li>
        <li><a><span>sub link</span></a></li>
    </ul>
</div>
<!-- FINISH NAVIGATION -->

**Note: this is just testing information to make sure I can get the navigation working before implementing the real thing. Also, only the first two links work. I didn’t see the need to implement them all until I got it working.

And the JavaScript is as follows :

var current_sub = 0;

$(document).ready(function() {
    //hide elements
    $("div.sub_nav > ul").hide();

    function get_sub_navigation(nav_name)
    {
        if(current_sub != 0)
        {
            $(current_sub).fadeOut("slow", function ()
            {
                $(nav_name).slideDown("slow");
            });
        }
        else
        {
            $(nav_name).slideDown("slow");
        }
        current_sub = nav_name;
    }

    $("a.nav_home").click(function(event)
    {
        event.preventDefault();
        get_sub_navigation("ul.sub_nav_home");
    }
);
$("a.nav_about").click(function(event)
    {
        event.preventDefault();
        get_sub_navigation("ul.sub_nav_about");
    }
);
});

Ok, so the first thing is does is hide all sub nav lists. Then I have a listener for two of the nav links that should call get_sub_navigation. That function will check if there is one showing (just used 0 for default/nothing) and if there is hide it and if not, then show one.

As you can see, it is not finished code but, I don’t want move any further until I can get this figured out.

Any help is much appreciated!

Answer 1

Call event.preventDefault() in your event handler, not $(nav_name).preventDefault() in your navigation function (or pass the event into it). I suspect that the default is not getting prevented, and the page is being redrawn.