How can we stop the brief display of a hidden div from occurring?

I have two divs on my webpage - one to display if JavaScript is disabled, and another if JavaScript is enabled.

The issue I am facing is that even when JavaScript is not disabled, the div containing the message stating that JavaScript is disabled briefly appears before hiding a few seconds after the page loads.

Below is a simplified version of the HTML code I am using:

<html>
    <head>
    <body>
    <!-- This div is displayed only if 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 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 JavaScript code in use:

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

I have attempted moving the JavaScript and jQuery scripts to the top, as well as switching the order of the HTML divs, but so far, none of these changes have resolved the issue for me.

javascriptjqueryhtmlcss

Answer №1

Utilize the noscript element to show content only when JavaScript is disabled

<html>
    <head>
    <body>
    <!-- Display this div only if 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;">
Message for when JavaScript has been disabled.....
            </p>
        </div>
    </noscript>
    <!-- end no-js div -->
    <!-- This div is hidden by default, and will only be shown if 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 JavaScript is disabled, the main div will remain hidden and only the div with the 
         Disabled JavaScript error message will be displayed. -->
    <script src="<?php echo base_url(); ?>backOffice/assets/js/disabledjs.js"></script>
    </body>
</html>

Answer №2

Great job with your code implementation. Take a look at the code snippet below:

