SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 26
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    No error or even warning, but my subLevel won't open & close

    Hi,

    I have a navMenu of which some items should open & close straight down, onclick. Because of that straight down opening, I thought it would be semantic enough if I would not put those items in a sub menu, but leave them in the main menu.

    But although I do not get any error or even just a warning in IE9 (with debugger) and FF7 (Firebug 1.8.4), the subLevel items won't open or close.

    The code contains quite a lot of seemingly irrelevant matters, but this way you will have nicer menu to play with . And it is a one-action copy & paste code.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>TEST</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #menuContainer {
        width: 148px;
        position: absolute;
        top: 120px;
        bottom: 10px;
        }
    #menuDiv {
        width: 108px;
        position: relative; 
        left: 21px;
        margin-top: 20px;
        }
    #menuDiv ul {
        list-style: none;
        margin: 0;
        padding: 0;
        }
    #menuDiv li {
        border: 1px solid #555;
        border-top: 0;
        white-space: nowrap;
        text-align: left;
        }
    #menuDiv li#firstKid {
        border-top: 1px solid #666;
        }
    #menuDiv li a {
        display: block;
        padding: 3px;
        font: normal 12px/18px Verdana; /* without line-height gaps in IE6 */
        color: #000;
        text-decoration: none;
        background-color:  #60b0b0;
        }
    #menuDiv li a:hover {
        background-color: #000;
        color: #fff;
        }
    #menuDiv a#hasSubLevel {
        background: #60b0b0 url(images/vakje_plus.gif) no-repeat 95% 63%;
        }
    #menuDiv a#hasSubLevel:hover {
        background-color: #999;
        color: #000;
        }
    #menuDiv li.subLevel {
        display: none;
        }
    #menuDiv li.subLevel a {
        background-color: #ffff99;
        color: #000;
        }
    #menuDiv li.subLevel a:hover {
        color: #fff;
        background: #000;
        }
    #menuDiv li a.newWindow {
        background: #60b0b0 url('images/newWindow3.gif') no-repeat 95% 50%;
        }
    #menuDiv li.subLevel a.newWindow {
        background: #ffff99 url('images/newWindow3.gif') no-repeat 95% 50%;
        }
    #menuDiv li a.newWindow:hover, #menuDiv li.subLevel a.newWindow:hover {
        background: #000 url('images/newWindow3Neg.gif') no-repeat 95% 50%;
        color: white;
        }
    </style>
    
    <script type="text/javascript">
    document.getElementsByClassName = function(cl)
    {
        var retnode = [];
        var myclass = new RegExp('\\b'+cl+'\\b');
        var elem = this.getElementsByTagName('*');
        for (var i=0; i<elem.length; i++)
        {
            var classes = elem[i].className;
            if (myclass.test(classes)) retnode.push(elem[i]);
        }
            return retnode;
    }
    </script>
    <script type="text/javascript">
    function openSubLevel()
    {
        var parent = document.getElementById('hasSubLevel');
        var children = document.getElementsByClassName('subLevel');
        for (var c=0; c<children.length; c++)
        {
            if (children[c].style.display == 'none')
            {
                children[c].style.display = 'block';
                parent.style.backgroundImage = 'url(images/vakje_min.gif)';
            }
            else return;
        }
    }
    
    function closeSubLevel()
    {
        var parent = document.getElementById('hasSubLevel');
        var children = document.getElementsByClassName('subLevel');
        for (var n=0; n<children.length; n++)
        {
            if (children[n].style.display == 'block')
            {
                children[n].style.display = 'none';
                parent.style.backgroundImage = 'url(images/vakje_plus.gif)';
            }
            else return;
        }
    }
    </script>
    
    </head>
    <body>
            <div id="menuDiv">
                <ul>
                    <li id="firstKid"><a href="#" onclick="closeSubLevel()">Introductie</a></li>
                    <li><a href="#" onclick="closeSubLevel()">Kwaliteitseisen</a></li>
                    <li><a href="#" onclick="closeSubLevel()">Zelf updaten</a></li>
                    <li><a href="#" onclick="closeSubLevel()">Showcase</a></li>
                    <li><a href="#" onclick="closeSubLevel()">Bedrijfsinfo</a></li>
                    <li><a href="#" id="hasSubLevel" onclick="openSubLevel();">Werkwijze</a></li>
                    <!-- begin subLevel -->
                        <li class="subLevel"><a href="layouts-overzicht.html" class="newWindow" target="_blank">Lay-outs</a></li>
                        <li class="subLevel"><a href="stylingmodule.php" class="newWindow" target="_blank">Styling</a></li>
                        <li class="subLevel"><a href="lettertypen.html">Lettertypen</a></li>
                        <li class="subLevel"><a href="fototips.html">Fototips</a></li>
                    <!-- end subLevel -->
                    <li><a href="#" class="newWindow" target="_blank">Mobiel</a></li>
                </ul>
            </div>
    </body>
    </html>
    Thanks in advance.

  2. #2
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ancillary problem, maybe what's actually going wrong for you: When the user clicks on the link, there's no JS that disables the default action. So nothing happens, and the page reloads. The quick solution is to change the onclick handler to also return false:

    HTML Code:
    <a ... onclick="openSubLevel();return false;">
    Now, the real problem is that in your loop, you're checking the style.display property of each child:

    Code JavaScript:
    if (children[c].style.display == 'none')
    {
        // ...
    }
    else return;

    But you're only setting the display to "none" in the CSS. And the JS style object doesn't reflect stylesheet styles! So the first time you check the style.display on the first child, it's going to be false!

    There is no fix as easy as the "return false" thing from above. If it were me, I'd combine the openSubLevel and closeSubLevel functions into one. Then, instead of checking for a display of none, check for a display of block. Then, when it fails the first time because style.display returns undefined, it's still doing the right action:

    Code JavaScript:
    function openCloseSubLevel() {
        var parent = document.getElementById('hasSubLevel');
        var children = document.getElementsByClassName('subLevel');
     
        var currentlyShowing = children[0].style.display === 'block';
        var newDisplay = currentlyShowing ? 'none' : 'block';
        var newBackground = currentlyShowing ? 'plus' : 'min';
        newBackground = 'url(images/vakje_' + newBackground + '.gif)';
     
        for (var c = 0; c<children.length; c++) {
            children[c].style.display = newDisplay;
            children[c].style.backgroundImage = newBackground;
        }
    }
    I'm the web overlord for Graphic Business Systems

  3. #3
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    if (children[n].style.display == 'block')
    The above notation cannot be used to check what the element's css rule is.

    There's lots of examples on Google on how to get the style rules from the css using javascript.

    For debugging purposes do an

    Code:
    alert(children[n].style.display);
    and see what the output is.

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now that's a speedy reply, for a Friday night! Unfortunately however, inserting return false; doesn't do the trick. For your convenience, I'm reposting the code, in which the only I changed is the insertion (and the correct code tags around it):
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>TEST</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #menuContainer {
        width: 148px;
        position: absolute;
        top: 120px;
        bottom: 10px;
        }
    #menuDiv {
        width: 108px;
        position: relative; /* margin:auto centreert hier niet goed */
        left: 21px;
        margin-top: 20px;
        }
    #menuDiv ul {
        list-style: none;
        margin: 0;
        padding: 0;
        }
    #menuDiv li {
        border: 1px solid #555;
        border-top: 0;
        white-space: nowrap;
        text-align: left;
        }
    #menuDiv li#firstKid {
        border-top: 1px solid #666;
        }
    #menuDiv li a {
        display: block;
        padding: 3px;
        font: normal 12px/18px Verdana; /* zonder line-height 'gaps' in IE6 */
        color: #000;
        text-decoration: none;
        background-color:  #60b0b0;
        }
    #menuDiv li a:hover {
        background-color: #000;
        color: #fff;
        }
    #menuDiv a#hasSubLevel {
        background: #60b0b0 url(images/vakje_plus.gif) no-repeat 95% 63%;
        }
    #menuDiv a#hasSubLevel:hover {
        background-color: #999;
        color: #000;
        }
    #menuDiv li.subLevel {
        display: none;
        }
    #menuDiv li.subLevel a {
        background-color: #ffff99;
        color: #000;
        }
    #menuDiv li.subLevel a:hover {
        color: #fff;
        background: #000;
        }
    #menuDiv li a.newWindow {
        background: #60b0b0 url('images/newWindow3.gif') no-repeat 95% 50%;
        }
    #menuDiv li.subLevel a.newWindow {
        background: #ffff99 url('images/newWindow3.gif') no-repeat 95% 50%;
        }
    #menuDiv li a.newWindow:hover, #menuDiv li.subLevel a.newWindow:hover {
        background: #000 url('images/newWindow3Neg.gif') no-repeat 95% 50%;
        color: white;
        }
    </style>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    document.getElementsByClassName = function(cl)
    {
        var retnode = [];
        var myclass = new RegExp('\\b'+cl+'\\b');
        var elem = this.getElementsByTagName('*');
        for (var i=0; i<elem.length; i++)
        {
            var classes = elem[i].className;
            if (myclass.test(classes)) retnode.push(elem[i]);
        }
            return retnode;
    }
    /*]]>*/
    </script>
    <script type="text/javascript">
    /*<![CDATA[*/
    function openSubLevel()
    {
        var parent = document.getElementById('hasSubLevel');
        var children = document.getElementsByClassName('subLevel');
        for (var c=0; c<children.length; c++)
        {
            if (children[c].style.display == 'none')
            {
                children[c].style.display = 'block';
                parent.style.backgroundImage = 'url(images/vakje_min.gif)';
            }
            else return;
        }
    }
    
    function closeSubLevel()
    {
        var parent = document.getElementById('hasSubLevel');
        var children = document.getElementsByClassName('subLevel');
        for (var n=0; n<children.length; n++)
        {
            if (children[n].style.display == 'block')
            {
                children[n].style.display = 'none';
                parent.style.backgroundImage = 'url(images/vakje_plus.gif)';
            }
            else return;
        }
    }
    /*]]>*/
    </script>
    
    </head>
    <body>
            <div id="menuDiv">
                <ul>
                    <li id="firstKid"><a href="#" onclick="closeSubLevel();return false;">Introductie</a></li>
                    <li><a href="#" onclick="closeSubLevel();return false;">Kwaliteitseisen</a></li>
                    <li><a href="#" onclick="closeSubLevel();return false;">Zelf updaten</a></li>
                    <li><a href="#" onclick="closeSubLevel();return false;">Showcase</a></li>
                    <li><a href="#" onclick="closeSubLevel();return false;">Bedrijfsinfo</a></li>
                    <li><a href="#" id="hasSubLevel" onclick="openSubLevel();return false;">Werkwijze</a></li>
                    <!-- begin subLevel -->
                        <li class="subLevel"><a href="layouts-overzicht.html" class="newWindow" target="_blank">Lay-outs</a></li>
                        <li class="subLevel"><a href="stylingmodule.php" class="newWindow" target="_blank">Styling</a></li>
                        <li class="subLevel"><a href="lettertypen.html">Lettertypen</a></li>
                        <li class="subLevel"><a href="fototips.html">Fototips</a></li>
                    <!-- eind subLevel -->
                    <li><a href="#" class="newWindow" target="_blank">Mobiel</a></li>
                </ul>
            </div>
    </body>
    </html>
    Regarding combining the two functions: I deliberately didn't do that because I only want the subLevel to open when the 'parent item' is clicked, and only closed when the other main menu items are clicked.

  5. #5
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You still have

    Code:
    if (children[n].style.display == 'block')
    in your code which is incorrect.

    See my previous post.

  6. #6
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Frank S View Post
    But although I do not get any error or even just a warning in IE9 (with debugger) and FF7 (Firebug 1.8.4), the subLevel items won't open or close.
    Bear in mind that just because you don't get any errors or warning, that doesn't mean there is nothing wrong with your code.

    No errors/warnings just means there are no syntax errors in your code, nothing more. If the output is still not what you want then that means you have logic errors in your code.

    A really simple example

    Code JavaScript:
    var a = 2 * 3;
     
    if(a > 10){
         alert('got here');
    }

    No errors or warnings will be generated with the above code, but the alert() will never be triggered because of the logic error in that a is a constant and <= 10. Most debuggers will not detect that the alert() will never be triggered.

    So if your code is not working, you need to do some basic debugging and step through your code and check values of variables using either a debugger or alert()'s. When a variable is not the expected value, then back track through your code to find the source of the error and fix it.

    If you develop sound debugging skills you can save a lot of time in the future by not having to wait around in forums for people to help you fix what a lot of the times are simple problems that can be fixed with some basic debugging.

  7. #7
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Webdev, nice to see you again! Our posts crossed, and when I hit the 'Post' button I had to get something to eat and some sleep, so I'm only reading your replies now. Thanks for the alert debugging trick. I just solved the matter by taking the if lines out completely, but I still have a few questions.

    If javascript cannot retrieve CSS values the way I thought it could, then why does this example work like a charm:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Demo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    #navMenuDiv #subLevel_1,
    #navMenuDiv #subLevel_2 {
             display: none;
             }
    </style>
    <script type="text/javascript">
    /*<![CDATA[*/
          function toggleDisplay(id)
          {
          var menuSubLevel = document.getElementById(id);
          if (menuSubLevel.style.display == "block")
          { menuSubLevel.style.display = "none"; }
          else
          { menuSubLevel.style.display = "block"; }
          }
    /*]]>*/
    </script>
    </head>
    <body>
      <div id="navMenuDiv">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Visie op Fitness</a></li>
          <li><a href="#" onclick="toggleDisplay('subLevel_1')">Activiteiten &darr;</a>
                  <ul id="subLevel_1">
                    <li><a href="#">Bodybuilding</a></li>
                    <li><a href="#">Bodyshaping</a></li>
                    <li><a href="#">Conditietraining</a></li>
                    <li><a href="#">Groepsactiviteiten</a></li>
                    <li><a href="#">Yoga</a></li>
                    <li><a href="#">Zelfverdediging</a></li>
                    <li><a href="#">Speciale uren</a></li>
                    <li><a href="#">Weight Watching</a></li>
                  </ul>
          </li>
          <li><a href="#" onclick="toggleDisplay('subLevel_2')">Faciliteiten &darr;</a>
                  <ul id="subLevel_2">
                    <li><a href="#">Fitnessapparatuur</a></li>
                    <li><a href="#">Sauna</a></li>
                    <li><a href="#">Bruinen</a></li>
                    <li><a href="#">Massage</a></li>
                    <li><a href="#">Personal coaching</a></li>
                    <li><a href="#">Kinderopvang</a></li>
                  </ul>
          </li>
          <li><a href="#">Tarieven</a></li>
          <li><a href="#">Acties</a></li>
          <li><a href="#">Locatie</a></li>
          <li><a href="#">Verdere info</a></li>
          <li><a href="#">Mobiel</a></li>
        </ul>
      </div>
    </body>
    </html>
    The second question is: do you know a good javascript course for intermediate students? This issue wasn't mentioned in the W3 Schools beginners course, including the DHTML course.

    Thanks in advance. (I still owe you a reporting back on that particular increment/decrement question, and I will report back.)

  8. #8
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Frank S View Post
    .....
    If javascript cannot retrieve CSS values the way I thought it could, then why does this example work like a charm:
    .....
    I didn't say it can't. What I said is, it can't the way you were doing it. This tute might help you understand.

    Read through sdleihssirhc's post where (s)he explains

    And the JS style object doesn't reflect stylesheet styles! So the first time you check the style.display on the first child, it's going to be false!
    There are plenty of examples on the www showing how to extract the css rules from stylesheets with javascript.

  9. #9
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And the JS style object doesn't reflect stylesheet styles! So the first time you check the style.display on the first child, it's going to be false!
    I read that, but my brain seemingly couldn't accept that because of the last example I gave, in which the style block values were read out by the Javascript. Also because (s)he gave another tip, a quick fix, I wanted to try that first.

    This tute might help you understand.
    Yes and no. I do get the concept now of javascript in principle not being able to read out style blocks and sheets, but the author doesn't explain why my last example does work. Why are ID style declarations returned, and class style declarations not?

  10. #10
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Lets go a little more in depth on this; say you start with the following HTML:

    HTML Code:
    <p id="test">hello, world</p>
    And you use the following CSS:

    Code CSS:
    #test { display:none }

    Now (or, once the DOM has loaded) try the following script:

    Code JavaScript:
    var elem = document.getElementById('test');
    alert(elem.style.display); // alerts "undefined"

    So when you have the following if-else check...

    Code JavaScript:
    if (elem.style.display === 'block') {
        elem.style.display = 'none';
    } else {
        elem.style.display = 'block';
    }

    ...it looks like everything's working. But the first time through, you're comparing undefined to "block". So you get the outcome you were expecting, but not for the reason you thought.
    I'm the web overlord for Graphic Business Systems

  11. #11
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, my explanation that it depends on the use of an ID versus a class is not correct. I just changed my last example to getElementsByClassName, and then it works just as well.

    But your explanation that Javascript doesn't reflect style sheet (i.e. block) declarations, if that is what you are saying, is not correct either. Otherwise my last example wouldn't work -- I'm not using inline styles.

    If I understand your last message correctly, it would all about the first-time comparison. And indeed, if I swap "block" and "none" in the Javascript in my last example, I have to click twice for the sub menu to appear, and then furthermore just once. And if I swap "block" and "none" in the Javascript in my first example, it does work.

    So it seems as if the first-time comparison has to check a condition that is opposite of what is declared in the style block. I could very well live with that, but if I click the 'parent link' Werkwijze in my first example more than once, nothing happens. Why is that then, considering the successful two-click action described in the above paragraph?

    Also, why is it that the use of inline styles solves all the problems? I don't have to swap anything in my first example, just apply inline styles, and everything works. So apparently the algorithm is much more complicated then just the first-time comparison?

  12. #12
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Frank S View Post
    But your explanation that Javascript doesn't reflect style sheet (i.e. block) declarations, if that is what you are saying, is not correct either.
    It is correct unless you first assign the style with javascript.

    The simple alert() sdleihssirhc showed you clearly shows how.

    Code:
    alert(elem.style.display); // alerts "undefined"
    Your code probably works, but not because of the reason you think

  13. #13
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So the thesis is: "Javascript doesn't reflect style block or style sheet declarations, unless you first assign the style with javascript."? But why does my second example (third message) work then? How did I assign the style with javascript there, which I did not do or do incorrectly in the first example?

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Frank S View Post
    But why does my second example (third message) work then? How did I assign the style with javascript there, which I did not do or do incorrectly in the first example?
    When JavaScript sets and retrieves styles, they are the inline styles on the element that it works with. Those inline styles override stylesheet styles that may also affect the same element.
    Normally when working with HTML we stay far away from using inline styles on an element, and use an external stylesheet for styles instead.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  15. #15
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    I'm not using any inline styles in my examples. Yet, my second example (third message) works. So the question remains: Why does my second example (third message) work? How did I assign the style with javascript there, that I did not do or do incorrectly in my first example?

  16. #16
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Frank S View Post
    Paul,

    I'm not using any inline styles in my examples. Yet, my second example (third message) works. So the question remains: Why does my second example (third message) work? How did I assign the style with javascript there, that I did not do or do incorrectly in my first example?
    The third message is by webdev1958. Please check again?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  17. #17
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Third message = my third message.

  18. #18
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Frank S View Post
    Third message = my third message.
    #3 is the message that was posted by webdev1958. Can you please link to the one that you mean?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  19. #19
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  20. #20
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Frank S View Post
    Ahh, the third posting that you have made to this thread, not the third message of this thread.

    Okay, the code in that post seems to work. What was the problem, or the question you had in regard to it?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  21. #21
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    What was the problem, or the question you had in regard to it?
    The op's query is in #15

  22. #22
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by webdev1958 View Post
    The op's query is in #15
    Okay, with that example from the previously mentioned post, the stylesheet causes the sublevel to not be displayed.
    The JavaScript looks to see if the inline style is 'block'. Since the inline style is undefined, JavaScript just gets an empty string and goes on to your else condition, which adds an inline style of 'block'. From there, the code works as you would expect.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  23. #23
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So as I see it, the key point is

    Quote Originally Posted by paul_wilkins View Post
    .....JavaScript just gets an empty string and goes on to your else condition, which adds an inline style of 'block'. From there, the code works as you would expect.
    which consistent with what sdleihssirhc and I said earlier.

    The op's code works but not for the reason he was thinking originally.



  24. #24
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, with that example from the previously mentioned post, the stylesheet causes the sublevel to not be displayed.
    The JavaScript looks to see if the inline style is 'block'. Since the inline style is undefined, JavaScript just gets an empty string and goes on to your else condition, which adds an inline style of 'block'. From there, the code works as you would expect.
    I'm afraid that still doesn't make me understand. Two questions:
    1. Why doesn't it work that way in my first example (= first post of this thread)? Why is there a difference between my first example and second example (seventh post of this thread)?
    2. Could you elaborate on the principle that Javascript adds an inline style declaration at an else condition? Why/how? I've written scientific articles on statistics, but this logic completely baffles me.

  25. #25
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Frank S View Post
    I'm afraid that still doesn't make me understand. Two questions:
    1. Why doesn't it work that way in my first example (= first post of this thread)?
    This is the code that you're talking about (I have added braces to the else condition, just for clarity):

    Code:
    if (children[c].style.display == 'none') {
        children[c].style.display = 'block';
        parent.style.backgroundImage = 'url(images/vakje_min.gif)';
    } else {
        return;
    }
    The if condition is checking if the inline style on the element equals 'none'. Since the page doesn't have any inline style on that element, and no other scripting has added an inline style to that element beforehand, it will be an empty string that it gets instead.

    Quote Originally Posted by Frank S View Post
    2. Could you elaborate on the principle that Javascript adds an inline style declaration at an else condition? Why/how?
    When you use methods such as elem.style display, it is not the CSS stylesheet that JavaScript is interacting with. Instead, it is an attribute on the element called style.

    For example:

    HTML Code:
    <p>A line of text.</p>
    <p style="display: none">A hidden line of text.</p>
    When JavaScript attempts to get the style.display property from the first paragraph tag, there is no style attribute on that element, so JavaScript will only get an empty string from that request.
    With the second paragraph tag, style.display would result in JavaScript getting the following string: "none"

    When JavaScript sets a style property, such as style.display, it edits the inline style attribute if one is there, and if an inline style attribute isn't there is creates one for the element, containing the appropriate style assignment instead.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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