There are two divs, one named #loading and the other named #main;
<div id="loading"></div>
<div id="main"></div>
The goal is to use JavaScript to display #loading for five seconds, then hide it and show the #main div. The #main div is initially hidden but should appear after hiding the #loading div.
To accomplish this, a combination of CSS and JavaScript would be needed. Hopefully you understand the objective and can assist in achieving it successfully.
Thank you.
Here is the updated CSS code:
#main {
display:none;
}
And here is the JavaScript code:
setTimeout(function() {
document.getElementById('main').style.display = 'block';
document.getElementById('loading').style.display = 'none';
}, 5000);
If you're looking to achieve this without relying on CSS, here's a solution using only pure jQuery.
$("#loading").show();
$("#main").hide();
setTimeout(function() {
$("#loading").hide();
$("#main").show()
}, 5000);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loading">loading here..</div>
<div id="main" class="hidden">This is main content</div>One way to implement a delay is by using the setTimeout function in JavaScript.
window.onload = function() {
setTimeout(function() {
document.getElementById("loading").style.display = "none";
document.getElementById("main").style.display = "block";
}, 5*1000);
}#main {
display: none;
}<div id="loading">loading</div>
<div id="main">main</div>Hopefully, this solution will be helpful for your needs.
function startLoader(duration) {
if (window.loadingActive) {return;}
document.getElementById('loading').style.display = "block";
document.getElementById('main').style.display = "none";
window.loadingActive = setTimeout(function () {
document.getElementById('loading').style.display = "none";
document.getElementById('main').style.display = "block";
window.loadingActive = 0;
}, duration);
}
startLoader(5000);
In my opinion, it is best to steer clear of using ID's in this scenario as they can clutter the global namespace.
A cleaner solution can be achieved with CSS and classes.
var container = document.querySelector('.container');
setTimeout(function () {
container.classList.remove('isloading');
}, 5000);.loading {
display: none;
}
div.isloading .loading {
display: block;
}
.main {
display: none;
}
div:not(.isloading) .main {
display: block;
}<div class="container isloading">
<div class="loading">Loading</div>
<div class="main">Main</div>
</div>I have created a dynamic page that continuously fetches real-time information from my Azure functions backend using SignalR. If I am on the page for an hour and experience a disconnect, the signalr client will attempt to reconnect automatically, which usua ...
I implemented the use of a text box with ajaxtoolkit HtmlEditorExtender (Rich textbox) to translate English to Gujarati using Google translation Javascript. The translation function works perfectly with the regular text box, but encounters issues when used ...
Is there a way for me to import the custom geometry file called "OutlinesGeometry.js" from this link? I've attempted to import it like this: <script type="module" src="./three/build/three.module.js"></script> <scrip ...
I recently uploaded my React.js website to Strato, but I encountered an error. When I try to access a different page like /status, I get a "Not Found The requested URL was not found on this server" error message. The homepage works fine, but the route page ...
Currently, I am in the process of developing a web application in the form of a network structure that involves basic CRUD operations. However, I am facing the issue of having overly large router files, prompting me to consider splitting them up. One of t ...
Is there a way to determine if an array contains empty elements? Consider the following array: var arr = [ 'a', 'b', , 'd']; In this case, arr[2] is undefined. It's important to check for such occurrences. One approach ...
My E-Commerce website is created using HTML, JavaScript, and PHP. On the product details page, users can add products to their cart, so I show the total cart value. I need the total amount displayed in a decimal number format (10,2). Currently, when a u ...
I am working on a Vue.js form component with multiple input fields, but now I need to split it into two separate forms that will collect different user input. Form 1 includes: Name Surname Email with a form name attribute value of form_1 Form 2 i ...
After referring to the discussion at , I encountered a challenge with my javascript ajax function that retrieves JSON data. My goal is to trigger different js events based on the key-value pairs of the JSON response, but unfortunately, I am facing diffic ...
My website has session and JavaScript checks to see if it exists. Everything is working correctly, but there is a slight issue where the dashboard page briefly appears for milliseconds before redirecting. I need the webpage to redirect before any HTML co ...
Currently in the process of automating a web application that utilizes SmartClient, I am in need of a reliable method for constructing locators for forms and populating input fields. Our testing framework is based on Selenium and SmartClient's scLocat ...
Can I use a custom icon for pagination in material ui? Find more information on Material UI Pagination in the official documentation here, and check out the CodeSandbox Demo here I am interested in changing the default left and right chevron icons for na ...
{ "Emily":{ "Math":"87", "Science":"91", "Email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d6f7e767c51767b727e737f764f747879">[email protected]</a>", "City":"Chicago" }, "Sa ...
I am a newcomer to JavaScript and I'm attempting to parse a CSV file in the backend using node.js. I have an array of states where I intend to store data from a specific column of the CSV. The code I have written using fast-csv seems simple enough, b ...
While following the tutorial on creating a bar chart, I encountered an issue in step three. The bars are rotated to columns, but I am struggling to iterate over a JSON dataset and add Y-axis labels for each bar using the name attribute from the returned JS ...
Can someone help me figure this out? I have a form with multiple groups of radio buttons, and I want to disable the submit button until at least one radio button from each group is selected. The code I've tried so far isn't working as expected. W ...
I am currently developing a project on this platform. It is using c9.io, an innovative browser-based collaborative programming IDE. The index.php file includes the following script: <?php $path = ltrim($_SERVER['REQUEST_URI'], '/&ap ...
When trying to retrieve data from a Mssql server, I encountered an issue with a function that contains a loop. The function returns some data to the callback, and now I need to figure out how to store this data from kriskowal's "q" into the resultset ...
I stumbled upon this jsfiddle demo code that offers multiple tabs for a single AngularJS webpage. http://jsfiddle.net/helpme128/99z393hn/ I decided to integrate it into my own project. I specifically wanted one tab to load a particular webpage called my- ...
Is there a way to create a client-side database that can automatically sync with a server-side database whenever changes are made to the data? I am in the process of developing a JavaScript program to manage student application forms. However, the interne ...