Menu
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.
516
I would not use noscript to show alternate content. For one, only a limited number of tags are valid in a <noscript> tag, and <style> is not one of them. Instead, take a different approach. Have your content when javascript is disabled visible by default, and show alternate content when JavaScript is enabled. The best way to do this is with simple CSS and one line of JS. If you do it as I show here, there should not be an awkward flash of content:
<head>
...
<script type="text/javascript"> document.documentElement.className += " js"</script>
<link type="text/css" href="css/style.css" media="all" rel="stylesheet" />
</head>
<body>
<div id="header" class="no_js">header</div>
<div id="alt_header" class="js">header</div>
.. etc ..
<div id="super_duper" class="js">Whatever</div>
</body>
Just apply js to everything that should show when JavaScript is enabled, and no_js to everything else. Then in your CSS put this:
html.js .no_js, html .js { display: none }
html.js .js { display: block }
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.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
