How to detect if browser JavaScript is off and display a notice

Question

How to detect if browser JavaScript is off and display a notice

2.3k views Asked by erfaan At 28 February 2011 at 09:50

I need to check if browser JavaScript is off, then display a error div instead of the body, how can I do this?

There are 4 answers

Kieron On 28 February 2011 at 09:52

You'll need to do it the other way around - so to speak - you'll have to output everything, and then hide/ remove the error div using Javascript.

It's called Progressive Enhancement.

Vinze On 28 February 2011 at 09:53

in the body you can add :

<noscript>
      Here the html to display when javascript is off
</noscript>

johnhunter On 28 February 2011 at 10:18

@roryf's solution is a good approach, although it is dependent on jQuery, and if the domloaded event fires a little late you can get a 'flash' of the no-js content.

The following will remove the html.no-js class before the body has rendered:

<!DOCTYPE html>
<html class="no-js">
<head>
<script>

if (document.documentElement) {
    var cn = document.documentElement.className;
    document.documentElement.className = cn.replace(/no-js/,'');
}

</script>
</head>

**roryf** · Accepted Answer · 2011-02-28 09:53:18

<html class="no-js">
    <head>
    <style>        
        .error,
        .no-js #container {
            display: none;
        }

        .no-js .error {
            display: block;
        }
    </style>

    <script>
        document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/, '');
    </script>

    </head>
    <body>
        <div id="container">
            rest of page
        </div>
        <div class="error">
            sorry, no javascripty, no sitey!
        </div>
    </body>
</html>

Of course, this is usually a bad idea, but I hope you've already considered that.

TechQA.

How to detect if browser JavaScript is off and display a notice

There are 4 answers

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in HTML

Related Questions in NOSCRIPT

Popular Questions

Popular Tags

Trending Questions