How to check for NoScript (browser plugin) and include bar at top of screen if NoScript is present?

Question

The NoScript browser plugin is getting increasingly popular. For those of us who run webpages which are heavily dependent on javascript, how can we check for presence of this plugin and alert the user with some sort of "always present" drop down bar at the top of the screen if so?

I actually just tried using NoScript on StackOverflow.com and saw that they do EXACTLY what I was thinking about! Is this just a simple browser check for javascript?

Answer 1

Using Answer from agam360 in case somebody searches for the NoScript plugin again as I did.

How to detect if JavaScript is disabled?

And most specifically, the answer by Hairbo which seems like the best solution as I see it for already developed websites which do not have an elegent degradation: https://stackoverflow.com/a/3926750/646456

Answer 2

Open the source of a Stack Overflow page and look around.

You see that they are using <noscript>-tags to add additional content when no JavaScript is available.

Answer 3

A simple manual implementation would be to do something like this:

HTML:

<div id="requireJS">This site requires JS!</div>

Script:

var warning = document.getElementById('requireJS');
warning.parentNode.removeChild(warning);

This'll show the warning when JS is disabled, and remove it when JS is enabled.

Note: I'm not saying it's better than <noscript>, just that it could also be done this way.

Answer 4

Actually I like the style approach so you can hide / unhide anything easily.

on default stylesheet :

.nojs { display:none;}

---

On layout html:

<noscript>
    <style> 
        .nojs { display:block }
        .container {display:none}
    </style>
</noscript>

<div class="container">
    this will show with js
</div>
<div class="nojs">
    this will show without js
</div>