...

View Full Version : Resolved auto hide/unhide via javascript



alykins
07-19-2011, 07:41 PM
hey all-
i have been thinking about how i wanted to tackle this for a while now, and it is now "down to the wire"... so in my page i have two nav bars, one for js enabled and one for js disabled... they are styled accordingly (the js disabled is display:inherit; and the js enabled is display:none;)
now i may need to tweak those styles after i get the script working, but that i can toy with after i get this working... anyways- my pages get the navbar inherited from a master page- so my thought was (to prevent loops) make a nav bar that had all js disabled links and a navbar that had all js enabled... then in my code i put in this script


<script type="text/javascript">
document.getElementById("Nav_Menu_JS_Content").style.display = "inherit";
document.getElementById("Nav_Menu_Content").style.display = "none";
</script>

now i am not amazing with js but i figured this would work... i get an error thrown every time though


Microsoft JScript runtime error: Unable to get value of the property 'style': object is null or undefined

now i assume (i am watching in debug) that this is because it is hitting the script before the rest of the page writes... but if i move the script below then the script never fires... ?

here are the two nav bar ID's
Note: i encapsulated the menus in <div>s and targeted the divs to ensure that there were no conflictions with my asp


<div id="Nav_Bar_Menu_Content" class="Nav_Menu">
.........
<div id="Nav_Menu_JS_Content" class="Nav_Menu_JS">

djh101
07-19-2011, 08:13 PM
Your div is named Nav_Bar_Menu_Content but you have your javascript searching for an element named Nav_Menu_Content.

alykins
07-19-2011, 08:19 PM
that was an oops when i was copy/pasting from my code... i went back and edited to fix the "oops" but missed the "_Bar" sections... to clarify...


<div id="header">
<div id="Nav_Bar_Menu">

<script type="text/javascript">
document.getElementById("Nav_Menu_JS_Content").style.display = "inherit";
document.getElementById("Nav_Menu_Content").style.display = "none";
</script>

<div id="Nav_Menu_Content" class="Nav_Menu">

<asp:Menu ID="Nav_Menu" ....
</div>

<div id="Nav_Menu_JS_Content" class="Nav_Menu_JS">
<asp:Menu ID="Nav_Menu_JS".....
</div>

low tech
07-19-2011, 11:59 PM
Hi alykins

Isn't this an oxymoron?


the js disabled is display:inherit;


<script type="text/javascript">
document.getElementById("Nav_Menu_JS_Content").style.display = "inherit";

:confused::confused:
LT

alykins
07-20-2011, 12:59 AM
not an attempt to be... i was trying to get all the elements within the Nav_Menu_JS_Content to just behave as though they never got display:none; applied... will doing display:block; mess everything else up? won't this affect the inheritance effect? i just don't want a display:block; to cascade down and flip all the child elements to display:block;

low tech
07-20-2011, 01:48 AM
Hi alykins

maybe I have misunderstood.

Are you saying that if js is disbaled then you want to use js to set style.display = "inherit";??
If so, then you can't do that.

What you do is first set everything up as you like it without js enabled ---- then if js is enabled change whatever using js.

LT

alykins
07-20-2011, 03:24 PM
Hi alykins

maybe I have misunderstood.

Are you saying that if js is disbaled then you want to use js to set style.display = "inherit";??
If so, then you can't do that.

What you do is first set everything up as you like it without js enabled ---- then if js is enabled change whatever using js.

LT

maybe the CSS for those elements will help as well...

.Nav_Menu_Content
{
display:inherit;
}

.Nav_Menu_JS_Content
{
display:none;
}

sry- i should've known better than to leave those chunks of code out... anywyas if you look at this CSS and the previous script/html set you will see that initially the JS div is set to display:none; and the non-JS div is set to inherit... all that is supposed to happen (if js is enabled) is they flip display properties... if I place the script before the divs my code (watching in debug mode) hits the script, it tries to fire, cannot find the elements, and then proceeds to write the rest of page... if i place the code after, nothing happens... i am unable to debug the script when it is placed after bc for some reason it tells me that "this is an unacceptable place to place a breakpoint"... the only reason i get to see the code debug and "break" when it is before is because it throws the warning/error

low tech
07-20-2011, 03:54 PM
Hi alykins

yeh I get it now -- I did misunderstand when reading. Sorry about that.

anyway

so bascially you are just (un)hiding a div by changing it's display property --- and from what I can see the code you are using is right.

You could try putting your js code in an onload function -- just a thought.

I assume that the class name in the divs is the same as the ones you just posted above (they are different to post1)

LT

oh, another thing 'I' would do is add style tags to the divs to display 'initial value' onload. Just to see if it had any effect.

<div id="Nav_Bar_Menu_Content" class="Nav_Menu" style="display:whatever">

alykins
07-20-2011, 03:59 PM
thanks for reply low tech :D
yeah they are different bc when i originally posted i just "rambo"'ed it and when i supplied code later i copy/pasted... I already smacked myself :)


I'll try the onload... I guess though I don't understand why this would be any different than just putting it in there open-ended so the browser auto fires it... does the onload function fire after the html is rendered?

"Rambo-ing" definition: going at something all willy nilly without regards to the consequences.

low tech
07-20-2011, 04:10 PM
Hi alykins

If you can't locate the problem
I guess show more code or a link is your next step.

LT
good luck

alykins
07-20-2011, 06:13 PM
thanks low tech for all your input. I figured out the problem (i did the onload function) my initial div was getting display:none; (i think) but my menu is apparently written via script- which i didn't realize till i turned scripting off to test the function and everything was broken... whether or not is "really" fixed is beyond my care atm... i have more issues now grr

low tech
07-20-2011, 11:54 PM
Hi alykins

well done

you got to a point where you could move on --- in my book that's a plus:thumbsup:


LT
ps:)smile



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum