PLBS
asked on
Hiding DIVs using window.onload
I am about to build a page containing a complex custom JavaScript slideshow. I have a couple critical questions before I begin:
1) For very specific reasons, I want to put each photo in its own DIV container, and execute the slideshow by changing the "display" value of the DIVs. To accommodate non-JavaScript-enabled visitors, I figured I would have the page load with all the DIVs displaying, then set display: none via JavaScript window.onload for all the DIVs except the first one in the slideshow. So... as long as I have that "hiding" code executing first in the onload event, will the DIVs that are going to be hidden start off briefly visible JavaScript enabled users? In other words, there won't be a brief flicker of all the DIVs showing before they're hidden, right? I always assumed the onload event executed after the page was loaded into memory but before it was rendered on the screen. Would it be better to put a script tag inline after each DIV that will set display: none, or is using the onload event a better way?
2) I'm going to use neondragon's reflection script to place a reflection below each photo (that is the reason I'm resorting to rotating images via DIV visibility rather than img src.) That script works great, but it takes a second or so to calculate and render the reflection of an image. I'm assuming that, even though all but one DIV will be hidden, if I execute the reflection script on the hidden images it will still create the reflection so that, when the DIV is made visible, the reflection will already be created. Is this correct? The reflection script executes onload and builds a reflection for every image with class="reflect" so I assume it will still build the reflection even within an "invisible" DIV. Am I right about this?
Thanks!!!!
1) For very specific reasons, I want to put each photo in its own DIV container, and execute the slideshow by changing the "display" value of the DIVs. To accommodate non-JavaScript-enabled visitors, I figured I would have the page load with all the DIVs displaying, then set display: none via JavaScript window.onload for all the DIVs except the first one in the slideshow. So... as long as I have that "hiding" code executing first in the onload event, will the DIVs that are going to be hidden start off briefly visible JavaScript enabled users? In other words, there won't be a brief flicker of all the DIVs showing before they're hidden, right? I always assumed the onload event executed after the page was loaded into memory but before it was rendered on the screen. Would it be better to put a script tag inline after each DIV that will set display: none, or is using the onload event a better way?
2) I'm going to use neondragon's reflection script to place a reflection below each photo (that is the reason I'm resorting to rotating images via DIV visibility rather than img src.) That script works great, but it takes a second or so to calculate and render the reflection of an image. I'm assuming that, even though all but one DIV will be hidden, if I execute the reflection script on the hidden images it will still create the reflection so that, when the DIV is made visible, the reflection will already be created. Is this correct? The reflection script executes onload and builds a reflection for every image with class="reflect" so I assume it will still build the reflection even within an "invisible" DIV. Am I right about this?
Thanks!!!!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
1) Putting one <script> element after the <div>s would be an acceptable solution. Some of us prefer to keep all <script> elements in the <head> though.
It comes down to the principal of the separation of content/structure from presentation (e.g. CSS) and behavior (e.g. JavaScript).
2) None come to mind.
It comes down to the principal of the separation of content/structure from presentation (e.g. CSS) and behavior (e.g. JavaScript).
2) None come to mind.
ASKER
2) I do know of one issue with using display: none, which is the browser inconsistencies when it comes to making them visible again. Are there other issues around display:none?