How to detect if JavaScript is disabled

Question

There was a post this morning asking about how many people disable JavaScript  Then I began to wonder what techniques might be used to determine if the user has it disabled    Does anyone know of some short simple ways to detect if JavaScript is disabled  My intention is to give a warning that the site is not able to function properly without the browser having JS enabled    Eventually I would want to redirect them to content that is able to work in the absence of JS  but I need this detection as a placeholder to start

User · Answer

A technique I ve used in the past is to use JavaScript to write a session cookie that simply acts as a flag to say that JavaScript is enabled  Then the server-side code looks for this cookie and if it s not found takes action as appropriate  Of course this technique does rely on cookies being enabled

User · Answer

People have already posted examples that are good options for detection  but based on your requirement of  give warning that the site is not able to function properly without the browser having JS enabled   You basically add an element that appears somehow on the page  for example the  pop-ups  on Stack Overflow when you earn a badge  with an appropriate message  then remove this with some Javascript that runs as soon as the page is loaded  and I mean the DOM  not the whole page

User · Answer

If your use case is that you have a form  e g   a login form  and your server-side script needs to know if the user has JavaScript enabled  you can do something like this    lt form onsubmit  this js enabled value 1 return true   gt       lt input type  hidden  name  js enabled  value  0  gt       lt input type  submit  value  go  gt   lt  form gt    This will change the value of js enabled to 1 before submitting the form  If your server-side script gets a 0  no JS  If it gets a 1  JS

User · Answer

