Home   |   The Basics   |   Using Delays   |   Movable Popups   |   Adding Fade Effects   |   Drop-down Effects   |   Slide In   |   Tips & Tricks

Using Delays to Control DHTML Popups

In all past examples all our popups were triggered by clicking various buttons. JavaScript is strong enough to implement different events, in our particular case, timed events. We can control both the dispay time and the close time.

The JavaScript function we will make use of is setTimeout(). It takes two arguments, a delay in miliseconds and a function that will be excuted after the specified delay.

For exemplification, this page displays a centred popup after 15 seconds after the page is completly loaded:

<script type='text/javascript'>
function closeMyPopup() {
 document.getElementById("mypopup").style.display = "none";
}

function myPopupRelocate() {
 var scrolledX, scrolledY;
 if( self.pageYOffset ) {
   scrolledX = self.pageXOffset;
   scrolledY = self.pageYOffset;
 } else if( document.documentElement && document.documentElement.scrollTop ) {
   scrolledX = document.documentElement.scrollLeft;
   scrolledY = document.documentElement.scrollTop;
 } else if( document.body ) {
   scrolledX = document.body.scrollLeft;
   scrolledY = document.body.scrollTop;
 }

 var centerX, centerY;
 if( self.innerHeight ) {
   centerX = self.innerWidth;
   centerY = self.innerHeight;
 } else if( document.documentElement && document.documentElement.clientHeight ) {
   centerX = document.documentElement.clientWidth;
   centerY = document.documentElement.clientHeight;
 } else if( document.body ) {
   centerX = document.body.clientWidth;
   centerY = document.body.clientHeight;
 }

 var leftOffset = scrolledX + (centerX - 250) / 2;
 var topOffset = scrolledY + (centerY - 200) / 2;

 document.getElementById("mypopup").style.top = topOffset + "px";
 document.getElementById("mypopup").style.left = leftOffset + "px";
}

function fireMyPopup() {
 myPopupRelocate();
 document.getElementById("mypopup").style.display = "block";
 document.body.onscroll = myPopupRelocate;
 window.onscroll = myPopupRelocate;
 window.setTimeout("closeMyPopup()", 10000);
}

document.body.onload = window.setTimeout("fireMyPopup()", 15000);
</script>

<div id='mypopup' name='mypopup' style='position: absolute; width: 250px; height: 200px; display: none; background: #ddd; border: 1px solid #000;'>
<p>My content that will be displayed in the popup</p>
<p>We placed no close button since it will auto-close in 10 seconds</p>
</div>

This example used delays both for displaying the popup and closing it. You can use these timed events only for one action, of course, and the other one to be triggered by a button pressing event.

Here ends our single lesson chapter. In the next chapter we will learn how to make the DHTML popups movable within the browser window, just like any other regular window or dialog box.

Privacy Policy | Copyright © 2010 WebArticles.org. All rights reserved. London Travel Deals.