Stack Overflow works best with JavaScript enabled banner

Posted by carpenter on Stack Overflow See other posts from Stack Overflow or by carpenter
Published on 2010-06-12T13:25:19Z Indexed on 2010/06/12 13:32 UTC
Read the original article Hit count: 327

Filed under:
|

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?

© Stack Overflow or respective owner

Related posts about ASP.NET

Related posts about JavaScript