Here is a PHP script which can be included once before any output is generated   It is not perfect  but it works well enough in most cases to avoid delivering content or code that will not be used by the client   The header comments explain how it works    lt  php                                                                                   JAVASCRIPT DETECTION                                                                                                                                            Progressive enhancement and graceful degradation are not sufficient if we    want to avoid sending HTML or JavaScript code that won t be useful on the    client side   A normal HTTP request will not include any explicit indicator    that JavaScript is enabled in the client   So a  preflight response  is    needed to prompt the client to provide an indicator in a follow-up request     Once the state of JavaScript availability has been received the state of    data received in the original request must be restored before proceding     To the user  this handshake should be as invisible as possible         The most convenient place to store the original data is in a PHP session     The PHP session extension will try to use a cookie to pass the session ID    but if cookies are not enabled it will insert it into the query string     This violates our preference for invisibility   When Javascript is not    enabled the only way to effect a client side redirect is with a  meta     element with its  http-equiv  attribute set to  refresh    In this case    modifying the URL is the only way to pass the session ID back        But when cookies are disabled and JavaScript is enabled then a client side    redirect can be effected by setting the  window onload  method to a function    which submits a form   The form has a  method  attribute of  post  and an     action  attribute set to the original URL   The form contains two hidden    input elements  one in which the session ID is stored and one in which the    state of JavaScript availability is stored   Both values are thereby passed    back to the server in a POST request while the URL remains unchanged   The    follow-up request will be a POST even if the original request was a GET  but    since the original request data is restored  the containing script ought to    process the request as though it were a GET      In order to ensure that the constant SID is defined as the caller of this    script would expect  call session start if it hasn t already been called   session   isset   SESSION   if    session  session start        Use a separate session for Javascript detection   Save the caller s session    name and ID   If this is the followup request then close the caller s    session and reopen the Javascript detection session   Otherwise  generate a    new session ID  close the caller s session and create a new session for    Javascript detection   session name   session name     session id   session id    session write close    session name  JS DETECT    if  isset   COOKIE  JS DETECT           session id   COOKIE  JS DETECT       elseif  isset   REQUEST  JS DETECT           session id   REQUEST  JS DETECT       else       session id sha1 mt rand        session start     if  isset   SESSION   SERVER              Preflight response already sent         Store the JavaScript availability status in a constant      define  JS ENABLED   0   REQUEST  JS ENABLED            Store the cookie availability status in a constant      define  COOKIES ENABLED   isset   COOKIE  JS DETECT             Expire the cookies if they exist      setcookie  JS DETECT   0  time  -3600       setcookie  JS ENABLED   0  time  -3600          Restore the original request data        GET     SESSION   GET          POST     SESSION   POST          FILES     SESSION   FILES          COOKIE     SESSION   COOKIE          SERVER     SESSION   SERVER          REQUEST     SESSION   REQUEST           Ensure that uploaded files will be deleted if they are not moved or renamed      function unlink uploaded files              foreach  array keys   FILES  as  k              if  file exists   FILES  k   tmp name                     unlink   FILES  k   tmp name               register shutdown function  unlink uploaded files           Reinitialize the superglobal        SESSION   array           Destroy the Javascript detection session      session destroy           Reopen the caller s session      session name  session name       session id  session id       if   session  session start        unset  session   session name   session id   tmp name          Complete the request    else          Preflight response not sent so send it         To cover the case where cookies are enabled but JavaScript is disabled         initialize the cookie to indicate that JavaScript is disabled      setcookie  JS ENABLED   0          Prepare the client side redirect used when JavaScript is disabled       content    0  url     SERVER  REQUEST URI        if     GET  JS DETECT               content    empty   SERVER  QUERY STRING              amp             content     JS DETECT   session id                 Remove request data which should only be used here      unset   GET  JS DETECT     GET  JS ENABLED                  POST  JS DETECT     POST  JS ENABLED                  COOKIE  JS DETECT     COOKIE  JS ENABLED                  REQUEST  JS DETECT     REQUEST  JS ENABLED            Save all remaining request data in session data        SESSION   GET       GET        SESSION   POST       POST        SESSION   FILES       FILES        SESSION   COOKIE       COOKIE        SESSION   SERVER       SERVER        SESSION   REQUEST       REQUEST         Rename any uploaded files so they won t be deleted by PHP   When using        a clustered web server  upload tmp dir must point to shared storage      foreach  array keys   FILES  as  k             tmp name     FILES  k   tmp name    x           if  move uploaded file   FILES  k   tmp name     tmp name                 SESSION   FILES    k   tmp name      tmp name           Have the client inform the server as to the status of Javascript    gt   lt  DOCTYPE html gt   lt html gt   lt head gt       lt script gt          document cookie    JS ENABLED 1      location reload causes a confirm box in FireFox         if  document cookie    location reload true             if  document cookie    location href   location         lt  script gt       lt meta http-equiv  refresh  content   lt    content  gt     gt   lt  head gt   lt body gt       lt form id  formid  method  post  action     gt           lt input type  hidden  name   lt    session name  gt   value   lt    session id  gt     gt           lt input type  hidden  name  JS DETECT  value   lt   session id    gt     gt           lt input type  hidden  name  JS ENABLED  value  1    gt       lt  form gt       lt script gt          document getElementById  formid   submit         lt  script gt   lt  body gt   lt  html gt   lt  php     exit      gt

User · Answer

The noscript tag works well  but will require each additional page request to continue serving useless JS files  since essentially noscript is a client side check   You could set a cookie with JS  but as someone else pointed out  this could fail   Ideally  you d like to be able to detect JS client side  and without using cookies  set a session server side for that user that indicates is JS is enabled   A possibility is to dynamically add a 1x1 image using JavaScript where the src attribute is actually a server side script   All this script does is saves to the current user session that JS is enabled    SESSION  js enabled      You can then output a 1x1 blank image back to the browser   The script won t run for users who have JS disabled  and hence the   SESSION  js enabled   won t be set   Then for further pages served to this user  you can decide whether to include all of your external JS files  but you ll always want to include the check  since some of your users might be using the NoScript Firefox add-on or have JS disabled temporarily for some other reason   You ll probably want to include this check somewhere close to the end of your page so that the additional HTTP request doesn t slow down the rendering of your page

User · Answer

