JQuery, hide not working in Firefox

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!


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.

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.


$("div.sub_nav > ul").each( function() {

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")



Category:javascript Time:2009-08-18 Views:0

Related post

  • Jquery hide() and show() runs too slow in google chrome 2011-01-30

    I have a web application that doesn't run correctly in chrome. Works perfectly in Firefox. I have a page with a large numbered of list items, 316 to be exact. Each list item contains a large amount of HTML. My problem is when I want to hide or show t

  • Jquery .show() not working in firefox 2011-09-01

    I have a problem with the jquery show function in firefox. Situation: I have loaded a iframe with an aspx page in a popup (fancybox). In that aspx page I have a button with an onclick event which calls a custom function and in that function it fires

  • jquery AppendTo & Append Error in Firefox 2009-11-07

    I am getting a strange error using jQuery 1.3.2 and Firefox. I have created a small popup window for an element and I am using the code var popupWindow = $($('#template')[0].innerHTML).css( 'top', top).css( 'left', left).css( 'position', 'absolute').

  • jQuery: Hide popup if click detected elsewhere 2010-02-24

    I'm trying to hide a div if the user clicks anywhere BUT the popup OR it's children. This is the code I have so far: $("body").click(function(){ var $target = $(event.target); if(!$target.is(".popup") || !$target.is(".popup").children()){ $("body").f

  • Jquery .hide problem 2010-04-14

    I'm using jquery to show animated MSN like window at the bottom of the page. Jquery code: $(document).ready(function() { $(" .inner").stop().animate({height:'142px'},{queue:false, duration:600}); $(' .close').click(function(event) { $(' .inner').hide

  • Jquery, hide & show list items after nth item 2010-10-29

    Say I have an unordered list, like so: <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul> How would I, using JQuery, hide the last 2 list items and h

  • Close jQuery hide/show div on load? 2011-03-24

    I have a jQuery hide/show div script for the FAQ portion of my page. Everything works great except the questions are opened upon loading and I would like them to be closed. Here is the script: <script type="text/javascript"> $(document).ready(f

  • jquery hide part of html code 2011-04-21

    I'm making a "news" page at the moment for a website. I only want to display the first, let's say, 15 lines of each news, so that when you land on the page it looks nice. At the end of the 15th line, I add a little link "read more" that calls a jquer

  • jquery hide not taking parameter 2011-05-05

    <div id="updatePlayerList"> //some content </div> my code is like this <script> $('#updatePlayerList').fadeOut(1000); </script> Problem is it hides immediately with out waiting for 1000millisecond( like a fade effect) SOLVED:

  • jQuery hide element while preserving its space in page layout 2011-06-18

    Is there a way in jQuery where I can hide an element, but not change the DOM when it's hidden? I'm hiding a certain element but when it's hidden, the elements below it move up. I don't want that to happen. I want the space to stay the same, but the e

  • jQuery .hide function not working 2011-06-28

    Hy guys and hope you can help. I have a very simple jQuery hide function that was working but some bugInTheRom has occured overnight and it no longer does. Effectively I'm trying to add a 'Patience' warning visible whilst some SWF loads. Here's my ca

  • jQuery hide(), ease to coordinates 2011-08-06

    Anyone ever found a jQuery hide() easing function that can go to certain X & Y coordinates? To make it look like it's being thrown? Because the default hide("slow") will go to the top left (I believe), not to a certain position. --------------Sol

  • Why isnt my jquery .hide() working? 2011-08-19

    I have a simple jquery.hide() function that is on all the divs with a class "groups". But for some reason it doesn't work and I don't know why. I'm using rails 3 and have both put the jquery in the application.js file and the actual file 'edit' in sc

  • Jquery .hide() and .show() not work with IE7 2011-10-21

    This .show and .hide works great in Firefox, Chrome, Safari but not in IE 7. In IE the span doesn't hide, it alway show all of (three) tabs. Am I doing something wrong? <script> var currentTab = 0; function openTab(clickedTab) { var thisTab = $

  • div height prob after jquery hide() 2011-10-30

    after hiding some inner divs with jquery hide() function, the outer div height doesn't fit and its height is as long as it was before hiding. i've this problem with IE, FF not with Chrome. what's the solution !! ( i can give the page url if requested

  • jQuery .hide() and .show() now working in one instance 2011-12-24

    I have 2 buttons that I am trying to show/hide by toggling and using the jQuery hide and show functions. But for some reason I can't get them to work. It happens when a person votes on an item. Here is the code: // Called right away after someone cli

  • Element stays hidden using jquery .hide() before .animate() 2012-01-24

    I'm trying to place a hidden validation popup on the DOM, and then animate it in when the form is sent. I have found that the jQuery animation methods operate differently when using either .hide() or .css(opacity, 0) prior to animating the element in

  • Jquery hide/show weird glitch 2012-02-21

    This would be easier with a jsfiddle, but as god is my witness something is wrong with jsfiddle and none of my js is working, but they work on my localhost though so yeah. So let me explain i have a div called topBar. Its hidden on dom load. I have a

  • jquery .hide uses {visibility:hidden;} is there alternative using {display:none;} 2012-04-23

    From my understanding using .hide in jquery uses (css) {visibility:hidden;} is there an alternative using {display:none;} ? As doesn't a {visibility:hidden;} item still take up pixel space, where as with {display:none;} it hides the item and does not

Copyright (C) pcaskme.com, All Rights Reserved.

processed in 0.488 (s). 13 q(s)