Hidden Divs Show During Page Load

[Nathan]

So I'm extremely new to jquery/javascript.  I know other languages, but for some reason I just cannot seem to wrap my head around javascript.  It's finally starting to get easier so I used it a bunch on one of my new pages.  Turns out the hidden divs I was hiding would show for a split second during the page load.  When you have a bunch on one page this looks bad.  Figured out I needed them hidden by default, not after the page loaded.

 

My fix was to use css to not display the div until clicked.  To do this add the following css to the div:

 

display: none;

 

[enim]

If you are using a jquery script, you should also double check the way you are using document ready.  I had an issue with this a long while ago, and fixed it through some careful re-crafting of the package's load script.

[devilishomar]

As enim mentioned, you can never go wrong with jQuery. It's amazing how it makes your life so much easier.
You could add some lines to hide the div in the $(document).ready function in your script 'like a fade out statement to make it more elegant if it works with the website'.
If you want to do it with CSS, try the 'visibility: hidden' property. That should work with what you're trying to do.

[OhioTom76]

I'm not terribly familiar with Javascript and JQuery, but I am learning it a bit as well as I've been dipping in Adobe Edge Animate - which uses them a lot. From what I've gathered so far, there are certain "events" you can tie JQuery/Javascript actions to. A couple of them are CreationComplete and Composition Ready. I forget right now which is which, but one of them basically refers to when all the HTML has finished loading on the users end, and the other is when the page and all of it's additional assets have been loaded on the users computer. The difference being, one of them will execute when the HTML is done but before the additional images, external CSS and external Javascript files have loaded. 

 

Sometimes you need to put stuff at the very end, after everything else has completely loaded, which will result in a brief flicker before your stuff is executed. I don't know of any workarounds for this, when you need to make your actions be performed dead last, but would love to know if there are any.