Click here to Skip to main content
15,867,453 members
Articles / Web Development / HTML
Tip/Trick

Let your users know when Javascript is not enabled

Rate me:
Please Sign up or sign in to vote.
5.00/5 (5 votes)
3 Mar 2014CPOL2 min read 18.8K   9   11
Does your website need JavaScript to look its best? You can warn users with a very simple JS/CSS trick.

I am redesigning my company's website, and have started using more and more AJAX. Because this relies on JavaScript, and because we cannot depend on our users to have JS enabled on their browsers, I wanted a quick and simple way to warn users when their experience was sub-optimal. This is what I did.

1. The message

First is the message that will be displayed if JS is not enabled. Put this where it will be most visible, such as the top of the page.

HTML
<div class="javascriptNotEnabled">
    Your browser does not appear to have JavasScript enabled. Please be advised that some 
    functionality may be missing as a result.
</div>

2. The script

Second, we need to test whether or not JS is enabled. This is done, not surprisingly, by trying to run a script. This simple one-liner adds an attribute to the page's html tag; because it is run after the page has been loaded into the browser, it will not interfere with standards validation even though the tag being added is non-standard.

JavaScript
document.documentElement.setAttribute('js-enabled', '1');

3. The style

Lastly, we add two pieces of code to the page's style. The first tells the browser how to render the message div. If JS is enabled -- that is to say, if the html tag has our attribute -- the second style uses an attribute selector to instruct the browser not to render it at all.

CSS
div.javascriptNotEnabled {
    border: solid 1px #CCCCCC;
    background-color:#EEEE99;
    padding:1em;
    margin:0 auto 1em auto;
}
html[js-enabled='1'] div.javascriptNotEnabled {
    display:none;
}

That is to say, the first style is always applied, but if the html tag has an attribute js-enabled, and the attribute has a value of '1', then do not display any divs with a class of javascriptNotEnabled. Thus, the message is hidden when JavaScript is enabled and visible only when it is not.

How can you test that everything meets expectations? Simply change the second style block to test for js-enabled='0'. Since the attribute will be set to '1', the test fails and the div will not be hidden. That will probably be easier than trying to set up a browser with JavaScript disabled.

For my needs, I have added the message at the top of the main master page, with the JS and CSS in the global .js and .css file used across the site. This ends up putting the message on pretty much every page: a not-so-subtle reminder to our users that they are seeing a crippled version of the site. We can do this because our site is available only to our field reps; if this were a public site, we might show this more sparingly, such as just on the home page or as a note in the page footer. Since this uses a class rather than an ID, I could also put the same or different warning in several locations.

So, there you are: a quick, light weight method to warn your users that they will not have an optimal experience on your web site. If you come up with any interesting uses for this trick, please share it in the comments.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
United States United States
Gregory Gadow recently graduated from Central Washington University with a B.S. that combined economics and statistical analysis, and currently works for the Washington Department of Fish & Wildlife as an IT developer. He has been writing code for 30 years in more than a dozen programming languages, including Visual Basic, VB.Net, C++, C#, ASP, HTML, XML, SQL, and R.

Comments and Discussions

 
Questionwhy not just Pin
HaBiX3-Mar-14 11:40
HaBiX3-Mar-14 11:40 
AnswerRe: why not just Pin
Florian Rappl3-Mar-14 11:52
professionalFlorian Rappl3-Mar-14 11:52 
AnswerRe: why not just Pin
Gregory Gadow3-Mar-14 12:06
Gregory Gadow3-Mar-14 12:06 
GeneralRe: why not just Pin
HaBiX3-Mar-14 12:10
HaBiX3-Mar-14 12:10 
GeneralRe: why not just Pin
HaBiX3-Mar-14 23:34
HaBiX3-Mar-14 23:34 
QuestionRe: why not just Pin
VICK3-Mar-14 18:37
professional VICK3-Mar-14 18:37 
AnswerRe: why not just Pin
HaBiX3-Mar-14 23:26
HaBiX3-Mar-14 23:26 
QuestionRe: why not just Pin
VICK4-Mar-14 0:46
professional VICK4-Mar-14 0:46 
AnswerRe: why not just Pin
HaBiX4-Mar-14 0:55
HaBiX4-Mar-14 0:55 
GeneralRe: why not just Pin
VICK4-Mar-14 1:00
professional VICK4-Mar-14 1:00 
GeneralRe: why not just Pin
Gregory Gadow4-Mar-14 2:16
Gregory Gadow4-Mar-14 2:16 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.