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

Adding Drop-down Effects to DHTML Popups

We learnt how to fade in popups, now we will make the popups to fall from the top of the page to the bottom. To demonstrate, we will use the popup explained in the "Styling DHTML/Ajax Popups" lesson:

<script type='text/javascript'>
var bottom = 0;
var padding = 5;
var X = 5;
var Y = 0;

function dropMyPopup() {
 Y++;
 if( Y > bottom ) return;
 document.getElementById("styled_popup").style.top = Y + "px";
 setTimeout("dropMyPopup()", 25);
}

function fireMyPopup() {
 var scrolledY;
 if( self.pageYOffset ) {
   scrolledY = self.pageYOffset;
 } else if( document.documentElement && document.documentElement.scrollTop ) {
   scrolledY = document.documentElement.scrollTop;
 } else if( document.body ) {
   scrolledY = document.body.scrollTop;
 }

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

 // Don't forget to subtract popup's height! ( 300 in our case )

 bottom = scrolledY + centerY - padding - 300;
 Y = scrolledY;

 document.getElementById("styled_popup").style.right = X + "px";
 document.getElementById("styled_popup").style.display = "block";
 dropMyPopup();
}

function styledPopupClose() {
 document.getElementById("styled_popup").style.display = "none";
 Y = bottom; // if it was closed, make sure extra computations are done in dropMyPopup() }
</script>

<div id='styled_popup' name='styled_popup' style='width: 380px; height: 300px; display:none; position: absolute; z-index: 100'>
<table width='380' cellpadding='0' cellspacing='0' border='0'>
<tr>
<td><img height='23' width='356' src='media/x11_title.gif'></td>
<td><a href='javascript:styledPopupClose();'><img height='23' width='24' src='media/x11_close.gif'
border='0'></a></td>
</tr>
<tr><td colspan='2' style='background: url("media/x11_body.gif") no-repeat top left; width: 380px; height: 277px;'>
I'm falling down!!
</td></tr>
</table>
</div>

<input type='submit' onClick='fireMyPopup()' value=' Fire! '>

OK, now let's see the falling popup in action.

You can customize the functions above to work as you want. If you want a faster speed, lower the delay in miliseconds passed as an argument to the setTimeout() function. If you want different a different align (to the left hand side), alter the fireMyPopup() function in order to set variable X to define the margin from the left side, not right as it is in our sample.

As you can note, if you scroll down the page the popup doesn't update its stop position. I will leave this as an exercise to you and provide you a tip: use the onScroll property of the body element to set a function that will recompute the end position.

Now let's see how we can code our popup to slide in from a side not from the top.

Copyright © 2006 Ciprian Dosoftei. All rights reserved.