tricky div hiding issue
I have a div that I set its display to 'none' and becomes visible (on invisible again) when users click on a span that triggers a js function that switches display from 'none' to 'block' and vise versa.
What I did is I changed the display to 'block' as default, and added a js function that changes display to 'none' as soon as the page loads (using the onload command in the <body> tag).
The only problem that I have with this method is that the div does show up and only disappears once the page finishes loading. I want it to be completely unnoticeable until the user invokes the function that makes it visible.
Can anyone think of a way to do it?
You could put the div that you hide within a noscript tag.
using either document.write or document.createElement('link'). The stylesheet will download and be in effect when the body renders.
That will still trigger the flicker issue though, since you are changing something after the DOM is loaded.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
var targ= document.getElementById('thelist');
if(targ.className== 'hidelistClass') targ.className='';
else targ.className= 'hidelistClass';
<h1 id="p_opts">Dom test <button id="showlist">List</button></h1>
<ul id="thelist" class="hidelistClass">
<li>First list item</li>
<li>Second list item</li>
The script can be loaded via a src attribute, the style can be a dom created link element with a href to a style sheet url.
The script is evaluated before the body starts to render, and any links to stylesheets download before the rendering continues.
But then again, why not just use the noscript tag?