Mouseover fade in table

**Esbersen** · 05-17-2008, 02:05 PM

Hey..

Is it possible to make a table, that's transperant when page is loaded, but fades in the content of the table when is moused over?

Hope you guys understand what I'm trying to do..

//Esbersen

**kuau** · 05-18-2008, 12:20 AM

What is in the table? Fades are usually done with images (I think). If it is a photo of a table of "whatever", then you could probably get the effect with some of the DD javascripts; otherwise, Flash.

And it is quite likely I have no idea what you are talking about, just like the other 32 people who looked at this with no comment. At least I tried.

**jscheuer1** · 05-18-2008, 02:15 AM

My post here:

http://www.dynamicdrive.com/forums/s...31&postcount=2

has a javascript approach to this that could be adapted to onmouseover. It was originally designed for onload. Would you want the table to also fade out onmouseout?

You cannot do a gradual fade in or out in HTML alone.

**Esbersen** · 05-18-2008, 12:22 PM

I hoped you could push me in the right direction, and I surely have been. I want to check your coding again, scheuer. It looks usable. A fade out on mouseout would be great as well.. Thanks for the answers!

**jscheuer1** · 05-18-2008, 02:45 PM

Actually, as I looked at it, that code which was cut down and modified from my:

http://home.comcast.net/~jscheuer1/s...eset_write.htm

Isn't really up to this challenge. So I went back to the source, so to speak, and came up with this mod which does work out:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<title>Fade-In/Out Element Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* Style for Fader script */
#fadeDivContainer {
position:relative;
width:200px; /* will generally constrain the width of the element you are covering, can be set to that element's width */
margin:0 auto;
}
#fadeDivCover {
display:none;
width:200px; /* Set to width of container */
height:100%; /* Leave as 100% for full coverage */
background-color:#fff; /* Set to covered element's background, may use full background styles including image */
}
/* End Style for Fader script */
</style>
<script type="text/javascript">

/* Cross Browser Fader © 2008 John Davenport Scheuer
   This comment must remain for Legal Use  */

var faders=[];
// Preset each element's initial opacity (0 to 100):
// ex:  faders[x]=['element_id', initial_opacity, optional_extend_coverage_IE6_and_less];
faders[0]=['fadeDivCover', 100, true];

////////////// Stop Editing //////////////

