How do you fade-in a specific table on a page?

**oboildeo** · 05-12-2008, 03:11 PM

First of all I apologize if this is considered a crosspost. I asked this question as a reply in another thread last week but wasn't sure if it would get noticed.

Basically I was using this code to fade in a specific table on a page by placing the div tags directly before and after the table code:

Code:

<html>
<head>
<meta http-equiv="Page-Enter" content="blendTrans(Duration=3.0)">
<script type="text/javascript">
function fadeInPage(){
if (document.getElementById("fadeDiv").style.MozOpacity < 1){
document.getElementById("fadeDiv").style.MozOpacity = .1 + Math.abs(document.getElementById("fadeDiv").style.MozOpacity)
setTimeout("fadeInPage()",200);
}
else
document.getElementById('fadeDiv').style.visibility = "visible";
}
</script>
</head>

<body onLoad="fadeInPage()">

<DIV ID="fadeDiv" style="-moz-opacity:0.00; width:100%">
Welcome to my Homepage!
</DIV>

</body>
</html>

It did what I wanted, the main page loaded normally and the specified table faded in. However it didn't work in safari, so I updated the code to this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<meta http-equiv="Page-Enter" content="blendTrans(Duration=3.0)">
<!-- NOTE: Above meta tag required for IE page transition, adjust duration (in seconds) as desired -->
<title>Fade-In Page Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* Style for Fade-In Page script */
#fadeDiv {
display:none;
}
/* End Style for Fade-In Page script */
</style>
<script type="text/javascript">

/* Fade-In Page script ©2008 John Davenport Scheuer
   As first seen in http://www.dynamicdrive.com/forums/
   username:jscheuer1 - This credit must remain for legal use.
   */

fadeInPage.speed=50; //Set speed of transition for non-IE, lower numbers are faster, 20 is the minimum safe value
fadeInPage.bg='#fff'; //Set backgroud style (color or color and image) of transition division for non-IE, should match page background or the predominant color of the page

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

function fadeInPage(){
var el=document.getElementById("fadeDiv");
el.style[fadeInPage.prprt] = el.style[fadeInPage.prprt] == ''? 1 : el.style[fadeInPage.prprt];
if (el.style[fadeInPage.prprt] > 0){
el.style[fadeInPage.prprt] = el.style[fadeInPage.prprt] - 0.02;
setTimeout("fadeInPage()", fadeInPage.speed);
}
else {
el.style[fadeInPage.prprt] = 0;
if(document.removeChild)
el.parentNode.removeChild(el);
}
}
if(document.documentElement&&document.documentElement.style){
fadeInPage.d=document.documentElement, fadeInPage.t=function(o){return typeof fadeInPage.d.style[o]=='string'};
fadeInPage.prprt=fadeInPage.t('opacity')? 'opacity' : fadeInPage.t('MozOpacity')? 'MozOpacity' : fadeInPage.t('KhtmlOpacity')? 'KhtmlOpacity' : null;
}
fadeInPage.set=function(){
var prop=fadeInPage.prprt=='opacity'? 'opacity' : fadeInPage.prprt=='MozOpacity'? '-moz-opacity' : '-khtml-opacity';
document.write('\n<style type="text/css">\n#fadeDiv {\nheight:'+window.innerHeight+'px;display:block;position:fixed;'+
'z-index:10000;top:0;left:0;background:'+fadeInPage.bg+';width:100%;\n'+ prop +':1;\n}\n<\/style>\n');
}
if(window.addEventListener&&fadeInPage.prprt){
fadeInPage.set();
window.addEventListener('load', fadeInPage, false);
}
</script>
</head>
<body>
<div id="fadeDiv"></div>
<div>
Welcome to my Homepage!
</div>

</body>
</html>

This worked in all the browsers I tried but no matter where I placed the div tags it would fade-in the entire page, not just the table. Is there a way to target a table with this code? or if I revert to the older code, is there a way to automatically direct safari users to a safer version of the page? Thanks.

**jscheuer1** · 05-13-2008, 04:19 AM

I saw that other post, and wasn't inclined to respond because you appeared to be misunderstanding a bit of what was going on and I wasn't sure I could clarify things for you.

One thing, the scripts are both for an entire page, and in IE use a page transition, so in that browser both always fade the entire page anyway.

Another, in recent Opera and IE versions you cannot fade single elements containing text directly via opacity changes without losing the text's anti-aliasing qualities.

That's why I switched from fading in an element that contained the page to fading out a fixed position blank element which covered the window. Except in IE, whose earlier versions didn't do fixed position, so I stuck with the page transition for IE. Other browsers don't do page transitions.

It's a little more complicated than that when it comes to doing this just for a table, say - or another individual element, because now we must use IE's fading filter for IE and it is different in different versions of IE. Fortunately we no longer even want fixed positioning, but will now have to nest an absolutely positioned cover element inside a relatively positioned one that also contains the element that we want to fade in. And we will have to match up the dimensions of the container, the cover and the element we are covering.

