user2417624 user2417624 - 3 months ago 15
HTML Question

Hidden div is displayed briefly - how to prevent that to happen?

I have 2 divs on my page, one should be displayed if javascript is disabled, and another if the javascript is not disabled.

My problem is : even when javascript is NOT disabled, the div which contain message that javascript is disabled is briefly displayed, and
it hides few seconds after, when page is loaded.

Here is the html (simplified version) that I have:

<html>
<head>
<body>
<!-- This div is displayed only if the JavaScript is DISABLED -->
<div class="wrapper-page" id="no-js">
<p class="text-muted m-b-0 font-13 m-t-20" style="color:red !important;font-weight: bold;">
JavaScript has been disabled message.....
</p>
</div>
<!-- end no-js div -->
<!-- This div is hidden by default, and is displayed only if the JavaScript is ENABLED -->
<div class="wrapper-page" id="wrapper-page" style="display:none;">
<p>My regular content goes here...</p>
</div>
<!-- end wrapper page -->
<script src="<?php echo base_url(); ?>backOffice/assets/js/jquery.min.js"></script>
<!-- If JavaScrpt is disabled, then the main div remain not visible and only the div with the
Disabled JavaScript error message is displayed. -->
<script src="<?php echo base_url(); ?>backOffice/assets/js/disabledjs.js"></script>
</body>
</html>


Here is the content of the JavaScript file:

$(document).ready(function () {
$("#no-js").hide();
$("#no-js").css('visibility','hidden');
$("#no-js").css('display','none');
$("#wrapper-page").css("display", "block");
});


I tried to move the JS and jQuery on the top, I tried to switch the order of the html divs, nothing so far didn't help me.

Answer

Use nostript tag for content displayed only if js is disabled

<html>
    <head>
    <body>
    <!-- This div is displayed only if the JavaScript is DISABLED -->
    <noscript>       
        <div class="wrapper-page">
            <p class="text-muted m-b-0 font-13 m-t-20" style="color:red !important;font-weight: bold;">
JavaScript has been disabled message.....
            </p>
        </div>
    </noscript>
    <!-- end no-js div -->
    <!-- This div is hidden by default, and is displayed only if the JavaScript is ENABLED -->
    <div class="wrapper-page" id="wrapper-page" style="display:none;">
        <p>My regular content goes here...</p>
    </div>
    <!-- end wrapper page -->
    <script src="<?php echo base_url(); ?>backOffice/assets/js/jquery.min.js"></script>
    <!-- If JavaScrpt is disabled, then the main div remain not visible and only the div with the 
         Disabled JavaScript error message is displayed. -->
    <script src="<?php echo base_url(); ?>backOffice/assets/js/disabledjs.js"></script>
    </body>
</html>
Comments