$("#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 -->

Check for any potential issues appearing in the console.

Verify that the file paths used for Javascript files are correct by inspecting the source code.

Answer №3

In response to waldemarle's suggestion of using the noscript tag, I propose an alternative approach:

By utilizing the document.write method, you can enclose the body content within a container div that has a class of js. This allows for seamless styling of JavaScript elements without any flashing effects:

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

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

<script>
  document.write('</div>'); // insert before closing body tag
</script>

Answer №4

you may want to try a similar approach

<div id="main-content">
  JavaScript is active
</div>

<noscript>
  <div>
    JavaScript is inactive
  </div>
</noscirpt>

<script>
   $("#main-content").display();
</script>

the noscript element has been around for as long as anyone can remember.

check out more about the noscript element here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The primary view seamlessly integrates with the page following the invocation of the partial view

Whenever the button is clicked, a different partial view is returned based on the selected value from the drop-down list. Controller: [HttpPost] public ActionResult Foo(SomeViewModel VM) { var model = VM; if (Request.IsAjaxRequest()) { ...

javascriptjqueryajaxasp.net-mvc

Guide to repairing a CSS ball animation

I am attempting to create a simulation where a ball moves in the following pattern: bottom right -> top center -> bottom (/) left. However, my animation seems to be moving from top right -> bottom center -> top left (/). #stage { height:300 ...

htmlcss

Leveraging async/await in express

I am encountering an issue with my app.post method while trying to deploy on Firebase. The error message reads: Parsing error: Unexpected token =>. I am fairly new to node.js and Javascript as I primarily work with Swift. However, I require this code fo ...

javascriptnode.jsfirebaseexpressgoogle-cloud-functions

Passing the value of each table row using Ajax

On my webpage, I have a list of orders displayed. I'm facing an issue where the value of each row in the table is not being passed correctly to my controller and database when a user clicks on a button - it always shows null. Can someone please assist ...

javascriptjqueryhtmlajaxasp.net-mvc

A guide on customizing ng-map markers by assigning colors to different categories

One of the functionalities I have allows users to see nearby locations based on their position and selected radius. These locations fall into different categories, and now I want to customize the markers' colors based on those categories. Here is a s ...

javascriptangularjsgoogle-mapsgoogle-maps-api-3

What causes my scene to appear black until OrbitControl is activated in ThreeJS?

What causes the scene in ThreeJS to only appear after clicking and moving the cursor? The page remains black until I interact by clicking and moving, then everything shows up. I'm stumped on what the issue could be. Any assistance would be greatly ap ...

javascriptthree.js

Revamping the current text for the circle feature in ProgressBar.js

I am working on a project where I use ProgressBar.js to generate a circle with a percentage displayed in the center. While the circle renders correctly initially, I'm facing an issue when trying to update the text (percentage) after running it again w ...

javascriptvue.jsfrontendprogress-bar

Is there a way to position this Flex-Box Item beside the image?

Please refer to the image How do I rearrange this Flex-Box Item to be positioned next to the image? https://i.sstatic.net/eSy3w.png <div class="brif fb"> <div class="sml-con"><img class="sml-thumb" src="images/chosen/edwa ...

csspositionflexbox

Is it possible to obtain a user's public URL using the Facebook API in version 2?

In version 1, it is possible to obtain the user's public link by using the following endpoint: /v1.0/me function testAPI() { console.log('Welcome! Fetching your information....'); FB.api('/me', function(response) { ...

javascriptfacebook-graph-api

Execute a PHP script upon button click without the need to refresh the page

I'm facing an issue with integrating PHP and JavaScript. Objective: To execute a .php script when the event listener of the HTML button in the .js file is triggered without causing the page to reload. Expected outcome: On clicking the button, the PH ...

javascriptphphtmljquery

What is the best way to adjust the height of the border on the left

Is it possible to add a border-left with height to only one attribute, such as h4? I want to add a border on the left side with a specific height, but the title prohibits adding the height property directly. Can anyone offer guidance on how to achieve th ...

htmlcss

Is there a way to manipulate a website's HTML on my local machine using code?

I am currently working on a project to create a program that can scan through a website and censor inappropriate language. While I have been able to manually edit the text using Chrome Dev tools, I am unsure of how to automate this process with code. I ha ...

javascriptpythonhtmlbeautifulsoup

Stopping the Game Loop in Windows Phone 8.1 with WinJS

Despite everything working smoothly, I am facing an issue with stopping the game loop when the Start button is pressed and the app is moved to the background. The event handler for suspend, app.oncheckpoint = function(args) {}, does not seem to fire for t ...

javascripthtmlwinjs

Which codec strings are considered valid for the web codecs API?

I am searching for a definitive list of valid strings that can be passed as the `codec` parameter in `VideoEncoder.isConfigSupported({ codec, width, height })`, but I have been unable to find a clear answer so far: The TS declaration file states that it m ...

javascriptcodec

When using Selenium WebDriver in Java, we noticed that despite initially failing with JavascriptExecutor, the element click method with WebElement performed successfully

Within the code snippet below, it is evident that using the WebElement.click() method successfully triggers an element, while the JavascriptExecutor.executeScript method encounters issues (although it works in most cases). WebElement e = driver.findElemen ...

javajavascriptselenium

Experiencing issues with transferring JSON response from Axios to a data object causing errors

When I try to assign a JSON response to an empty data object to display search results, I encounter a typeerror: arr.slice is not a function error. However, if I directly add the JSON to the "schools" data object, the error does not occur. It seems like th ...

javascriptarraysvue.jsvue-componentaxios

Create a dynamic MUI icon that adapts to different screen sizes

Struggling to make the MUI DeleteIcon responsive and clickable. <ListItem> <ListItemAvatar> <Avatar src={sprites.front_default}> <ImageIcon /> </Avatar> </ListItemAvatar> <ListItemText pr ...

htmlreactjsmaterial-uiicons

Using jQuery AJAX, the value of a server-side control (textbox) can be easily set

After working with the code below, I noticed that I can only set the value received from an ajax call if I am using HTML controls like buttons and text boxes. If I try to use asp server controls such as a button, the ajax call does not return any output, e ...

javascriptjqueryhtmlasp.netajax

What methods can I use to customize the appearance and add animation to a checkbox using jquery?

On my frontend interface, I have an HTML checkbox input. I am curious about the best approach for styling the standard tickbox to make it more visually appealing. Perhaps using a slider-switch? I want to avoid individual browsers styling the checkbox dif ...

jquery

What is preventing me from merging these two arrays together?

Here is some code for a Vuex mutation: export const CREATE_PANORAMAS = (state, panoramas) => { console.log('building.panoramas:', state.building.panoramas) console.log('panoramas:', panoramas) state.building.panoramas.concat(p ...

javascriptvue.jsvuex