Showing a Div after a designated time of page loading: A simple guide

Question

Showing a Div after a designated time of page loading: A simple guide

While I have a good understanding of CSS, Javascript is still new territory for me. I could use some guidance on the following task.

My goal is to display a fixed div at the bottom of the screen, but I only want it to appear after a specific delay, say 10 seconds. How can I achieve this using the code below?

CSS

.bottomdiv
{
   position: absolute;
   left:    0;
   right:   0;
   z-index : 100;
   filter : alpha(opacity=100);
   POSITION: fixed;
   bottom: 0;
}

HTML

<div class="bottomdiv">
    <iframe src="http://example.com" width="990" height="110" scrolling="no"></iframe>
 </div>

Your assistance would be greatly appreciated. Thank you.

javascript jquery html css

Answer 1

Answer №1

If you have the jQuery tag in your question, chances are you're utilizing jQuery. Here's a handy snippet for that:

// Execute this code when the DOM is fully loaded:
$(document).ready(function(){
   // Add a 10-second delay before executing the action
   setTimeout(function(){
      // Show the div with the class "bottomdiv"
      $(".bottomdiv").show();
   }, 10000);
});

Don't forget to include the "display: none;" property in your div's CSS class.

Answer 2

If you have the jQuery tag in your question, chances are you're utilizing jQuery. Here's a handy snippet for that:

// Execute this code when the DOM is fully loaded:
$(document).ready(function(){
   // Add a 10-second delay before executing the action
   setTimeout(function(){
      // Show the div with the class "bottomdiv"
      $(".bottomdiv").show();
   }, 10000);
});

Don't forget to include the "display: none;" property in your div's CSS class.

Answer 3

Answer №2

To delay a function in JavaScript, use Timeout. I have set it to run after 5 seconds. Here is a working example on JSFiddle. It's recommended to add or remove classes for these types of activities:
Check out the fiddle
HTML

  <div class="bottomdiv hide" id="footer">
   <iframe src="http://example.com" width="990" height="110"  scrolling="no"></iframe>
  </div>

CSS

.bottomdiv
{
 position: absolute;
 left:    0;
 right:   0;
 z-index : 100;
 filter : alpha(opacity=100);
 POSITION: fixed;
 bottom: 0;
}
.hide {
 display: none;
}

JS

setTimeout(function(){
 document.getElementById('footer').classList.remove('hide');
}, 5000);

Answer 4

To delay a function in JavaScript, use Timeout. I have set it to run after 5 seconds. Here is a working example on JSFiddle. It's recommended to add or remove classes for these types of activities:
Check out the fiddle
HTML

  <div class="bottomdiv hide" id="footer">
   <iframe src="http://example.com" width="990" height="110"  scrolling="no"></iframe>
  </div>

CSS

.bottomdiv
{
 position: absolute;
 left:    0;
 right:   0;
 z-index : 100;
 filter : alpha(opacity=100);
 POSITION: fixed;
 bottom: 0;
}
.hide {
 display: none;
}

JS

setTimeout(function(){
 document.getElementById('footer').classList.remove('hide');
}, 5000);

Answer 5

Answer №3

To make some modifications in your css, consider the following adjustments:

.footer-section{
   left:    0;
   right:   0;
   z-index : 100;
   filter : alpha(opacity=100);
   position: fixed;
   bottom: 0;
   display: none
}

Additionally, as per recommendations from my acquaintance, reveal the div after 10 seconds using JavaScript:

$(document).ready(function(){
   setTimeout(function(){
      $(".footer-section").show();
    }, 10000);
});

Answer 6

To make some modifications in your css, consider the following adjustments:

.footer-section{
   left:    0;
   right:   0;
   z-index : 100;
   filter : alpha(opacity=100);
   position: fixed;
   bottom: 0;
   display: none
}

Additionally, as per recommendations from my acquaintance, reveal the div after 10 seconds using JavaScript:

$(document).ready(function(){
   setTimeout(function(){
      $(".footer-section").show();
    }, 10000);
});

Answer 7

Answer №4

Here's an example that demonstrates how to show a hidden element using vanilla JavaScript, without relying on jQuery:

<!DOCTYPE html>
<html>
<body>
    <div id='example' style='display:none'>Click me</div>

    <script>
        window.onload = function () {
            setTimeout(showElement, 5000);
        }
        
        function showElement() {
            document.getElementById('example').style.display= "block";
        }
    </script>

</body>
</html>

Answer 8

Here's an example that demonstrates how to show a hidden element using vanilla JavaScript, without relying on jQuery:

<!DOCTYPE html>
<html>
<body>
    <div id='example' style='display:none'>Click me</div>

    <script>
        window.onload = function () {
            setTimeout(showElement, 5000);
        }
        
        function showElement() {
            document.getElementById('example').style.display= "block";
        }
    </script>

</body>
</html>

Showing a Div after a designated time of page loading: A simple guide

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Utilize Vue 3 for setting up reactive fetching with asynchronous JSON handling

The usage of $('').switchClass in IE8 may cause an error when the switched class includes a color property

Understanding the implementation of public and private methods in mixins in Vue2

Tips for creating multiple diagonal lines with CSS and HTML

Can the position of the popover be customized using the right and top properties?

Utilizing the state as a condition within the useEffect to update the component

How to use puppeteer to extract images from HTML that have alt attributes

Having trouble with JQuery's .prop function not unchecking a checkbox?

struggling to get the basic .gif loader to function properly

jQuery-powered web application, experiencing compatibility issues when deployed on Windows Server 2003 and Internet Explorer

What is the best way to eliminate the white space between two sections?

What is preventing me from modifying the input file name in PHP?

When attempting to send data from Ajax to PHP as JSON, an error occurs and the data transmission fails

Sending arguments to Angular UI router template

css based on the current time in the United States

`Can controllers be included in route or template definitions?`

Exploring the gridview with JQuery to iterate through and verify if any checkboxes have been selected

Loading default values into HTML/Jade in an Express/node.js web application

The perplexing configuration of a webpack/ES6 project

Three.js fails to render Blender model