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)
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>
|
