One of the problems with JavaScript is you can’t say if the user has it on or off. To make your code truly accessible personally I think chucking a ‘JavaScript isn’t enabled update your life’ message using the html tag noscript simply doesn’t cut it. I don’t like the notion of having a lesser experience just because you’ve not got a scripting language turned on where you may have a good reason to have it off. Enter then the friendly way of showing alternative content if JavaScript isn’t enabled. For this we’re going to use JQuery as our libary to make use of the addClass and removeClass functions. You can of course adapt this method to suit other libaries or pure JavaScript the principles are just the same.
Setting the foundations: Creating some css classes and elements
First off, we want to set up a 2 styles – 1 for hiding an element and 1 for our noscript alternative. We could use display:none but setting it as a style gives us more flexibility.
.hide{ display: none; } #noScript{ background-color: #eeeeee; padding: 10px; border: 2px solid #cccccc; }
I’ve given the noscript element a bit of styling you can of course change this to suit your requirements. As this is a test example I’m going to put everything directly into one page – you should of course have seperate stylesheets and javscript files if using in an actual project. Lets create those css elements now in html.
<div id="noScript">Content when JavaScript isn't enabled</div> <div id="showScript" class="hide">Content when JavaScript is enabled</div>
As you can see we’ve got a few more things to note here. We’re using ids to uniquely identify these elements. I’ve not set a style for showScript but you can easily or just have it as an empty style simply to be used as a container to show the content if JavaScript is enabled. Note also I’ve added the hide class to the showScript, this ensures to start off you are hiding this element. This is important as the JavaScript will be switching the elements therefore we want by default to show the noScript and hide showScript.
We should now have the basic foundations in our code to move onto adding the JavaScript.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>untitled</title> <style type="text/css"> .hide{ display: none; } #noScript{ background-color: #eeeeee; padding: 10px; border: 2px solid #cccccc; } </style> </head> <body> <div id="noScript">Content when JavaScript isn't enabled</div> <div id="showScript" class="hide">Content when JavaScript is enabled</div> </body> </html>
Adding the JavaScript
Now we can get down to adding the JavaScript and last element of this technique.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function($){ $('#noScript').addClass('hide'); $('#showScript').removeClass('hide'); }); </script>
I’ve linked to google’s jQuery here for this example however of course you can locally link to JQuery. As you can see we’ve got 2 things going on here. As the page loads we add the class hide to noScript and remove the class hide from showScript. This will simply make the content in showScript now visible.
We should now have the basic framework to show and hide different content depending on whether JavaScript is enabled or not.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>untitled</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function($){ $('#noScript').addClass('hide'); $('#showScript').removeClass('hide'); }); </script> <style type="text/css"> .hide{ display: none; } #noScript{ background-color: #eeeeee; padding: 10px; border: 2px solid #cccccc; } </style> </head> <body> <div id="noScript">Content when JavaScript isn't enabled</div> <div id="showScript" class="hide">Content when JavaScript is enabled</div> </body> </html>
Why not use noscript?
The main reason to not use noscript is that using this method we can offer actual alternative functions rather than just saying ‘Please turn on JavaScript’. We can literally put anything in the div noScript. Going this route we can make sure there isn’t just a blank page and some of the functionality is still there that we are delivering via JavaScript such as maybe showing a database result rather than a slideshow of posts in WordPress.
I am aware there may be arguments about doing anything intensive in a hidden div if JavaScript is on for that you’d want to take a more advanced approach involving either variable passing by sessions or other methods – I’m keeping it simple here though as this is about simplicity and working for most cases.
There is a html link for the demo try turning javascript on and off to see what happens. You can also download and use the code as you want. Click to view demo
So there you have it, why use boring noscript messages? Why not liven up your site but actually offering a decent JavaScript off option?
I don’t understand your explanation of why not use the noscript tag. That’s what it was designed for. According to the W3C spec: “The NOSCRIPT element allows authors to provide alternate content when a script is not executed.”
It’s not designed to be just a holder for a turn on javascript message.
You CAN put “literally anything” within in a noscript tag, can you not?
The noscript tag works great for html however you can’t directly put php or other scripting in it. Try using for instance echo “a value”; in a noscript tag. With this method you are able to put php in the bit to show when javascript isn’t enabled. There are various convoluted methods you can get php or other scripting working in noscript but they either are around the houses or result in code not validating. This method is both a simple method and allows validation.
I didn’t realize server side scripting won’t work within the noscript tag (and didn’t catch on to that point in your post). Thanks for the explanation.
This page explains the limitations of noscript:
http://dev.opera.com/articles/view/replacing-noscript-with-accessible-un/