5

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?

Michael
  • 552
  • 1
  • 6
  • 19
  • btw, the behavior you are seeing is often referred to as a [flash of unstyled content](http://en.wikipedia.org/wiki/Flash_of_unstyled_content) -- "fouc" might help your googling – Michael Haren Mar 17 '11 at 02:49

6 Answers6

15

You're looking for the <noscript> tag.

SLaks
  • 868,454
  • 176
  • 1,908
  • 1,964
  • That's ideal, but won't solve the problem of the flicker on a Nokia phone. – DA. Mar 17 '11 at 02:49
  • 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) – DA. Mar 17 '11 at 02:51
  • Try including ` – Raynos Mar 17 '11 at 02:54
  • 2
    ` – Hussein Mar 17 '11 at 03:15
  • 2
    @Hussein: This is how to prevent flicker. You could also hide the parent element right after it starts, before its content. – SLaks Mar 17 '11 at 03:19
  • If flickering is the issue, you can use `document.write(".js-hide { display: none; }");` and avoid ` – Hussein Mar 17 '11 at 03:26
  • @Hussein: Why do you want to avoid noscript so much? It's a standard tag that was invented exactly for cases like this. – Zed Mar 17 '11 at 03:38
  • The ` – Hussein Mar 17 '11 at 03:43
  • @Hussein: How exactly did the introduction of IE5 make this tag redundant? It is exactly as useful now as it was back then. It is even [standardized in HTML5](http://www.w3.org/TR/html5/scripting-1.html#the-noscript-element) so it is as modern as it gets. This is also the cleanest solution to the posted question and that is why I upvoted the answer by @SLaks. – Zed Mar 17 '11 at 03:51
  • @zed, use it if you want. The tag is still available. It's pointless answering further if you did not get what i said above. – Hussein Mar 17 '11 at 04:07
  • Google is your best friend, The web is full of such information. Here's a quick link about noscript. http://javascript.about.com/od/reference/a/noscript.htm – Hussein Mar 17 '11 at 04:11
  • 4
    @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](http://dev.w3.org/html5/spec/Overview.html#the-noscript-element) – Zed Mar 17 '11 at 04:27
  • @zed Like i said above feel free to use – Hussein Mar 17 '11 at 04:33
  • You can use a redirect page associated with the noscript tag : `` – eosphere Nov 13 '22 at 13:31
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>
Mansour
  • 1,787
  • 2
  • 20
  • 33
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; }");
Hussein
  • 42,480
  • 25
  • 113
  • 143
  • 3
    You have just reinvented ` – Zed Mar 17 '11 at 02:52
  • 5
    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;`. – Hussein Mar 17 '11 at 02:59
  • Hussein's comment seems to be copied from http://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". – Fletch Oct 15 '14 at 10:42
-1

To avoid javascript disable problem.

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

<!-- saved from url=(0014)about:internet-->

You have to never ask any question to end user.

First try it.

user3738184
  • 7
  • 4
-1

See 1 Way To Avoid the Flash of Unstyled Content

K232
  • 1,040
  • 14
  • 36
-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.

DA.
  • 39,848
  • 49
  • 150
  • 213
  • why the downvote ? really ? would you use the same method for your own site? when you clearly have better solution ( as shown above ). – Rafael Herscovici Sep 10 '11 at 16:44
  • 1
    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. – DA. Sep 10 '11 at 18:16
  • http://www.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. – Rafael Herscovici Sep 10 '11 at 18:19
  • 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. :/ – DA. Sep 10 '11 at 18:28