hosted by liquidweb


Go Back   Web Hosting Talk : Web Hosting Main Forums : Web Design and Content : body onload = hide div, but div shows before being hidden - ???
Reply

Forum Jump

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

Reply Post New Thread In Web Design and Content Subscription
 
Send news tip View All Posts Thread Tools Search this Thread Display Modes
  #1  
Old 08-27-2010, 09:26 AM
JavaDziner JavaDziner is offline
Junior Guru Wannabe
 
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>



Sponsored Links
  #2  
Old 08-27-2010, 09:37 AM
the_pm the_pm is offline
Retired Moderator
 
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  
Old 08-27-2010, 10:08 AM
JavaDziner JavaDziner is offline
Junior Guru Wannabe
 
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 ;-)

Sponsored Links
  #4  
Old 08-27-2010, 10:12 AM
lynxus lynxus is offline
Lord of live chats
 
Join Date: Jul 2009
Location: UK
Posts: 1,286
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  
Old 08-27-2010, 10:15 AM
the_pm the_pm is offline
Retired Moderator
 
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  
Old 08-27-2010, 10:18 AM
lynxus lynxus is offline
Lord of live chats
 
Join Date: Jul 2009
Location: UK
Posts: 1,286
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  
Old 08-27-2010, 10:21 AM
the_pm the_pm is offline
Retired Moderator
 
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  
Old 08-30-2010, 11:24 AM
JavaDziner JavaDziner is offline
Junior Guru Wannabe
 
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??

Reply

Similar Threads
Thread Thread Starter Forum Replies Last Post
Div on right wont extend as div on left mystycs Web Design and Content 18 04-08-2010 10:45 AM
Centering a div tag within another centred div? sabian1982 Web Design and Content 7 09-21-2006 01:05 AM
Can't wrap a DIV around 2 floating div grabmail Programming Discussion 1 05-20-2006 01:40 PM
div, height:100%, overflow:hidden, firefox, random behaviour - help! zoldar Web Design and Content 1 09-11-2005 08:08 PM
CSS/DIV bug in iExplorer with small height div? fischermx Web Design and Content 5 04-02-2004 06:36 PM

Related posts from TheWhir.com
Title Type Date Posted
Tor Network Investigates Attack That May Have Unmasked Anonymous Users Web Hosting News 2014-07-31 13:36:13
The Cloud Revolution is Here, Where Can I Hide? Blog 2013-08-07 14:39:57
FBI Likely Behind New Malware That Attacks Tor Anonymity, say Researchers Web Hosting News 2013-08-06 12:02:14
Liquid Web Uses Google Street View in Data Center Scavenger Hunt Blog 2013-04-25 11:13:26
StopTheHacker Launches Version 3.7 of Website Security Tool Web Hosting News 2013-02-04 18:40:30


Tags
body onload, div not hiding, hide div, javascript onload

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes
Postbit Selector

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump
Login:
Log in with your username and password
Username:
Password:



Forgot Password?
Advertisement:
Web Hosting News:



 

X

Welcome to WebHostingTalk.com

Create your username to jump into the discussion!

WebHostingTalk.com is the largest, most influentual web hosting community on the Internet. Join us by filling in the form below.


(4 digit year)

Already a member?