Display "Enable JavaScript" message only when JavaScript is disabled

Question

I want to display to the user a message that says "please enable JavaScript" in the case that JavaScript is disabled. I want that message, and nothing else to be displayed when JavaScript is disabled.

So, to do this, I can put the message in the DOM and hide all other elements with display:none. Then in JavaScript I can set the message to display hidden and show all other elements.

But I get a flicker with this approach. The error message shows up for a while (especially on mobile browsers) before it gets hidden.

How can I minimize the time the error message is displayed for?

btw, the behavior you are seeing is often referred to as a flash of unstyled content -- "fouc" might help your googling — Michael Haren
– Michael Haren, Commented Mar 17, 2011 at 2:49

SLaks · Accepted Answer · 2011-03-17 02:46:20Z

15

You're looking for the <noscript> tag.

answered Mar 17, 2011 at 2:46

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

DA. Over a year ago

That's ideal, but won't solve the problem of the flicker on a Nokia phone.

DA. Over a year ago

I take that back...that could work. Error message in NOSCRIPT, then your main content in the hidden div that you then show via javascript. The flicker will be there from blank to content, but that's probably better than a flicker from error to content. (slow Nokia devices may still see the content flicker off, but if you make the NOSCRIPT area tall enough, that'd be off-screen)

Hussein Over a year ago

<noscript> should be avoided. The proper way to do it is to use display:none; display:block; as i stated in my answer. You have 123k reputation and recommending <noscript> ??

SLaks Over a year ago

@Hussein: This is how to prevent flicker. You could also hide the parent element right after it starts, before its content.

Zed Over a year ago

@Hussein: There is no need to be rude. First you say that @SLaks shouldn't recommend noscript because he has 123k reputation. Now you accuse me of "not getting" what you said above while in fact you didn't say anything to support your irrational fear of the noscript tag. These are not reasonable arguments. Just because there are other ways to emulate the behavior of some tag doesn't mean that it shouldn't be used. Judging from the votes on the answers the majority of people seem to agree. So does the W3C's HTML Working Group

|

Mansour · Accepted Answer · 2015-03-21 23:13:09Z

3

Inline javascript has to run before the rest of the document is loaded. You can use this behaviour to add style to the page to hide the desired element, before the element is loaded. This should theoretically stop FOUC across all and every browser (including mobile). Here's an example of a standalone HTML that shows a message to those with no javascript. This technique also takes care of what Hussein was mentioning about Firewalls blocking javascript:

<!doctype html>
<html>
<head>
<title>No FOUC</title>
<script type="text/javascript">
document.write('<style type="text/css">#no-js { display: none; }</style>');
</script>
</head>
<body>
<div id="no-js">You don't have javascript, BOOOO</div>
</body>
</html>

edited Mar 21, 2015 at 23:13

answered Dec 16, 2011 at 4:48

Mansour

1,8183 gold badges22 silver badges33 bronze badges

Comments

Hussein · Accepted Answer · 2011-03-17 04:41:47Z

0

You can do this. If JavaScript is disabled it will show the message "JavaScript Disabled"

 <p id="jsDisabled">JavaScript disabled.</p>

<script type="text/javascript">
    function hideScriptDisabled() {
        document.getElementById("jsDisabled").display = "none";
    }
    hideScriptDisabled();
    </script>

If that is creating a flickering problem, use something like this,

document.write(".jsDisabled { display: none; }");

edited Mar 17, 2011 at 4:41

answered Mar 17, 2011 at 2:49

Hussein

42.9k25 gold badges115 silver badges143 bronze badges

3 Comments

Zed Over a year ago

You have just reinvented <noscript>

Hussein Over a year ago

The noscript tag only detects whether the browser has JavaScript enabled or not. If JavaScript is disabled in the Firewall rather than in the browser then the JavaScript will not run and the content of the noscript tag will not be displayed. It's better to let javascript code overwrite with a javascript enabled page with simple display:block;, display:none;.

Fletch Over a year ago

Hussein's comment seems to be copied from javascript.about.com/od/reference/a/noscriptnomore.htm. Interestingly, if you check the meta tags you see that this article was once called "5 Remarkably Good Reasons to Avoid 'Noscript' and Use Java".

K232 · Accepted Answer · 2011-03-23 10:05:19Z

-1

See 1 Way To Avoid the Flash of Unstyled Content

answered Mar 23, 2011 at 10:05

K232

1,06914 silver badges37 bronze badges

Comments

user3738184 · Accepted Answer · 2017-09-15 07:35:36Z

-1

To avoid javascript disable problem.

before starting any writing on your webpage just put the below code.

You have to never ask any question to end user.

First try it.

edited Sep 15, 2017 at 7:35

answered Sep 15, 2017 at 6:51

user3738184

74 bronze badges

Comments

DA. · Accepted Answer · 2011-03-17 02:47:51Z

-3

You really can't. The flicker is just the way it is...especially on slow mobile devices (namely Nokia...OH HOW I HATE NOKIA!)

The only other option is to load a splash page first. In the HEAD add a meta refresh of several seconds that will refresh to a 'turn on javascript error'. On the BODY, add a javascript redirect that should trigger immediately.

You will still have a flash, and of course, one more page request to the server. But it may be a 'prettier' flash.

answered Mar 17, 2011 at 2:47

DA.

40.8k51 gold badges162 silver badges219 bronze badges

4 Comments

Rafael Herscovici Over a year ago

why the downvote ? really ? would you use the same method for your own site? when you clearly have better solution ( as shown above ).

DA. Over a year ago

Not sure what you feel is 'clearly better'. Noscript is fine at showing content to those without JS enabled, but does nothing to hide the rest of the content. So you have to hide it by default and then show it via JS, hence the flicker on slow connections/devices.

Rafael Herscovici Over a year ago

google.com/support/webmasters/bin/answer.py?answer=35769 "•Avoid hidden text or hidden links." you SHOULD NOT, display diffrent content. but a nice explanation why some things do not work, would be pretty nice.

DA. Over a year ago

I completely agree with you in that what the OP is asking for is not practical nor recommended. However, bosses are known to ask for things that are not practical nor recommended. :/

Collectives™ on Stack Overflow

Display "Enable JavaScript" message only when JavaScript is disabled

6 Answers 6

14 Comments

Comments

3 Comments

Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

14 Comments

Comments

3 Comments

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related