CoderZone.org

Category: >> JavaScript >> Javascript "Fade In On Click" Bookmark and Share

<< lastnext >>

Snippet Name: Javascript "Fade In On Click"

Description: Fade in any element (text, image, controls, etc) on a click event. Uses a smooth browser-safe opacity handling function.

Comment: (none)

Author: CoderZone
Language: JAVASCRIPT
Highlight Mode: JAVASCRIPT
Last Modified: February 27th, 2009

<html>
<head>
</head>
<body>
 
<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.visibility = "hidden"
}
 
function fireMyPopup() {
 setOpacity( 0 );
 document.getElementById("styled_popup").style.visibility = "visible";
 fadeInMyPopup();
}
</script>
 
 
<p>
 
<table id='styled_popup' name='styled_popup' style='width: 380px; height: 200px; visibility:hidden; zoom: 1' bgcolor="#ffffdd" cellpadding='0' cellspacing='0' border='0'>
<tr><td style='width: 380px; height: 200px;'>
Hey, look at me!<br>
I'm fading :-)
</td></tr>
</table>
 
<input type='submit' onClick='fireMyPopup()' value=' Fire! '>
 
</body>
</html>
 
 
 
 
There haven't been any comments added for this snippet yet. You may add one if you like.  Add a comment 
© coderzone.org | users online: 7