Why don t you just put a hijacked onClick   event handler that will fire only when JS is enabled  and use this to append a parameter  js true  to the clicked selected URL  you could also detect a drop down list and change the value- of add a hidden form field   So now when the server sees this parameter  js true  it knows that JS is enabled and then do your fancy logic server-side    The down side to this is that the first time a users comes to your site  bookmark  URL  search engine generated URL- you will need to detect that this is a new user so don t look for the NVP appended into the URL  and the server would have to wait for the next click to determine the user is JS enabled disabled   Also  another downside is that the URL will end up on the browser URL and if this user then bookmarks this URL it will have the js true NVP  even if the user does not have JS enabled  though on the next click the server would be wise to knowing whether the user still had JS enabled or not   Sigh   this is fun

User · Answer

just a bit tough but  hairbo gave me the idea   CSS    pagecontainer     display  none      JS   function load       document getElementById  noscriptmsg   style display    none     document getElementById  load   style display    block        rest of js       HTML    lt body onload  load     gt      lt div class  pagecontainer  id  load  gt      Page loading        lt  div gt     lt div id  noscriptmsg  gt      You don t have javascript enabled  Good luck with that     lt  div gt    lt  body gt    would work in any case right  even if the noscript tag is unsupported  only some css required   any one knows a  non css solution

User · Answer

I assume that you re trying to decide whether or not to deliver JavaScript-enhanced content   The best implementations degrade cleanly  so that the site still operates without JavaScript  I also assume that you mean server-side detection  rather than using the  lt noscript gt  element for an unexplained reason   There is not a good way to perform server-side JavaScript detection  As an alternative it is possible to set a cookie using JavaScript  and then test for that cookie using server-side scripting upon subsequent page views   However this would not be suitable for deciding what content to deliver as it would not be able to distinguish visitors without the cookie from new visitors or visitors who are blocking cookies

User · Answer

If javascript is disabled your client-side code won t run anyway  so I assume you mean you want that info available server-side   In that case  noscript is less helpful   Instead  I d have a hidden input and use javascript to fill in a value   After your next request or postback  if the value is there you know javascript is turned on   Be careful of things like noscript  where the first request may show javascript disabled  but future requests turn it on

User · Answer

lt noscript gt  isn t even necessary  and not to mention not supported in XHTML   Working Example     lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Frameset  EN   http   www w3 org TR xhtml1 DTD xhtml1-frameset dtd  gt   lt html gt   lt head gt       lt title gt My website lt  title gt       lt style gt         site             display  none               lt  style gt       lt script src  http   code jquery com jquery-latest min js   gt  lt  script gt       lt script gt          document  ready function                   noJS   hide                  site   show                   lt  script gt   lt  head gt   lt body gt       lt div id  noJS  gt Please enable JavaScript    lt  div gt       lt div id  site  gt JavaScript dependent content here    lt  div gt   lt  body gt   lt  html gt    In this example  if JavaScript is enabled  then you see the site  If not  then you see the  Please enable JavaScript  message  The best way to test if JavaScript is enabled  is to simply try and use JavaScript  If it works  it s enabled  if not  then it s not

User · Answer

For those who just want to track if js was enabled  how about using an ajax routine to store the state  For example  I log all visitors visits in a set of tables  The JSenabled field can be set to a default of FALSE  and the ajax routine would set it to TRUE  if JS is enabled

User · Answer

I d suggest you go the other way around by writing unobtrusive JavaScript   Make the features of your project work for users with JavaScript disabled  and when you re done  implement your JavaScript UI-enhancements   https   en wikipedia org wiki Unobtrusive JavaScript

User · Answer

You don t detect whether the user has javascript disabled  server side or client    Instead  you assume that javascript is disabled and build your webpage with javascript disabled   This obviates the need for noscript  which you should avoid using anyway because it doesn t work quite right and is unnecessary   For example  just build your site to say  lt div id  nojs  gt This website doesn t work without JS lt  div gt   Then  your script will simply do document getElementById  nojs   style display    none   and go about its normal JS business