function fade(el, way, op, opinc, speed, cover){
if(!fade.prprt&&!fade.ie)
return;
var id=typeof el=='string'? el : el.id; el=typeof el=='object'? el : document.getElementById(el);
clearTimeout(fade[id+'timer']);
var op_obj=fade.ie6? el.filters[0] : el.style,
waym=way=='in'? 1 : -1; speed=speed? speed*1 : 30, opinc=opinc&&opinc>=1? opinc*(fade.ie? 1 : .01) : opinc? opinc : fade.ie? 5 : .05,
op=op&&fade.ie? op*1 : op&&op*1>=1? Math.min(op*.01, .99) : op? op : waym>0&&fade.ie? 100 : waym>0? .99 : 0;
if(!fade.ie6&&!fade[id+'yet']){
if(fade.prprt)
op_obj[fade.prprt]=Math.min(fade.preset(id)*.01, .99);
else if(fade.ie)
op_obj.filter='alpha(opacity='+fade.preset(id)+')';
fade[id+'yet']=true;
}
if(fade.prprt&&Math.abs(op*1-op_obj[fade.prprt]*1)<opinc)
op_obj[fade.prprt]=op;
else if(fade.prprt)
op_obj[fade.prprt]=fade.ie6? op_obj[fade.prprt]*1 + opinc*waym : Math.min(op_obj[fade.prprt]*1 + opinc*waym, .99);
else if (fade.ie&&Math.abs(op*1 - op_obj.filter.replace(/\D/g,'')*1)<opinc)
op_obj.filter='alpha(opacity='+op+')';
else if (fade.ie)
op_obj.filter='alpha(opacity='+[op_obj.filter.replace(/\D/g,'')*1 + opinc*waym]+')';
else
return;
el.style.display=cover&&way=='out'&&op_obj[fade.prprt]<=0||(op_obj.filter&&op_obj.filter.replace(/\D/g,'')*1<=0)? 'none' : 'block';
if(op_obj[fade.prprt]&&op_obj[fade.prprt]*waym<op*waym||!fade.ie6&&fade.ie&&op_obj.filter.replace(/\D/g,'')*waym<op*waym)
fade[id+'timer']=setTimeout(function(){fade(el, way, op, opinc, speed, cover)}, speed);
}
if(document.documentElement&&document.documentElement.style){
/*@cc_on @*/ /*@if(@_jscript_version >= 5)try{fade.ieOK=document.documentElement.filters;}catch(e){fade.ieOK=false}; @end @*/
fade.d=document.documentElement, fade.t=function(o){return typeof fade.d.style[o]=='string'}; if(fade.ieOK)
document.write('<span id="ie_test" style="filter:progid:DXImageTransform.Microsoft.alpha(opacity=0);position:absolute;top:-1000px;">p<\/span>');
fade.ie=fade.d.filters&&ie_test.filters[0], fade.ie6=fade.ie&&typeof ie_test.filters[0].opacity=='number',
fade.prprt=fade.t('opacity')||fade.ie6? 'opacity' : fade.t('MozOpacity')? 'MozOpacity' : fade.t('KhtmlOpacity')? 'KhtmlOpacity' : null;
}
fade.set=function(){
var prop=fade.prprt=='opacity'? 'opacity' : fade.prprt=='MozOpacity'? '-moz-opacity' : '-khtml-opacity';
document.write('\n<style type="text/css">\n')
for (var i = 0; i < faders.length; i++){
fade[faders[i][0]+'timer']=0;
document.write('#'+faders[i][0]+' {\n'+
(fade.ie? 'filter:progid:DXImageTransform.Microsoft.alpha(opacity='+faders[i][1]+')' : prop+':'+Math.min(faders[i][1]*.01, .99))+';display:block;'+
'position:absolute;z-index:10000;top:0;left:0;\n}\n');
document.write('<\/style>\n')
}
}
fade.preset=function(id){
for (var i = 0; i < faders.length; i++)
if (id==faders[i][0])
return faders[i][1];
return 0;
}
if(fade.prprt||fade.ie)
fade.set();
fade.getHeightIe6AndLess=function(el){
var b = isNaN(b=parseInt(el.parentNode.currentStyle.borderWidth)*2)? 0 : b;
return el.parentNode.offsetHeight-b+'px';
}
if(fade.ieOK && navigator.appVersion.replace(/^.*MSIE (\d).*$/, '$1') < 7) /* Required for full Coverage in IE 5.5 to 6 browsers */
for (var i = faders.length-1; i > -1; --i)
if(faders[i][2])
document.write('<!--[if lte IE 6]><style type="text/css">#'+faders[i][0]+
' { height:expression(fade.getHeightIe6AndLess(this));}<\/style><![endif]-->');
</script>

</head>
<body>
<div style="text-align:center;">
<div id="fadeDivContainer" style="text-align:left;border:1px solid gray;" 
onmouseover="fade('fadeDivCover', 'out', '', '', 50, true);" 
onmouseout="fade('fadeDivCover', 'in', '', '', 50, true);">
<div id="fadeDivCover"></div>
<table width=200 align=center>
<tr>
<td align=center>Welcome to My Homepage!</td>
</tr>
<tr>
<td align=center><a href="http://www.google.com/">Have a Look Around</a></td>
</tr>
</table>                           
</div>
</div>
<div>
Other Stuff
</div>
</body>
</html>

**Esbersen** · 05-18-2008, 08:19 PM

Really great job, John.. Thank you, thank you. I think that says it all

**kuau** · 05-18-2008, 09:11 PM

This is such an interesting effect done in such an ingenious way. Kudos to John once again. The suspense is killing me... Eberson, I would love to see where you are using it. Please? Thanks, erin

Thread: Mouseover fade in table

Thread Tools

Search Thread

Mouseover fade in table

The Following User Says Thank You to kuau For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions