Hide and Show div on page load

JavaScript
1

I am trying to use javascript to hide a div before the page loads. Unfortunately for a brief second I can see the div on the page before the java script hide it. Is there anyway to set the javascript to hide the div before the page completely loads?

My code is posted below:


  <script type="text/javascript" src="prototype.lite.js"></script>
  <script type="text/javascript" src="moo.fx.js"></script>
  <script type="text/javascript" src="moo.fx.pack.js"></script>
  <script type="text/javascript">
 			    var forgotpass = document.getElementsByClassName('forgotpass');
 			    window.onload = function() {
 			forgotpass = new fx.Combo('forgotpass', {height: true, opacity: true, duration: 500});
 			
 			// Hide Div
 			forgotpass.hide();
 			
 		}
 </script>

P.S. I’m using the hide function within the moo.fx.js file found @ http://moofx.mad4milk.net/. If there is an easier way to di by just write the javascript out in the onload function please let me know.

thanks

2

Javascript can’t hide anything on the page until after the page finishes loading as it has no access to the DOM until then. The only way to hide anything before that is to set it to be hidden via the CSS in the first place.

3

Have you ever considered giving the divider that you’d like to hide a class of, for example, “hidden”, and removing that class when you’d like the element to appear? The relevant CSS would be:


.hidden{ display: none; }

When you want the element to reappear, assuming that’s the case, just remove it’s class. Otherwise, I can’t think of anything that would work before the JavaScript has loaded, aside from creating and appending the element with JavaScript and the DOM. An example, note the option to switch between ratings:

http://www.davidsissitka.com/experiment/

Hope it helps. :slight_smile:

4

Setting the display to none is the best alternative if you dont want to see it appear momentarily.