User · Answer

noscript blocks are executed when JavaScript is disabled  and are typically used to display alternative content to that you ve generated in JavaScript  e g    lt script type  javascript  gt          construction of ajaxy-link   setting of  js-enabled  cookie flag  etc    lt  script gt   lt noscript gt       lt a href  next page php nojs 1  gt Next Page lt  a gt   lt  noscript gt    Users without js will get the next page link - you can add parameters here so that you know on the next page whether they ve come via a JS non-JS link  or attempt to set a cookie via JS  the absence of which implies JS is disabled  Both of these examples are fairly trivial and open to manipulation  but you get the idea   If you want a purely statistical idea of how many of your users have javascript disabled  you could do something like    lt noscript gt       lt img src  no js gif  alt  Javascript not enabled    gt   lt  noscript gt    then check your access logs to see how many times this image has been hit  A slightly crude solution  but it ll give you a good idea percentage-wise for your user base   The above approach  image tracking  won t work well for text-only browsers or those that don t support js at all  so if your userbase swings primarily towards that area  this mightn t be the best approach

User · Answer

code inside  lt noscript gt  tags will be executed when there is no js enabled in browser  we can use noscript tags to display msg to turn on JS as below  lt noscript gt       lt h1 style  text-align  center   gt enable java script and reload the page lt  h1 gt       lt  noscript gt  while keeping our website content inside body as hidden  as below   lt body gt   lt div id  main body  style  display  none   gt  website content   lt  div gt   lt  body gt    now if JS is turned on you can just make the content inside your main body visible as below   lt script type  text javascript  gt  document getElementById  main body   style display  block    lt  script gt

User · Answer

I would like to add my solution to get reliable statistics on how many real users visit my site with javascript disabled over the total users  The check is done one time only per session with these benefits    Users visiting 100 pages or just 1 are counted 1 each  This allows to focus on single users  not pages  Does not break page flow  structure or semantic in anyway Could logs user agent  This allow to exclude bots from statistics  such as google bot and bing bot which usually have JS disabled  Could also log IP  time etc    Just one check per session  minimal overload    My code uses PHP  mysql and jquery with ajax but could be adapted to other languanges   Create a table in your DB like this one   CREATE TABLE IF NOT EXISTS  log JS       logJS id  int 11  NOT NULL AUTO INCREMENT     data ins  timestamp NOT NULL DEFAULT CURRENT TIMESTAMP     session id  varchar 50  NOT NULL     JS ON  tinyint 1  NOT NULL DEFAULT  0      agent  varchar 255  DEFAULT NULL    PRIMARY KEY   logJS id     ENGINE MyISAM  DEFAULT CHARSET utf8    Add this to every page after using session start   or equivalent  jquery required     lt    if   isset   SESSION  JSTest                    mysql query  INSERT INTO log JS  session id  agent  VALUES       mysql real escape string session id               mysql real escape string   SERVER  HTTP USER AGENT                       SESSION  JSTest     1     One time per session           gt           lt script type  text javascript  gt                document  ready function       get  JSOK php                 lt  script gt           lt           gt    Create the page JSOK php like this    lt   include once   DB connection file  php       mysql query  UPDATE log JS SET JS ON   1 WHERE session id        mysql real escape string session id

User · Answer

Use a  no-js class on the body and create non javascript styles based on  no-js parent class   If javascript is disabled you will get all the non javascript styles  if there is JS support the  no-js class will be replaced giving you all the styles as usual    document body className   document body className replace  no-js   js      trick used in HTML5 boilerplate http   html5boilerplate com  through modernizr but you can use one line of javascript to replace the classes   noscript tags are okay but why have extra stuff in your html when it can be done with css

User · Answer

