[Edit]

HTML - detect if JavaScript is disabled

1 contributors

2 contributions

0 discussions

4 points

Created by:

Giles-Whittaker

739

In this short article, we would like to show how to detect if JavaScript is disabled / blocked.

Quick solution:

xxxxxxxxxx
 
<!doctype html>
<html>
<body>
  <noscript>
    If you see this text it means the JavaScript is disabled.
  </noscript>
</body>
</html>

Where <noscript> content will be displayed only if JavaScript is disabled or not available.

Screenshot:

<noscript> message example when JavaScript is disabled.

Dirask message

Edit

In this section, you can find message displayed on Dirask when JavaScript is disabled.

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <style>
    
    body {
        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    }
    
    div.message-block {
        padding: 14px 20px;
        border: 1px solid #d4bc08;
        border-radius: 7px;
        background: #f7df1d;
        text-align: center;
        line-height: 36px;
        color: #212121;
    }
    
    div.message-title {
        font-size: 18px;
    }
    
    span.message-marker {
        font-weight: 500;
    }
    
    div.message-description {
        font-size: 14px;
    }
    
  </style>
</head>
<body>
  <noscript>
    <div class="message-block">
      <div class="message-title"><span class="message-marker">JavaScript</span> is disabled!</div>
      <div class="message-description">to use the site features enable it.</div>
    </div>
  </noscript>
</body>
</html>