CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2417624
user2417624

Reputation: 693

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.

Upvotes: 1

Views: 1025

Answers (4)

user6748331
user6748331

Reputation:

Use noscript 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>

Upvotes: 7

Tahseen
Tahseen

Reputation: 121

try something like this

<div id="content">
  Javascript is enabled
</div>

<noscript>
  <div>
    Javascript is disabled
  </div>
</noscirpt>

<script>
   $("#content").show();
</script>

noscript tag has been around as long as I can remember.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript

Upvotes: 1

Pete
Pete

Reputation: 58432

I would use the noscript tag as stated in waldemarle's answer, but here is an alternative:

Using document.write, you can put a container div around my body content with a class of js, then you can style js things from the beginning without it "flashing":

.js .no-js,
.js-show {display:none;}
.js .js-show {display:block;}
<script>
  document.write('<div class="js">'); // goes after start body tag
</script>

    <div class="no-js">hide if js enabled</div>
    <div class="js-show">hide if js disabled</div>

<script>
  document.write('</div>'); // goes before end body tag
</script>

Upvotes: 1

Sasikumar
Sasikumar

Reputation: 863

Your code works fine. Look the following code 

		$("#no-js").hide();
    $("#no-js").css('visibility','hidden');
    $("#no-js").css('display','none');
    $("#wrapper-page").css("display", "block");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 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 -->

Is there any issues displayed in console.

Look if the file path used for javascript files are correct by verifying in source code.

Upvotes: 1

Related Questions