Question

I need to show COMPLETELY different content when JavaScript is disabled. I know I can use <noscript> tag… but how can I hide the rest of the page when JavaScript is disabled?

Thanks.

Answer 1

here is another solution:

inside your head below your normal stylesheet have:

<link rel="stylesheet" href="jsdisabled.css" />
<script type="text/javascript">
    document.write('<link rel="stylesheet" href="jsenabled.css" />');
</script>

that jsenabled.css would have:

#content { display:block; }

while jsdisabled.css would have:

#content { display:none; }

although the solution below works it does not validate

inside your noscript tag you can put some style tag that hides the rest of your content

ie:

<noscript>
    <style type="text/css">
        #content { display:none; }
    </style>
    no js content goes here.
</noscript>

<div id="content">
    content here.
</div>

I like using this method because it doesn’t make the page flash when javascript is enabled.