I am trying to mimic this site's Javascipt required banner, and have the below divs which are being hidden if
javascript is allowed/enabled, but I am getting a flash/glimps of it on page load.
<div id="Main_noJS">Craftystuff.com works best with
JavaScript enabled</div>
<div id="PartOfMain_noJS"><br /></div>
CSS:
#Main_noJS {
width: 100%;
height: 23px;
font-family: Arial;
font-size: 111%;
color: White;
font-weight: bold;
background: #AE0000;
text-align: center;
padding-top: 4px;
position: fixed;
z-index: 100;
}
JavaScript:
// hide the "Craftystuff.com works best with
JavaScript enabled" banner, if
JavaScript is working
if ($("#Main_noJS")) {
$("#Main_noJS").hide();
// hide the spacer between the main content and banner...
$("#PartOfMain_noJS").hide();
}
So the banner is visible to start with, and only when
javascript is enabled do I hide it
but
javascript must take a second to get to work to hide things...
I would like to try to stop the glimps of the banner, when the page first loads, any help?
