Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,724
    Thanks
    41
    Thanked 191 Times in 190 Posts

    auto hide/unhide via javascript

    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

    Code:
    <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
    Code:
    <div id="Nav_Bar_Menu_Content" class="Nav_Menu">
    .........
    <div id="Nav_Menu_JS_Content" class="Nav_Menu_JS">
    Last edited by alykins; 07-20-2011 at 06:14 PM.

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #2
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    616
    Thanks
    48
    Thanked 65 Times in 65 Posts
    Your div is named Nav_Bar_Menu_Content but you have your javascript searching for an element named Nav_Menu_Content.
    "Yeah science!"
    Online Science Tools

  • #3
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,724
    Thanks
    41
    Thanked 191 Times in 190 Posts
    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...

    Code:
    <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>

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #4
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    851
    Thanks
    172
    Thanked 93 Times in 93 Posts
    Hi alykins

    Isn't this an oxymoron?

    the js disabled is display:inherit;
    Code:
    <script type="text/javascript">
              document.getElementById("Nav_Menu_JS_Content").style.display = "inherit";

    LT

  • #5
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,724
    Thanks
    41
    Thanked 191 Times in 190 Posts
    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;

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #6
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    851
    Thanks
    172
    Thanked 93 Times in 93 Posts
    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
    Last edited by low tech; 07-20-2011 at 01:53 AM.

  • #7
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,724
    Thanks
    41
    Thanked 191 Times in 190 Posts
    Quote Originally Posted by low tech View Post
    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...
    Code:
    .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

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #8
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    851
    Thanks
    172
    Thanked 93 Times in 93 Posts
    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">
    Last edited by low tech; 07-20-2011 at 04:01 PM.

  • Users who have thanked low tech for this post:

    alykins (07-20-2011)

  • #9
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,724
    Thanks
    41
    Thanked 191 Times in 190 Posts
    thanks for reply low tech
    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.

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #10
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    851
    Thanks
    172
    Thanked 93 Times in 93 Posts
    Hi alykins

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

    LT
    good luck

  • #11
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,724
    Thanks
    41
    Thanked 191 Times in 190 Posts
    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

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #12
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    851
    Thanks
    172
    Thanked 93 Times in 93 Posts
    Hi alykins

    well done

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


    LT
    pssmile


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •