Message when JavaScript is disabled

Question

In my project JS is required, so I've added the code below at base layout _Layout. But sometimes the message is visible (blinks in the back) while browser rendering.

Any suggestion on how to work better with this message?

The original idea on how to get message if JavaScript disabled is from here: https://stackoverflow.com/a/2170503/19210262

<html>
<head>
</head>
<body class="fixed-left">
    <div id="warningJS" style="display: block;">
        <table style="width: 100%; height: 60vh;">
            <tr>
                <td align="center" valign="middle">
                    <h4>Error: please enable JavaScript</h4>
                </td>
            </tr>
        </table>
    </div>

    <div id="totalBody" style="display:none;">
        //Code here
    </div>

    <script type="text/javascript">
        let totalBody = document.getElementById('totalBody');
        let warningJS = document.getElementById('warningJS');
        totalBody.style.display = 'block';
        warningJS.style.display = 'none';
    </script>
</body>
</html>

As I've mentioned, please see the original idea at https://stackoverflow.com/a/2170503/19210262 — rd1218, Jul 23 '23 at 14:22

Keith · Answer 1 · 2023-07-23T15:12:16.367

One idea is instead of using JS after the DOM to set the style, target the #warningJS with CSS, but create the CSS in code so that it's only run if JS enabled. Make sure this script is run before the DOM bits that need hiding.

Below is a simple example, I've used the setTimeout to simulate a delay to show that there is no flicker.

<script>
  const style = document.createElement("style");
  document.getElementsByTagName("head")[0].appendChild(style);
  style.innerHTML = '#warningJS { display: none; visibility: hidden;}';
</script>

<div id="warningJS" style="display: block;">
  <table style="width: 100%; height: 60vh;">
    <tr>
       <td align="center" valign="middle">
          <h4>Error: please enable JavaScript</h4>
       </td>
    </tr>        
  </table>
</div>

<div id="totalBody" style="display:none;">
        //Code here
</div>

<script>
  setTimeout(() => {
    const totalBody = document.getElementById('totalBody');
    totalBody.style.display = 'block';
  }, 400);
</script>

Can you please make it clear which sections should I add this? I've tried here but seems to be misplaced, since its breaking the page HTML — rd1218, Jul 23 '23 at 19:18

Message when JavaScript is disabled

1 Answers1