Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Jul 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    table background fade in

    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?

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    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

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    did it anyway

    Code:
    <!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>

  • #4
    New Coder
    Join Date
    Jul 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thank you so much!!

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Quote Originally Posted by vwphillips
    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?

    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.

    Code:
    <!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>

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    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

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Quote Originally Posted by vwphillips
    BECAUSE pooski ASKED FOR THE BACKGROUND TO BE FADED NOT THE TABLE
    Which background?

    Quote Originally Posted by pooski
    I need to fade in table background

  • #8
    New Coder
    Join Date
    Jul 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #9
    New Coder
    Join Date
    Jul 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hmmm now that I tested it.. the method glenn used doensn't seem to work with firefox. It works fine with IE.

  • #10
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Enclose the table inside the div.

    Code:
    <div>
    <table ...>
    ...
    </table>
    </div>

  • #11
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    gradual multiple color-change table background

    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
    Last edited by Jackyboy; 11-03-2006 at 03:19 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •