SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: Hide and show

  1. #1
    SitePoint Addict
    Join Date
    Jun 2008
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hide and show

    Hi,

    I tried this code make it both Internet and mozilla compactibility but no luck. This code works in IE and not in Firefox. How to make it both compactible.

    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JavaScript Content Viewer</title>
    <style type="text/css">
        body {font-size:14px;line-height:18px;}
        h2 {cursor:pointer;font-size:16px;font-family:Trebuchet MS;margin-left:10px;line-height:10px;}
        div.block {margin-left:30px;}
        li {margin-top:2px;font-family:Trebuchet MS;}
    </style>
    
    </head>
    
    <body>
    <script type="text/javascript">
        function openFull(el){
            el.nextSibling.style.display=='none'?el.nextSibling.style.display='block':el.nextSibling.style.display='none'
        }
    </script>
    
    <h2 onclick="openFull(this)">Click here</h2>
    <div class="block">
        <h3>Supported browsers</h3>
        </div>
    </div>
    </body>
    </html>

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nextSibling could be a text element (shown as #text in firebug).. You may have to do a loop to check the className.

    i.e.

    Code javascript:
    var tmp = el.nextSibling;
    while(tmp.className != 'block')
    tmp = tmp.nextSibling;
    tmp.style.display = (tmp.style.display == 'none' ? '' : 'none');


  3. #3
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    LOL...

    el.nextSibling returns "\n" in firebug....

    just try to clean your white-spaces in your html code

    i.e.
    <h2 onclick="openFull(this)">Click here</h2><div class="block"><h3>Supported browsers</h3></div>

    or use, el.nextSibling.nextSibling for firefox.

  4. #4
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that means you have to change your code depending on the browser. At least my solution will get the correct element regardless.


  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    @gRroberts: You came close, but your solution is quite specific only to that one situation. It's also hard to follow the code because the while loop isn't indented, and as its without braces there is the possibility for confusion. You did well though with changing the style declaration from 'block' to an empty string, as the former may not be suitable for some elements whereas the latter allows them use their default display mode.

    The normal solution is to go to the next sibling until you find an element.
    Because there may not be a next sibling, you check if something actually exists, then you check if its nodeType is of an element.

    nodeType 1 is an element and nodeType 3 is a text node.

    Code javascript:
    function openFull(el) {
        el = el.nextSibling;
        while (el && el.nodeType !== 1) {
            el = el.nextSibling;
        }
        el.style.display = (el.style.display=='none') ? '' : 'none';
    }

    In my own code I prefer to declare the Node object (for browsers that don't support it)
    so that I can then use el.nodeType !== Node.ELEMENT_NODE
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Addict
    Join Date
    Jun 2008
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi,

    I have used this code
    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JavaScript Content Viewer</title>
    <style type="text/css">
        body {font-size:14px;line-height:18px;}
        h2 {cursor:pointer;font-size:16px;font-family:Trebuchet MS;margin-left:10px;line-height:10px;}
        div.block {margin-left:30px;}
        li {margin-top:2px;font-family:Trebuchet MS;}
    </style>
    
    </head>
    
    <body>
    <script type="text/javascript">
        function openFull(el){
           el.nextSibling.style.display=='none'?el.nextSibling.style.display='block':el.nextSibling.style.display='none'
        }
    </script>
    <div>
    <h2 onclick="openFull(this)">Click here</h2><div class="block">
        <h3>Supported browsers</h3>
        </div>
    </div>
    </body>
    </html>
    When the page is opened <h3>Supported browsers</h3> should not be seen. on clicking the 'Click here' the suppported browser should be seen

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Most browsers include the whitespace as a part of the DOM, whereas Internet Explorer ignores all of the whitespace.

    You should not have to fiddle around with the whitespacing in html code for it to work properly.

    Here is the html that we're going to work with.

    Code javascript:
    <h2 onclick="openFull(this)">Click here</h2>
    <div class="block">
        <h3>Supported browsers</h3>
    </div>

    Most web browsers see the above as the following structure

    • h2
      * #text
    • newline
    • div
      * newline + tab
      * h3
      * newline


    Whereas Internet Explorer just sees this

    • h2
      * #text
    • div
      * h3


    Here is the code that we're going to be working with.

    Code javascript:
    function openFull(el){
        el.nextSibling.style.display=='none'?el.nextSibling.style.display='block':el.nextSibling.style.display='none'
    }

    Instead of using el.nextSibling all the time, you can change el to be el.nextSibling, then just work with that node itself. I'll also end the statement with a semicolon. When they're not there the interpreter will insert semicolons for you when it interprets the code. It's okay for IDEs to do that, but not for interpreters.

    Code javascript:
    function openFull(el){
        el = el.nextSibling;
        el.style.display=='none' ? el.style.display='block' : el.style.display='none';
    }

    When you set the style to block display, thre are some situations where this won't work, so a more stable solution is to set the display to an empty string. This allows the element to revert back to its default display, whether that be inline or block or something else more esoteric.

    Code javascript:
    function openFull(el){
        el = el.nextSibling;
        el.style.display=='none' ? el.style.display='' : el.style.display='none';
    }

    Now we can more effectively take care of cross-browser issues.

    Because the different browsers have a different representation of the DOM, a bit of forethought helps. The h2, h3 and div elements are a different type of node from text or whitespace nodes. The elements have a nodeType value of 1, while the text and whitespace nodes have a nodeType of 3.

    So, if you want the next element, get it, and check if it's an element node (value 1). If it's not then keep getting nodes until you find the element node.

    Code javascript:
    function openFull(el){
        el = el.nextSibling;
        while (el.nodeType !== 1) {
            el = el.nextSibling;
        }
        el.style.display=='none' ? el.style.display='' : el.style.display='none';
    }

    And finally, if there is no next element then you won't have any kind of node in the el variable, and javascript will throw an error. To avoid this you should check if the element actually exists before working with it. This applies to the while loop and after the loop has finished too.

    Code javascript:
    function openFull(el){
        el = el.nextSibling;
        while (el && el.nodeType !== 1) {
            el = el.nextSibling;
        }
        if (!el) {
            return;
        }
        el.style.display=='none' ? el.style.display='' : el.style.display='none';
    }

    You don't have to apply all of the above techniques, but this post should help to explain the reasons why certain things are advised to be done.
    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
  •