0

I'm having a weird problem.

I have a div that is hidden via css display:none, and each page has an id on the body tag. now when I load the pages by hitting enter in the address bar, or by a link to that page, everything loads normally, and the div that needs to be shown shows up.

But not if I hit the F5 button to refresh the page.

Super simple jquery, but doesn't work on F5? Bug? or something Im missing?

html

<body id="projects">
<ul id="sub_navigation" class="projects">
<li>stuff</li>
<li>stuff</li>
</ul>

css

#sub_navigation.projects{display:none;}

Jquery

$(document).ready(function(){
var page = $('body').attr('id');        
$('#sub_navigation.'+page).show();  
});
David
  • 2,094
  • 3
  • 30
  • 47
  • 1
    Just out of interest, why do you use the `'#sub_navigation.'+page` selector? For valid HTML there should be at most one element with `id=sub_navigation` so you don't need the extra class part. Same goes for the CSS selector, just use `#sub_navigation{display:none;}`. – Paul Grime Sep 09 '11 at 22:14
  • Can you put an `alert` in your `$(document).ready` function to make sure that it is called when you press F5. – Paul Grime Sep 09 '11 at 22:17
  • Because there are three different ones, and I need to get the id of the page, then show which sub_navigation goes with that page – David Sep 09 '11 at 22:17
  • I put the alert in there and it shows the id of the page, then shows the div. If I comment it out, it still doesn't work. Which is also weird – David Sep 09 '11 at 22:18
  • Just double checked, it only shows with I alert the var out. If it's no alert, it doesn't – David Sep 09 '11 at 22:22
  • Make sure your `` tag for the CSS is before the ` – bfavaretto Sep 09 '11 at 22:35

2 Answers2

0

You're finding the element by the ID, so you shouldn't need the page ID. Try this instead: 

$(document).ready(function(){      
    $("#sub_navigation").show();   
});

I don't know how many elements use the projects class name, but would it be possible to get the element by the class name?:

$(document).ready(function(){      
    $(".projects").show();   
});

Or how about this maybe?:

$(document).ready(function(){      
    $("ul#sub_navigation.projects").show();   
});
James Johnson
  • 45,496
  • 8
  • 73
  • 110
  • Ya I do, there are three sub_navigations with different classes – David Sep 09 '11 at 22:16
  • That's really not a good way to do things. You should be able to uniquely identify elements by their ID. – James Johnson Sep 09 '11 at 22:23
  • the difference between classes and id still doesn't solve the issue at hand – David Sep 09 '11 at 22:24
  • So how many elements have the `projects` class name? Can you find the element by the class name? – James Johnson Sep 09 '11 at 22:25
  • So I found the solution. Apparently single quotes are a bad thing for some reason. as soon as I switched it to double quotes it worked. Any reason why single quotes are bad? – David Sep 09 '11 at 22:39
  • I'm starting to think that you might have some funky stuff going on with the way you've finding the element. Take a look at this question, which discusses how to find an element by and ID and class name: http://stackoverflow.com/questions/1944302/jquery-select-an-elements-class-and-id-at-the-same-time – James Johnson Sep 09 '11 at 22:42
0

I would try this:

html - use a suffix on the navigation id to identify it uniquely.

<body id="projects">
<ul id="sub_navigation_projects" class="hidden">
<li>stuff</li>
<li>stuff</li>
</ul>

css

.hidden{display:none;}

javascript - create the unique navigation id based on the body id.

$(document).ready(function() {
    var page = $('body').attr('id');
    $('#sub_navigation_'+page).removeClasss('hidden');
});
Paul Grime
  • 14,970
  • 4
  • 36
  • 58
  • I believe `sub_navigation` has certain styles associated with it. – James Johnson Sep 09 '11 at 22:34
  • Is there anything else happening on the page in terms of CSS or Javascript that is acting on these HTML elements? – Paul Grime Sep 09 '11 at 22:41
  • no, I stripped it right down and it's still not working. Well, "not working" isn't entirely accurate. Sometimes it works, sometimes it doesn't.. So I dunno. Going a different route. – David Sep 09 '11 at 22:45