I d like to add my  02 here   It s not 100  bulletproof  but I think it s good enough   The problem  for me  with the preferred example of putting up some sort of  this site doesn t work so well without Javascript  message is that you then need to make sure that your site works okay without Javascript   And once you ve started down that road  then you start realizing that the site should be bulletproof with JS turned off  and that s a whole big chunk of additional work   So  what you really want is a  redirection  to a page that says  turn on JS  silly    But  of course  you can t reliably do meta redirections   So  here s the suggestion      lt noscript gt       lt style type  text css  gt           pagecontainer  display none        lt  style gt       lt div class  noscriptmsg  gt      You don t have javascript enabled   Good luck with that       lt  div gt   lt  noscript gt       where all of the content in your site is wrapped with a div of class  pagecontainer    The CSS inside the noscript tag will then hide all of your page content  and instead display whatever  no JS  message you want to show   This is actually what Gmail appears to do   and if it s good enough for Google  it s good enough for my little site

User · Answer

Might sound a strange solution  but you can give it a try     lt  php  jsEnabledVar   0    gt        lt script type  text javascript  gt  var jsenabled   1  if jsenabled    1        lt  php  jsEnabledVar   1    gt     lt  script gt    lt noscript gt  var jsenabled   0  if jsenabled    0        lt  php  jsEnabledVar   0    gt     lt  noscript gt    Now use the value of   jsEnabledVar  throughout the page  You may also use it to display a block indicating the user that JS is turned off   hope this will help

User · Answer

Adding a refresh in meta inside noscript is not a good idea    Because noscript tag is not XHTML compliant The attribute value  Refresh  is nonstandard  and should not be used   Refresh  takes the control of a page away from the user  Using  Refresh  will cause a failure in W3C s Web Content Accessibility Guidelines  --- Reference http   www w3schools com TAGS att meta http equiv asp

User · Answer

Detect it in what  JavaScript  That would be impossible  If you just want it for logging purposes  you could use some sort of tracking scheme  where each page has JavaScript that will make a request for a special resource  probably a very small gif or similar   That way you can just take the difference between unique page requests and requests for your tracking file

User · Answer

In some cases  doing it backwards could be sufficient   Add a class using javascript      Jquery    body   addClass  js-enabled        CSS     menu-mobile  display none   body js-enabled  menu-mobile  display block     This could create maintenance issues on anything complex  but it s a simple fix for some things   Rather than trying to detect when it s not loaded  just style according to when it is loaded

User · Answer

This is what worked for me  it redirects a visitor if javascript is disabled   lt noscript gt  lt meta http-equiv  refresh  content  0  url whatyouwant html    gt  lt  noscript gt

User · Answer

Of course  Cookies and HTTP headers are great solutions  but both would require explicit server side involvement   For simple sites  or where I don t have backend access  I prefer client side solutions   --  I use the following to set a class attribute to the HTML element itself  so my CSS can handle pretty much all other display type logic   METHODS   1  place  lt script gt document getElementsByTagName  html   0  classList add  js-enabled    lt  script gt  above the  lt html gt  element   WARNING     This method  will override all  lt html gt  class attributes  not to mention may not be  valid  HTML  but works in all browsers  I ve tested it in    NOTES  Due to the timing of when the script is run  before the  lt html gt  tag is processed  it ends up getting an empty classList  collection with no nodes  so by the time the script completes  the  lt html gt  element will be given only the classes you added    2  Preserves all other  lt html gt  class attributes  simply place the script  lt script gt document getElementsByTagName  html   0  classList add  js-enabled    lt  script gt  right after the opening  lt html gt  tag   In both cases  If JS was disabled  then no changes to the  lt html gt  class attributes will be made    ALTERNATIVES  Over the years I ve used a few other methods        lt script type  text javascript  gt       lt  --           function d  a  b                let x   function                       Select and swap                 let hits   d getElementsByClassName a                   for  let i   hits length - 1  i  gt   0  i--                        hits i  classList add b                       hits i  classList remove a                                                   Initialize Second Pass                setTimeout function    x      0               x               document   no-js    js-enabled         -- gt   lt  script gt       Minified as    lt script type  text javascript  gt       lt  --           function d  a  b  x  hits  i  x function   hits d getElementsByClassName a  for i hits length-1 i gt  0 i--  hits i  classList add b  hits i  classList remove a     setTimeout function    x      0  x      document   no-js    js-enabled         -- gt   lt  script gt     This will cycle through the page twice  once at the point where it is in the page  generally right after the  lt html gt  and  once again after page load  Two times was required  as I injected into a header tpl file of a CMS which I did not have backend access to  but wanted to present styling options for no-js snippets    The first pass  would set set the  js-enabled class permitting any global styles to kick in  and prevented most further reflows  the second pass  was a catchall for any later included content   REASONINGS   The main reasons  I ve cared if JS was enabled or not was for  Styling  purposes  hide show a form  enable disable buttons or restyle presentation and layouts of sliders  tables  and other presentations which required JS to function  correctly  and would be useless or unusable without JS to animate or handle the interactions   Also  you can t directly detect with javascript  if javascript is  disabled     only if it is  enabled   by executing some javascript  so you either rely on  lt meta http-equiv  refresh  content  2 url  url to no-js content html    gt  or you can rely on css to switch styles and if javascript executes  to switch to a  js-enabled  mode

