Example: Stack Overflow
Sometimes some users have their Javascript Disabled for some reason, but what ever that reasonis, heres a simple way to notify them that their Javascript is disabled…
What we’ll be making
You see that gray bar on the top with the “Please turn on Javascript” Message? yeah, thats what’ll we’ll be making here…
The CSS
Put this css code into a file, example “noscript.css”
body:before{
content: 'Please turn on Javascript';
color: white;
font-family: sans-serif;
font-size: 1em;
font-weight: bold;
text-align: center;
width: 100%;
padding: 1em 0;
background: rgba(0,0,0,0.9);
position: fixed;
top: 0;
left: 0;
z-index: 99999;
}
The HTML
just put this HTML code inside your body tag…
Note: In the new HTML5 it is absolutely valid to define links to Stylesheets inside the body tag….
<noscript> <link rel="stylesheet" type="text/css" href="noscript.css"> </noscript>
Explanation
Pseudo: Latin for False
This NoScript message relies on CSS3 Peuso Elements, especiall the :before element and HTML’s <noscript> tag.
The :after selector(not really a selector) here creates a new element before the body tag, but it does not show up in the DOM Tree as it is not a real element. This element can only be accessed and styled through css.
Here when the browser detects no javascript support it loads up the noscript CSS file. The content property is mandatory for pseudo elements as without it it will not render. The other styles are quite self explanatory. Notice on the last line the z-index is set exceptionally high.. this is so that the bar stays on top of all the defined elements in the body however deep they are nested.
How to Test <noscript/>
In Firefox
First Install the Web Developer Toolbar 
Now you can Disable Javascript from this toolbar like so:
In Chrome
Type this into chrome’s address bar…
chrome://settings/content
and change the settings, then press “Done”
Now just go to the URL of the site you added this to for testing…
Good Luck.
Hi, I am Omran Jamal from Bangladesh, a Student of A-Level, and an Intern at Techbeeo. Though young, I am very enthusiastic about Computers. Taught myself how to code when I was 12 and been coding ever since.