Is it possible to create a div that will disappear after 10 seconds of the page loading using PHP or JavaScript?
Here is an example of the code:
<html>
<head></head>
<body>
<div class="LOADING" id="LOADING" name="LOADING"></div>
<div class="HOME_MENU" id="HOME_MENU" name="HOME_MENU"></div>
</body>
</html>
If I were to tackle this, I'd use an onload event on the body that triggers a setTimeout function once the page has fully loaded.
function hideLoadingDiv() {
setTimeout(function(){
document.getElementById('LOADING').classList.add('hidden');
},10000)
}.hidden {
display: none;
}<html>
<head></head>
<body onload="hideLoadingDiv()">
<div class="LOADING" id="LOADING" name="LOADING">Loading</div>
<div class="HOME_MENU" id="HOME_MENU" name="HOME_MENU">Menu</div>
</body>
</html>Absolutely, it can be done.
<html>
<head></head>
<body>
<div class="LOADING" id="LOADING" name="LOADING">LOADING</div>
<div class="HOME_MENU" id="HOME_MENU" name="HOME_MENU">HOME_MENU</div>
<script>
setTimeout(function(){
document.getElementById('LOADING').style.display = 'none';
}, 10000); // 10000ms = 10s
</script>
</body>
</html>
You can utilize Javascript to achieve this functionality. By inserting a script that includes a time out function, you can automatically hide the designated div element after a specified duration.
<html>
<head></head>
<body>
<div class="LOADING" id="LOADING" name="LOADING"></div>
<div class="HOME_MENU" id="HOME_MENU" name="HOME_MENU"></div>
<script>
// Accessing the desired element by its unique id using javascript
var divElement = document.getElementById('LOADING');
// Implementing a time delay of 10 seconds (10000 milliseconds) before executing the function to hide the element
setTimeOut(function () {
// Concealing the divElement from view. There are multiple approaches to achieve this. For simplicity, we will set its display property to 'none'
divElement.style.display = 'none'
}, 10000);
</script>
</body>
</html>
I'm attempting to send a JPG attachment along with a formatted HTML message using [picker setMessageBody:emailBody isHTML:YES]; as recommended by several forum posts. However, what I've noticed is that the resulting email's content varies d ...
Currently working on an AngularJS application. The single page has a date input that needs to be added. Date Input <input type="date" ng-model="InputDate" /> Any suggestions on how to accomplish this task? ...
Can someone help me figure out how to prevent selecting past times in React JS? Here is the code snippet: import DatePicker from "react-datepicker"; import setHours from "date-fns/setHours"; import setMinutes from "date-fns/setMi ...
I am currently working on integrating a Flask app with JS. My app.py file has the following code: import urllib import requests import time from es import book from flask import Flask, render_template, request, jsonify app = Flask(__name__) @app.route( ...
Here is the code snippet I am currently working with: var w = $(window); var $navbar = $('.navbar'); var didScroll = false; w.on('scroll', function(){ didScroll = true; }); function AddScrollHeader(pxFromTop) { setInterval(fun ...
I'm struggling with a piece of html code where everything looks good except for the placement of the button. It seems to be too far away from the container. Here's the code snippet: <div class="container-fluid mt-1 d-flex align-items-cent ...
Is there a way to customize the appearance of a mat-checkbox that actually works? I've tried various solutions without success. I attempted to disable view encapsulation and use classes like mdc-checkbox__background, but nothing changed. Even applyin ...
I am faced with several javascript statements like the ones listed below: $('#' + xxx_slot_name1).children().remove(); $('#' + xxx_ad_slot_name2).children().remove(); $('#' + xxx_ad_slot_name3).children().remove(); $('#& ...
Currently, I am working on developing a project using Angular4 with Typescript. One of the tasks involved creating a blob utilizing the XLSX-populate library. Below is an example showing the code snippet for generating a valid xlsx object: var url = wind ...
I have made changes to the background image in my Wordpress theme and now I want to display another image on top of the white content area. To achieve this, I used the following code: img style="position: absolute; top:244px; left: 220px;" src="http://ww ...
Whenever I start node-inspector The node-inspector browser window successfully loads all the files. https://i.sstatic.net/Ctx2K.png However, when I use node-inspector --preload=false Only my bin/www file is loaded on the node-inspector window. http ...
I have encountered a challenge in my Angular form where I need to disable certain fields. The issue arises from the fact that many of the HTML tags used are customized, making it difficult to simply use the disabled attribute. To address this, I have opted ...
After running this script, I observed that there are 20 repetitions of the <button> tags. <?php for ($i = 1; $i <= 20; $i++) { ?> <button id="btn-<?php echo $i;?>">Button<?php echo $i;?></button> <script t ...
I'm currently working on making an ajax call to an API, but I keep encountering an error whenever I try to make the call. I've been troubleshooting this for hours and I can't seem to figure out what the issue is. At one point, I even removed ...
Looking for help with navigating rows on a Kendo-Grid. I have four Buttons - First, Previous, Next, and Last. The goal is to highlight the selected record on the grid when a button is clicked. However, I'm struggling with making the Kendo-Grid highlig ...
I encountered an error within my vue single file component: Errors compiling template: invalid expression: Unexpected token { in {{ jobs[0].build_link }} Raw expression: v-bind:href="{{ jobs[0].build_link }}" The complete code causing the is ...
Issue with Styling Material Ui Drawer Using Styled Components In my application, I am utilizing a Material ui drawer in conjunction with Styled components. Although I have successfully styled several simple Material ui components using Styled components a ...
I created a shiny app with a specific layout on my desktop computer that fits perfectly on the screen. However, when I run the app on my notebook, only the top left boxes are visible, making the app too large for the screen. Even after resizing with Ctrl ...
I am working with data stored in firebase, utilizing a flat structure with key-value pairs to establish a many-to-many relationship between events and users (see figure 1). While it's straightforward to look up events associated with a user using pure ...
I have implemented Bootstrap's Buttons plugin to toggle the state of a custom checkbox. When the button is toggled on, a hidden element should appear at the top of the page and then the page should scroll to the top. Similarly, when the button is togg ...