CODEWITHSUNDEEP
javascriptjquery
Michael
Michael

Reputation: 552

Display "Enable JavaScript" message only when JavaScript is disabled

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?

Upvotes: 5

Views: 12857

Answers (6)

user3738184
user3738184

Reputation: 7

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.

Upvotes: -1

Mansour
Mansour

Reputation: 1810

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>

Upvotes: 3

K232
K232

Reputation: 1069

See 1 Way To Avoid the Flash of Unstyled Content

Upvotes: -1

Hussein
Hussein

Reputation: 42818

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; }");

Upvotes: 0

DA.
DA.

Reputation: 40671

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.

Upvotes: -3

SLaks
SLaks

Reputation: 887453

You're looking for the <noscript> tag.

Upvotes: 15

Related Questions