...

View Full Version : table background fade in



pooski
07-06-2005, 12:37 PM
Sorry if this have been already posted somewhere, I've tried whole day to find a solution for this:
I need to fade in table background when the page is loaded. Is there anyway to do this?

vwphillips
07-06-2005, 01:50 PM
I Think

make the table with no background color

place a div (same size as table) under table and fade the div

say if you need a hand with implementation

vwphillips
07-06-2005, 02:33 PM
did it anyway




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
var zxcSpeed=1;
var zxcDelay=1000;
var zxcCnt=0;

var zxcIB,zxcLink,zxcCnt,zxcTO;
var zxcBGAry=new Array();

function zxcTableBG(){
zxctbls=document.getElementsByTagName('BODY')[0].getElementsByTagName('TABLE');
for (zxc0=0;zxc0<zxctbls.length;zxc0++){
zxcBGAry[zxc0]=document.createElement('DIV');
document.getElementsByTagName('BODY')[0].appendChild(zxcBGAry[zxc0]);
zxcBGAry[zxc0].style.position='absolute';
zxcBGAry[zxc0].style.zIndex=0;
zxcBGAry[zxc0].style.width=zxctbls[zxc0].offsetWidth+'px';
zxcBGAry[zxc0].style.height=zxctbls[zxc0].offsetHeight+'px';
zxcBGAry[zxc0].style.top=(zxcPos(zxctbls[zxc0])[1])+'px';
zxcBGAry[zxc0].style.left=(zxcPos(zxctbls[zxc0])[0])+'px';
zxcOpacity(zxcBGAry[zxc0],0);
zxcBGAry[zxc0].style.backgroundColor='red';
zxctbls[zxc0].style.position='relative';
zxctbls[zxc0].style.zIndex=1;
}
zxcCnt=0;
zxcFade();
}

function zxcFade(){
for (zxc0=0;zxc0<zxcBGAry.length;zxc0++){
zxcOpacity(zxcBGAry[zxc0],zxcCnt);
}
zxcCnt+=zxcSpeed;
if (zxcCnt>0){ zxcTO=setTimeout("zxcFade()",10); }
else {
for (zxc0=0;zxc0<zxcBGAry.length;zxc0++){
zxcOpacity(zxcBGAry[zxc0],100);
}
}
}

function zxcOpacity(obj,op) {
if (obj.style.MozOpacity!=null){ obj.style.MozOpacity=(op/100)-.001; }
else if (obj.style.opacity!=null){ obj.style.opacity=(op/100)-.001; }
else if (obj.style.filter!=null){ obj.style.filter = 'alpha(opacity='+op+')'; }
}


function zxcPos(zxc){
zxcObjLeft = zxc.offsetLeft;
zxcObjTop = zxc.offsetTop;
while(zxc.offsetParent!=null){
zxcObjParent=zxc.offsetParent;
zxcObjLeft+=zxcObjParent.offsetLeft;
zxcObjTop+=zxcObjParent.offsetTop;
zxc=zxcObjParent;
}
return [zxcObjLeft,zxcObjTop];
}




//-->
</script>


<body onload="zxcTableBG();" >

<center>

<table width="300" height="300" border="1" >
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>

<table width="200" height="200" border="1" >
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</center>
</body>

</html>

pooski
07-08-2005, 07:41 AM
thank you so much!!

glenngv
07-08-2005, 10:04 AM
make the table with no background color

place a div (same size as table) under table and fade the div
Why do you need to create a div when you can set the background color of a table and fade it? :confused:

In your solution, when the window is resized, the div's position would not coincide anymore with that of the table.

Here's the fix.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
var zxcSpeed=1;
var zxcCnt=0;
var zxcTO;

function zxcTableBG(){
zxcCnt=0;
var tbls = document.getElementsByTagName('table');
for (var i=0;i<tbls.length;i++){
zxcFade(tbls[i]);
}
}

function zxcFade(what){
zxcOpacity(what,zxcCnt);
zxcCnt+=zxcSpeed;
if (zxcCnt>0){
zxcTO=setTimeout(function(){zxcFade(what)},10); }
else {
zxcOpacity(what,100);
}
}

function zxcOpacity(obj,op) {
if (obj.style.MozOpacity!=null){ obj.style.MozOpacity=(op/100)-.001; }
else if (obj.style.opacity!=null){ obj.style.opacity=(op/100)-.001; }
else if (obj.style.filter!=null){ obj.style.filter = 'alpha(opacity='+op+')'; }
}

//-->
</script>


<body onload="zxcTableBG();" style="background-color:white">

<center>

<table width="300" height="300" border="1" style="background-color:red">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>

<table width="200" height="200" border="1" style="background-color:red">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</center>
</body>

</html>

vwphillips
07-08-2005, 11:49 AM
Why do you need to create a div when you can set the background color of a table and fade it?


BECAUSE pooski ASKED FOR THE BACKGROUND TO BE FADED NOT THE TABLE


I presume pooski knows about resizing

glenngv
07-08-2005, 12:07 PM
BECAUSE pooski ASKED FOR THE BACKGROUND TO BE FADED NOT THE TABLE

Which background? :confused:


I need to fade in table background

pooski
07-08-2005, 12:34 PM
thanks glenn for your reply. I really meant to fade the table. I found my way though already, so thanks to you both really much.

pooski
07-08-2005, 12:45 PM
hmmm now that I tested it.. the method glenn used doensn't seem to work with firefox. It works fine with IE.

glenngv
07-08-2005, 01:18 PM
Enclose the table inside the div.


<div>
<table ...>
...
</table>
</div>

Jackyboy
11-03-2006, 03:14 PM
I'm way over my head here, and I am only a copy/paste coder, which is really no coder at all. Anyway, I have been trying to find a way to create subtle multiple color changes in the background of a table that will work in IE. I tried animated gifs 10px x 10px, but can't get them to work in IE. It works in the background of the page but not the table. The animated gif table background will work in Firefox (PC and Mac) and Safari only.

I found this thread and thought I would ask if anyone can suggest something that I might use. Seems your js is a good solution, but I don't write js. I can fill in variables when I know where they go, but thats about it. Or maybe php? Thanks in advance.

You can logon to my test in Firefox to see what the objective is: http://www.freemovetexas.com/new

Jack :o



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum