Click here to Skip to main content
11,641,971 members (63,591 online)
Click here to Skip to main content

Let your users know when Javascript is not enabled

, 3 Mar 2014 CPOL 7.1K 9
Rate this:
Please Sign up or sign in to vote.
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.

<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.

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.

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)

Share

About the Author

Gregory Gadow
Software Developer (Senior)
United States United States
Gregory Gadow lives in Seattle, Washington and has been writing code for almost 25 years in more than a dozen programming languages. He works for a mid-size brokerage firm and holds the Series 7 and Series 66 brokerage licenses, but much prefers working as the company's programming department doing VB6, VB.Net, ASP, HTML, XML and SQL.

You may also be interested in...

Comments and Discussions

 
Questionwhy not just Pin
HaBiX3-Mar-14 11:40
memberHaBiX3-Mar-14 11:40 
AnswerRe: why not just Pin
Florian Rappl3-Mar-14 11:52
mvpFlorian Rappl3-Mar-14 11:52 
AnswerRe: why not just Pin
Gregory.Gadow3-Mar-14 12:06
memberGregory.Gadow3-Mar-14 12:06 
GeneralRe: why not just Pin
HaBiX3-Mar-14 12:10
memberHaBiX3-Mar-14 12:10 
GeneralRe: why not just Pin
HaBiX3-Mar-14 23:34
memberHaBiX3-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
memberHaBiX3-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
memberHaBiX4-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
memberGregory.Gadow4-Mar-14 2:16 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150731.1 | Last Updated 3 Mar 2014
Article Copyright 2014 by Gregory Gadow
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid