[ACCEPTED]-How to wrap <noscript> tag to hide content when javascript disable-noscript

Accepted answer

Score: 61

An alternative to a JS approach as suggested 2 by rahul is to display a div in the <noscript> element, covering 1 the entire page:

<noscript>
    <div style="position: fixed; top: 0px; left: 0px; z-index: 30000000; 
                height: 100%; width: 100%; background-color: #FFFFFF">
        <p style="margin-left: 10px">JavaScript is not enabled.</p>
    </div>
</noscript>

Score: 25

Wrap all you contents inside a main div 2 with display none and in the onload function 1 change the display to block.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>
</head>
<body>
  <div id="divMain" style="display: none">
    This is content.
  </div>
<noscript>
  JS not enabled
</noscript>
<script>
  document.getElementById("divMain").style.display = "block";
</script>
</body>
</html>

Score: 6

The noscript tag works the other way around. To 3 make the content visible when script is 2 enabled, put it in an element that is hidden, and 1 show it using script:

<div id="hasScript" style="display:none">
This is content
</div>
<script>document.getElementById('hasScript').style.display='';</script>

Score: 5

It's a little odd.

You don't even need a 7 'noscript' for this. You can just have a 6 blank first page, who's only content is 5 a javascript of the form:

document.location = '/realpage.htm';

And then call that 4 OnLoad, with jQuery, or whatever. This will mean if 3 the client doesn't have scripting, they 2 don't go anywhere, hence the page remains 1 blank.

Edit:

Example, as requested:

<html>
<body onload="document.location = 'realpage.html';">
</body>
</html>

Score: 4

This SHOULD really work! hide a content when javascript 2 is not enabled Note: you can replace <noscript> with <noembed> or 1 <noframes>, too.

<!-- Normal page content should be here: -->
Content
<!-- Normal page content should be here: -->
<noscript>
<div style="position: absolute; right: 0; bottom: 0;
     display: none; visibility: hidden">
</noscript>
<-- Content that should hide begin -->
**Don't Show! Content**
<-- Content that should hide begin -->
<noscript>
</div>
</noscript>
<!-- Normal page content should be here: -->
Content
<!-- Normal page content should be here: -->

Score: 4

Both the style tag and the meta refresh DO work inside noscript:

<noscript>

<style>body { display:none; }</style>

<meta http-equiv="refresh" content="0; url=blankpage.html">

</noscript>

The first line will display the current 2 page but empty. The Second line will redirect 1 to blankpage.html

Score: 2

You could do something like

<body id="thebody">
  this is content.
  <script>
    document.getElementById('thebody').innerHTML = "<p>content when JS is enabled!</p>";
  </script>
</body>

Score: 2

I had a very problem:

I wanted to show the 20 full site when javascript was enabled. However, if 19 javascript were disabled, not only did I 18 want to show a "this site requires 17 javascript..." message, but I still 16 wanted to display the header & footer 15 (which reside in header.inc and footer.inc, called 14 by each content page) of my site (to look 13 nice). In other words, I only wanted to 12 replace the main content area of my site. Here's 11 my html/css solution:

Header.inc file (location 10 not important):

<noscript>
    <style>
        .hideNoJavascript {
            display: none;
        }  
        #noJavascriptWarning {
            display: block !important;
        }
    </style>
</noscript>

Header file (bottom):

<div id="noJavascriptWarning">The Ignite site requires Javascript to be enabled!</div>
<div class="container-fluid hideNoJavascript">
<!-- regular .php content here -->

CSS 9 file:

#noJavascriptWarning {
    color: #ed1c24;
    font-size: 3em; 
    display: none;  /* this attribute will be overridden as necessary in header.inc */
    text-align: center;
    max-width: 70%;
    margin: 100px auto; 
}

In summary, my "javascript required" message 8 is hidden per my default CSS rule. However, when 7 the browser parses the tag, it overrides 6 the default rule, resulting in main content 5 being hidden and (everything except header/footer) and 4 the javascript message being displayed. Works 3 perfectly...for my needs! Hopefully someone 2 else finds this useful :-)

Here are two screenshots 1 with javascript enabled/disabled:

Score: 0

I know this is an old inquire, but somehow 4 none of this things worked in one of the 3 PHP page I created. Below is what worked, the 2 important thing was the comment tag between 1 the noscript tag:

    <noscript>
    <center><div style="font-size:300%;position: absolute;top: 40%;left: 50%;margin-right: -50%;transform: translate(-50%, -50%)">
    Scripts are Required...
    <meta http-equiv='refresh' content="1;url=http://flstate.us/NoScript"/>
    </div> </center>
    
    <!-- 
    </noscript>
    
    <html>
    <body>
    
    Page HERE...
    
    </body>
    </html>
    

<noscript>  --> </noscript>

Source: stackoverflow.com

[ACCEPTED]-How to wrap <noscript> tag to hide content when javascript disable-noscript

Is an image within a noscript tag only downloaded if Javascript is disabled?

Access Contents of <noscript> with Javascript

How to hide parts of HTML when JavaScript is disabled?