ansaurus

Question

How can I show different content when JavaScript is disabled?

Answer 1

+2 A:

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

SLaks 2010-02-10 01:19:00

Answer 2

+9 A:

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.

John Boker 2010-02-10 01:20:04

The problem with this method is your pages won't validate. `style` is not a valid element inside a `noscript` tag.

Doug Neiner 2010-02-10 02:41:33

It however wonderfully works in all browsers from IE6 and up, including the oh so w3 strict Opera. I have also used it several times.

BalusC 2010-02-10 18:11:39

Answer 3

A:

Any content which needs to be shown only with Javascript can by default set display:none and the content which needs to be shown if no javascript is there, can be set to display:block or whatever.

Then, in you javascript code, you could just go through the DOM toggling every element's display.

Moron 2010-02-10 01:21:14

Answer 4

+3 A:

Use meta tags to redirect to a different page.

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

Teja Kantamneni 2010-02-10 01:21:52

Answer 5

A:

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.

Geri Langlois 2010-02-10 01:25:31

Answer 6

A:

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.

Hoque 2010-02-10 01:35:42

Answer 7

+1 A:

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 }

Doug Neiner 2010-02-10 02:40:42

i agree that this would be a more valid way to do it. this is what i used to do, but the higher-ups don't like when the page is blank then appears when the javascript loads.

John Boker 2010-02-10 14:45:47

@John, this doesn't have that problem. It is set to visible prior to the page displaying. Seriously, it works like a charm and you never see the non-javascript content. The line that adds the class runs before the CSS loads. And the CSS loads before the page displays. The result is not delayed, and the change is instant.

Doug Neiner 2010-02-10 15:18:49

maybe i was doing something wrong a couple hears ago when this was implemented. I've changed my answer a little, still leaving in the invalid code but noting it and adding a different solution.

John Boker 2010-02-10 18:08:03

ansaurus

tags:

views:

answers:

How can I show different content when JavaScript is disabled?

related questions