Stack Overflow works best with JavaScript enabled banner

Question

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?

Answer 1

Hide it with CSS

display: none;

Answer 2

Put the banner in a a <noscript> tag, documented here.

<noscript>
   <div>yada yada yada</div>
</noscript>

Answer 3

You can simply write out a tag that hides the element while the page loads, then it won't be visible waiting for the script to run:

<script>document.write('<div style="display:none;">');</script>
<div id="Main_noJS">Craftystuff.com works best with JavaScript enabled</div>
<script>document.write('</div>');</script>

Answer 4

Thanks guys, tvanfosson's bit seems to have done the trick for me, any chance of getting an explanation to go with it though?

Am new to things and so sorry for replying here also.

Thanks again(for the link) tvanfosson...