How can I show different content when JavaScript is disabled? [duplicate]

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.

Answers:

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.

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 }

Use meta tags to redirect to a different page.

<noscript> <meta http-equiv="refresh" content="2; URL=enable_javascript.php"> </noscript>

You could use Javascript to switch to a different page containing Javascript.

For example:

<script type="text/javascript">
    location = "JSEnabled.html";
</script>

Non-javascript content goes here

All the above are fine, I believe. Just an alternative, you can try this,

<head>
<script type="text/javascript">
//if javascript enabled
window.onload=function(){
 document.getElementById('jsContentWrapper').style.display='block';
}
</script>
</head>
<body>
<div id='jsContentWrapper' style='display:none;'>
 ---
 --
 -
</div>
<noscript>
   Place your javascript disabled content here
</noscript>
</body>

Thanks.

Setup a div tag with the id of content. Add the content you want displayed when javascript is disabled. Use jquery $("#content ").load("content.html") to load content if javascript is enabled.

How can I show different content when JavaScript is disabled? [duplicate]

Answers:

Tags

Recent Questions

Top Questions