User · Answer

Because I always want to give the browser something worthwhile to look at I often use this trick   First  any portion of a page that needs JavaScript to run properly  including passive HTML elements that get modified through getElementById calls etc   are designed to be usable as-is with the assumption that there ISN T javaScript available   designed as if it wasn t there   Any elements that would require JavaScript  I place inside a tag something like    lt span name  jsOnly  style  display  none   gt  lt  span gt    Then at the beginning of my document  I use  onload or document ready within a loop of getElementsByName  jsOnly   to set the  style display       turning the JS dependent elements back on   That way  non-JS browsers don t ever have to see the JS dependent portions of the site  and if they have it  it appears immediately when it s ready   Once you are used to this method  it s fairly easy to hybridize your code to handle both situations  although I am only now experimenting with the noscript tag and expect it will have some additional advantages

User · Answer

A common solution is to the meta tag in conjunction with noscript to refresh the page and notify the server when JavaScript is disabled  like this    lt  DOCTYPE html gt   lt html lang  en  gt       lt head gt           lt noscript gt               lt meta http-equiv  refresh  content  0    javascript false  gt           lt  noscript gt           lt meta charset  UTF-8   gt           lt title gt  lt  title gt       lt  head gt   lt  html gt    In the above example when JavaScript is disabled the browser will redirect to the home page of the web site in 0 seconds  In addition it will also send the parameter javascript false to the server   A server side script such as node js or PHP can then parse the parameter and come to know that JavaScript is disabled  It can then send a special non-JavaScript version of the web site to the client

User · Answer

Check for cookies using a pure server side solution i have introduced here then check for javascript by dropping a cookie using Jquery Cookie and then check for cookie this way u check for both cookies and javascript

User · Answer

Here is the twist  There might be client browsers with enabled Javascript and who use JS compatible browsers  But for what ever the reason Javascript does not work in the browser  ex  firewall settings   According to statistics this happens every 1 out of 93 scenarios  So the server detects the client is capable of executing Javascript but actually it doesn t   As a solution I suggest we set a cookie in client site then read it from server  If the cookie is set then JS works fine  Any thoughts

User · Answer

You might  for instance  use something like document location    java page html  to redirect the browser to a new  script-laden page  Failure to redirect implies that JavaScript is unavailable  in which case you can either resort to CGI ro utines or insert appropriate code between the  tags   NOTE  NOSCRIPT is only available in Netscape Navigator 3 0 and up    credit  http   www intranetjournal com faqs jsfaq how12 html

User · Answer

Add this to the HEAD tag of each page    lt noscript gt           lt meta http-equiv  refresh  runat  server  id  mtaJSCheck  content  0 logon aspx    gt   lt  noscript gt    So you have    lt head gt       lt noscript gt           lt meta http-equiv  refresh  runat  server  id  mtaJSCheck  content  0 logon aspx    gt       lt  noscript gt   lt  head gt    With thanks to Jay

