Show message if javascript disabled on client side using noscript tag

Question 1

Try This :-

How to detect JavaScript is disabled in browser?

As we know, tag is used for JavaScript. Same way there is tag which gets in action when the JavaScripts disabled in browser.

<script>Put Sample code here for execution when JavaScript is Active </script>
<noscript>Put Sample code here for execution when JavaScript is Disabled</noscript>

How to handle disabled JavaScript in browser?

When JavaScript is disabled, Just tried to redirect to some page where we can display the message that Javascript is disabled. There is meta tag in HTML named “meta refresh” which will redirect the user to another page in the interval specified in that header.

<noscript>
  <META HTTP-EQUIV="Refresh" CONTENT="0;URL=ShowErrorPage.html">
</noscript>

As, we can see above code inside noscript, there is “meta refresh” tag with interval of “0″ second. As, the JavaScript is disabled in that page, the browser gets redirected to “ShowErrorPage.html” to show some warning message.

I hope this will help you.

Question 2

You are right. The <noscript> tag is used to show only if JavaScript is disabled. In order to test this, do the following:

Save this snippet in a file "test.html".
Open it with your brower.
Enable/Disable JavaScript (In FireFox this is here: Tools/Options/Content/Enable JS).

As you can see, you can put any HTML inside the <noscript> tag that you would put inside the body of a page.

<html>
  <body>
    <h1>Simple Example Page</h1>
    <script type="text/javascript">
      document.write("Hi, JavaScript is enabled!");
    </script>
    <noscript>
      <div style="border: 1px solid purple; padding: 10px">
        <span style="color:red">JavaScript is not enabled!</span>
      </div>
    </noscript>
  </body>
</html>

Question 3

<noscript>
   <META HTTP-EQUIV="Refresh" CONTENT="0;URL=ShowErrorPage.html">
</noscript>

is not a good solution as IE11 (and previous) have a security option that when set to 'high' disables both Javascript and Meta Refresh Tags!

The best solution I have found to handle this case is :

<noscript class="noscript">
   <div id="div100">
   Please enable javascript in your browser .... blah blah
   </div>
</noscript>

<style>
   body{
      position:relative;
   }
   .noscript {
      width:100%;
      height:100%; /* will cover the text displayed when javascript is enabled*/
      z-index:100000; /* higher than other z-index */
      position:absolute;
   }
   .noscript #div100{
       display:block;
       height:100%;
       background-color:white; 
   }
</style>

Question 4

<noscript> is meant for this kind of thing, just as <script> is meant for JS. Be aware that using the meta tag refresh:

<noscript>
  <META HTTP-EQUIV="Refresh" CONTENT="0;URL=ShowErrorPage.html">
</noscript>

means that this is easily disabled in IE (IE10 at least) by increasing the Internet Options Security (which was probably used to disable the JS in the first place). The "allow META REFRESH" option is disabled when the security setting is increased.

Question 5

Place the 'does not support' message in a div and use JavaScript to hide the div when the page loads

Question 6

You can use the same method used by stackoverflow. See my jsfiddle link. When Javascript is disabled, within the first noscript block, just after the body tag, you go to add a padding-top to an empty child div, so you can add the content you want in your body, and then, in the end, another noscript block with a fixed position div inside, having the warning message you want. Try to run it, with and without javascript enabled. Let me know! :)

See the code here: https://jsfiddle.net/go60f00n/

<noscript>
         <div id='noscript_padding'></div>
      </noscript>
      <div>
         <p>Lorem ipsum dolor sit amet consectetuer tincidunt nunc ac faucibus mattis. Gravida tempus turpis Morbi vitae sed Suspendisse auctor dignissim nulla adipiscing. Adipiscing justo lacinia justo Vivamus Vestibulum amet ut Donec vitae aliquet. Orci tempus orci Donec nibh eget tellus pede semper adipiscing leo. A et id sagittis velit venenatis.</p>
         <p>Tellus ridiculus ipsum pretium condimentum Ut elit sed vitae amet In. Curabitur ipsum elit interdum tortor semper at dolor justo consequat leo. Id fermentum vitae tincidunt pretium lacus leo Cras urna risus urna. Pretium Vestibulum et euismod nec pede et tincidunt condimentum laoreet vel. Dolor vestibulum laoreet habitant a Nulla.</p>
         <p>Lobortis lobortis quis elit mollis quis risus Morbi in augue montes. Mauris ipsum libero tellus et Quisque id non justo nibh dui. Dui nisl at Fusce Curabitur interdum tincidunt sed Vestibulum platea justo. At ut ante eget ac sem sed nulla id nunc mus. Velit In faucibus a auctor Sed Morbi habitasse est urna natoque. </p>
      </div>
      <noscript>
         <div id='noscript_warning'>Please enable Javascript!</div>
      </noscript>

so the css code:

html, body {
            margin: 0;
            padding: 0;
            height: 100%;
         }

         p {
            margin: 0;
         }

         #noscript_padding {
            padding-top: 1.9em;
         }

         #noscript_warning {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 101;
            text-align: center;
            font-weight: bold;
            color: #FFF;
            background-color: #AE0000;
            padding: 5px 0 5px 0;
         }