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

Adding Fade Effects to DHTML Popups

The sudden appearence of our DHTML popups can be enhanced with fade effects, fade in for display and fade out for closing. These effects are usually combined with delayed self-opening popups. The development for our fade effects sample will continue the example from the "Styling DHTML Popups" lesson.

First of all, we will use the opacity property of modern browsers (or filter in MS Internet Explorer syntax). We made a function called setOpacity() which will set the two properties to insure our script will be cross browser. The two fade functions (fadeInMyPopup and fadeOutMyPopup()) will call the previous function with specified delay in order to make the fade effect visible. The higer the value for the delay, the slower the fade and vice-versa. Our speed factor in this sample is 8.

<script type='text/javascript'>

// Browser safe opacity handling function

function setOpacity( value ) {
 document.getElementById("styled_popup").style.opacity = value / 10;
 document.getElementById("styled_popup").style.filter = 'alpha(opacity=' + value * 10 + ')';
}

function fadeInMyPopup() {
 for( var i = 0 ; i <= 100 ; i++ )
   setTimeout( 'setOpacity(' + (i / 10) + ')' , 8 * i );
}

function fadeOutMyPopup() {
 for( var i = 0 ; i <= 100 ; i++ ) {
   setTimeout( 'setOpacity(' + (10 - i / 10) + ')' , 8 * i );
 }

 setTimeout('closeMyPopup()', 800 );
}

function closeMyPopup() {
 document.getElementById("styled_popup").style.display = "none"
}

function fireMyPopup() {
 setOpacity( 0 );
 document.getElementById("styled_popup").style.display = "block";
 fadeInMyPopup();
}
</script>

<div id='styled_popup' name='styled_popup' style='width: 380px; height: 300px; display:none; position: absolute; top: 50px; left: 50px; zoom: 1'>
<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:fadeOutMyPopup();'><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;'>
Hey, look at me!<br>
I'm fading :-)
</td></tr>
</table>
</div>

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

Time for testing now, focus you eyes in the left hand side of the screen as it is now :-)

If you want a faster effect replace the 8 factor in the fade functions with a smaller number. Do not also to reduce the delay for the closeMyPopup() function in fadeOutMyPopup() to the new factor * 100. If you like the popup not to fade in totally, only partially, you will need to change the limit in the for cycles from the fade functions. For 90% permanent transparency, set the limit to 90 and so on.

The next lesson focuses on a popups that fall from the top of the page to the bottom: "Drop-down DHTML Popups".

Copyright © 2006 Ciprian Dosoftei. All rights reserved.