With all that in mind, here is a demo:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<title>Fade-In Element Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* Style for Fade-In Page script */
#fadeDivContainer {
position:relative;
width:200px;
}
#fadeDivCover {
display:none;
width:200px;
height:100%;
}
/* End Style for Fade-In Page script */
</style>
<!--[if lte IE 6]>
<style type="text/css">
#fadeDivCover { /* Required for full Coverage in these browsers */
height:expression(this.parentNode.offsetHeight+'px');
}
</style>
<![endif]-->
<script type="text/javascript">

/* Fade-In Element script ©2008 John Davenport Scheuer
   As first seen in http://www.dynamicdrive.com/forums/
   username:jscheuer1 - This credit must remain for legal use.
   */

fadeInEl.speed=50; //Set speed of transition, lower numbers are faster, 20 is the minimum safe value
fadeInEl.bg='#fff'; //Set backgroud style (color or color and image) of transition division, should match page background or the predominant color of the page


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

function fadeInEl(){
var el=document.getElementById("fadeDivCover");
if(!fadeInEl.ie&&typeof fadeInEl.ie!='number')
el.style[fadeInEl.prprt] = el.style[fadeInEl.prprt] == ''? 1 : el.style[fadeInEl.prprt];
else if(!fadeInEl.ie6&&typeof fadeInEl.ie!='number')
fadeInEl.ie=100;
if(fadeInEl.ie6 && el.filters[0].opacity > 0){
el.filters[0].opacity = el.filters[0].opacity -2;
setTimeout("fadeInEl()", fadeInEl.speed);
}
else if(typeof fadeInEl.ie=='number'&&(fadeInEl.ie-=2 > 0)){
el.style.filter='alpha(opacity='+fadeInEl.ie+')';
setTimeout("fadeInEl()", fadeInEl.speed);
}
else if (el.style[fadeInEl.prprt] > 0){
el.style[fadeInEl.prprt] = el.style[fadeInEl.prprt] - 0.02;
setTimeout("fadeInEl()", fadeInEl.speed);
}
else {
if(fadeInEl.ie6)
el.filters[0].opacity = 0;
else if(typeof fadeInEl.ie=='number')
el.style.filter='alpha(opacity=0)';
else
el.style[fadeInEl.prprt] = 0;
if(document.removeChild)
el.parentNode.removeChild(el);
}
}
if(document.documentElement&&document.documentElement.style){
fadeInEl.ieApproved=false, fadeInEl.d=document.documentElement, fadeInEl.t=function(o){return typeof fadeInEl.d.style[o]=='string'}; 
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
try {fadeInEl.ieApproved=fadeInEl.d.filters;} catch(e) {fadeInEl.ieApproved=false;}
@end @*/
if(fadeInEl.ieApproved)
document.write('<span id="ie_test" style="filter:progid:DXImageTransform.Microsoft.alpha(opacity=0);position:absolute;top:-1000px;">p<\/span>');
fadeInEl.ie=fadeInEl.ieApproved&&ie_test.filters[0], fadeInEl.ie6=fadeInEl.ie&&typeof ie_test.filters[0].opacity=='number',
fadeInEl.prprt=fadeInEl.t('opacity')||fadeInEl.ie6? 'opacity' : fadeInEl.t('MozOpacity')? 'MozOpacity' : fadeInEl.t('KhtmlOpacity')? 'KhtmlOpacity' : null;
}
fadeInEl.set=function(){
var prop=fadeInEl.prprt=='opacity'? 'opacity' : fadeInEl.prprt=='MozOpacity'? '-moz-opacity' : '-khtml-opacity';
document.write('\n<style type="text/css">\n#fadeDivCover {\ndisplay:block;'+
'position:absolute;z-index:10000;top:0;left:0;background:'+fadeInEl.bg+';\n'+
(fadeInEl.ie? 'filter:progid:DXImageTransform.Microsoft.alpha(opacity=100)' : prop +':1')+';\n}\n<\/style>\n');
}

if((window.attachEvent||window.addEventListener)&&(fadeInEl.prprt||fadeInEl.ie)){
fadeInEl.set();
if(window.addEventListener)
window.addEventListener('load', fadeInEl, false);
else
window.attachEvent('onload', fadeInEl);
}
</script>
</head>
<body>
<div id="fadeDivContainer">
<div id="fadeDivCover"></div>
<table width=200>
<tr>
<td align=center>Welcome to my Homepage!</td>
</tr>
</table>                           
</div>
<div>
Other Stuff
</div>
</body>
</html>

If you have questions, just ask.

**oboildeo** · 05-13-2008, 01:35 PM

John, this worked beautifully! I am new to this and generally misunderstand more than i understand, but you straightened it out for me. Thanks!

Thread: How do you fade-in a specific table on a page?

Thread Tools

Search Thread

How do you fade-in a specific table on a page?

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

Bookmarks

Bookmarks

Posting Permissions