Results 1 to 8 of 8
  1. #1
    Join Date
    May 2009
    Posts
    99

    Question body onload = hide div, but div shows before being hidden - ???

    I know how to use javascript in combination with the body onload event to hide a <div> when the page loads.

    But something I have not found the answer to is this - how do I get the <div> not to show at all when the page loads? The onload event executes to hide the <div>, but its after the <div> has already shown on the page for a brief second.

    Here is some example code I use for testing ---
    Code:
    <script type="text/javascript">
    
    //  tried this in place of the onload event in the <body> tag
    //  document.onload = hideDiv; 
    
    // also tried this 
    // window.onload = hideDiv;
    
        function hideDiv() {
          document.getElementById("testdiv").style.display = 'none';    
        }  
    </script>
    </head>             
    <body onload="hideDiv()">
    <div id="testdiv">
      <table bgcolor="#FFFFCC">
        <tr> 
         <td>
          Some Text
         </td>
        </tr>
       </table>
    </div>
    </body>

  2. #2
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,222
    My first thought is that if you want the div hidden when the page loads, just make it hidden in your CSS

    But, assuming you're hiding this with JavaScript because you specifically want it to be present if JS is disabled, the best way to do it is probably not onload.

    Code:
    <body onload="hideDiv()">
    <div id="testdiv">
      <table bgcolor="#FFFFCC">
        <tr> 
         <td>
          Some Text
         </td>
        </tr>
       </table>
    </div>
    <script type="text/javascript">document.getElementById("testdiv").style.display = 'none';</script>
    </body>
    The box will be hidden the instant the browser renders it, and it will never be seen. And yes, this is a perfectly valid maneuver, though you may want to wrap your script in a CDATA declaration - http://en.wikipedia.org/wiki/CDATA (there's a nice example of using this with JS there)
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

  3. #3
    Join Date
    May 2009
    Posts
    99

    Thumbs up Question answered - thank you!

    Thank you so much! That worked perfectly. Now I have some major updates to make to my web pages ;-)

  4. #4
    Join Date
    Jul 2009
    Location
    UK
    Posts
    1,305
    OR! in your style just change the visibility to hidden by default?

    <style>
    visibility:hidden;
    </stylle>

    Also maybe change your JS to allow for other browsers?

    Code:
    <script language=javascript type='text/javascript'>
    
    function hidediv() {
    if (document.getElementById) { // DOM3 = IE5, NS6
    document.getElementById('DIVIDNAME').style.visibility = 'hidden';
    }else {
    if (document.layers) { // Netscape 4
    document.DIVIDNAME.visibility = 'hidden';
    }else { // IE 4
    document.all.DIVIDNAME.style.visibility = 'hidden';
    }}}
    function showdiv() {
    if (document.getElementById) { // DOM3 = IE5, NS6
    document.getElementById('DIVIDNAME').style.visibility = 'visible';
    }else {
    if (document.layers) { // Netscape 4
    document.DIVIDNAME.visibility = 'visible';
    }else { // IE 4
    document.all.DIVIDNAME.style.visibility = 'visible';
    }}}
    </script>
    then just call showdiv() or hidediv()

    As your div already has a visiblility of hidden, it wont show until showdiv is sent.
    Live Chat Support Software for your Business website - IMsupporting.com

  5. #5
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,222
    Quote Originally Posted by lynxus View Post
    OR! in your style just change the visibility to hidden by default?

    <style>
    visibility:hidden;
    </stylle>
    If you do that, you'll want to set position:absolute too, which takes the box out of the flow of the site. Otherwise, you'll end up with a big space on the screen where the invisible element resides.

    Also, when you call it back onto the page using JS, you'll have to set the position style to static as well as visibility to visible.

    That route will work, but it's more cumbersome
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

  6. #6
    Join Date
    Jul 2009
    Location
    UK
    Posts
    1,305
    Quote Originally Posted by the_pm View Post
    If you do that, you'll want to set position:absolute too, which takes the box out of the flow of the site. Otherwise, you'll end up with a big space on the screen where the invisible element resides.

    Also, when you call it back onto the page using JS, you'll have to set the position style to static as well as visibility to visible.

    That route will work, but it's more cumbersome

    I like making things harder for myself lol.

    Im gonna try it the way you guy have, See if i get the same results here and if it works. Ill probably change my way to yours
    Live Chat Support Software for your Business website - IMsupporting.com

  7. #7
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,222
    Quote Originally Posted by lynxus View Post
    I like making things harder for myself lol.

    Im gonna try it the way you guy have, See if i get the same results here and if it works. Ill probably change my way to yours
    The deal with setting it in the CSS document instead of doing it *all* as a JS function is that it will not degrade gracefully in browsers/devices that have JS disabled or that do not support it in the first place. Hence why you both hide it and display it using either JS (if it's a critical element) or just CSS, but rarely a mix of both JS and CSS
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

  8. #8
    Join Date
    May 2009
    Posts
    99
    I have JavaScript code in use throughout my site. I tested out
    Code:
    div.mydivsetting  { 
    visibility:hidden;
    position:absolute;
    }
    and put that into an external css stylesheet. It works well. Then I just use javascript to show the div once its clicked. Question - is it possible to use css, instead of javascript, to show the div once its clicked??

  9. Newsletters

    Subscribe Now & Get The WHT Quick Start Guide!

Similar Threads

  1. Div on right wont extend as div on left
    By mystycs in forum Web Design and Content
    Replies: 18
    Last Post: 04-08-2010, 10:45 AM
  2. Centering a div tag within another centred div?
    By sabian1982 in forum Web Design and Content
    Replies: 7
    Last Post: 09-21-2006, 01:05 AM
  3. Can't wrap a DIV around 2 floating div
    By grabmail in forum Programming Discussion
    Replies: 1
    Last Post: 05-20-2006, 01:40 PM
  4. Replies: 1
    Last Post: 09-11-2005, 08:08 PM
  5. CSS/DIV bug in iExplorer with small height div?
    By fischermx in forum Web Design and Content
    Replies: 5
    Last Post: 04-02-2004, 06:36 PM

Posting Permissions

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