JQuery, hide not working in Firefox

Question

Hello,

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.

Answer 2

First of all, to hide the ul elements by default on page load you can simply use css instead of javascript:

div.sub_nav > ul { visibility: hidden; }

(i'm not 100% IE <= 6.0 will be 100% OK with this selector, though)

Second, and while i am by no means a jQuery expert, i would imagine that since the selector returns multiple elements it needs a different approach.

try

$("div.sub_nav > ul").each( function() {
    $(this).hide();
});

Answer 3

Alright, I got the ul's to show in Firefox and chrome. The problem was that you called current_sub before defining it. That would cause it to fail. I think this should take care of it.

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

 function get_sub_navigation(nav_name)
 {
 current_sub = nav_name;
 display = $(current_sub).css("display");
    if(display == "none")
  {
    $(current_sub).slideDown("slow");
  }
  else
  {
    $(current_sub).fadeOut("slow");
  }

 }

 $("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");
  }
);
});