User · Answer

You ll want to take a look at the noscript tag    lt script type  text javascript  gt     some javascript script to insert data     lt  script gt   lt noscript gt      lt p gt Access the  lt a href  http   someplace com data  gt data  lt  a gt  lt  p gt   lt  noscript gt

User · Answer

To force users to enable JavaScripts  I set  href  attribute of each link to the same document  which notifies user to enable JavaScripts or download Firefox  if they don t know how to enable JavaScripts   I stored actual link url to the  name  attribute of links and defined a global onclick event that reads  name  attribute and redirects the page there   This works well for my user-base  though a bit fascist

User · Answer

You can use a simple JS snippet to set the value of a hidden field  When posted back you know if JS was enabled or not   Or you can try to open a popup window that you close rapidly  but that might be visible    Also you have the NOSCRIPT tag that you can use to show text for browsers with JS disabled

User · Answer

I think you could insert an image tag into a noscript tag and look at the stats how many times your site and how often this image has been loaded

User · Answer

I ve had to solve the same problem yesterday  so I m just adding my  001 here  The solution works for me ok at least at the home page  index php     I like to have only one file at the root folder  index php   Then I use folders to structure the whole project  code  css  js  etc   So the code for index php is as follows       lt head gt       lt title gt Please Activate Javascript lt  title gt       lt meta http-equiv  Content-Type  content  text html  charset UTF-8    gt       lt script type  text javascript  src  js jquery-1 3 2 min js  gt  lt  script gt    lt  head gt    lt body gt    lt script language  JavaScript  gt        document  ready function             location href    code home php               lt  script gt    lt noscript gt       lt h2 gt This web site needs javascript activated to work properly  Please activate it  Thanks  lt  h2 gt   lt  noscript gt    lt  body gt    lt  html gt    Hope this helps anyone  Best Regards

User · Answer

This is the  cleanest  solution id use    lt noscript gt       lt style gt          body      hides all elements inside the body               display  none                    h1     even if this h1 is inside head tags it will be first hidden  so we have to display it again after all body elements are hidden               display  block                 lt  style gt       lt h1 gt JavaScript is not enabled  please check your browser settings  lt  h1 gt   lt  noscript gt

User · Answer

I ve figured out another approach using css and javascript itself  This is just to start tinkering with classes and ids   The CSS snippet  1  Create a css ID rule  and name it  jsDis  2  Use the  content  property to generate a text after the BODY element   You can style this as you wish   3 Create a 2nd css ID rule and name it  jsEn  and stylize it   for the sake of simplicity  I gave to my  jsEn rule a different background color    lt style gt   jsDis after       content  Javascript is Disable  Please turn it ON        font bold 11px Verdana      color  FF0000      jsEn       background-color  dedede      jsEn after       content  Javascript is Enable  Well Done        font bold 11px Verdana      color  333333     lt  style gt    The JavaScript snippet  1  Create a function  2  Grab the BODY ID with getElementById and assign it to a variable  3  Using the JS function  setAttribute   change the value of the ID attribute of the BODY element    lt script gt  function jsOn         var chgID   document getElementById  jsDis        chgID setAttribute  id    jsEn       lt  script gt    The HTML part  1  Name the BODY element attribute with the ID of  jsDis  2  Add the onLoad event with the function name   jsOn       lt body id  jsDis  onLoad  jsOn    gt    Because of the BODY tag has been given the ID of  jsDis  - If Javascript is enable  it will change by himself the attribute of the BODY tag  - If Javascript is disable  it will show the css  content   rule text   You can play around with a  wrapper container  or with any DIV that use JS  Hope this helps to get the idea

[javascript] How to detect if JavaScript is disabled?

Examples related to javascript

Examples related to html

Examples related to code-snippets