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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Fading out a table with JavaScript onclick button

    I need to make a table fadeout with JavaScript when I click a button. The table is simple.
    Code:
    <table id="users_table" style="border:1px solid #000;border-collapse: collapse;" border='1'>
    	<tr class="dataRow">
    		<td>11</td>
    		<td>12</td>
    		<td>13</td>
    	</tr>
    	<tr class="dataRow">
    		<td>21</td>
    		<td>22</td>
    		<td>23</td>
    	</tr>
    	<tr id="row3" class="dataRow">
    		<td>31</td>
    		<td>32</td>
    		<td>33</td>
    	</tr>
    	<tr class="dataRow">
    		<td>41</td>
    		<td>42</td>
    		<td>43</td>
    	</tr>
    </table>
    There is a button that calls a function called fadeout(). I cannot find a way to make the table fade out with just that one function. Is that even possible? If not, what other functions are necessary to make this happen?

  • #2
    Regular Coder
    Join Date
    Sep 2011
    Location
    Sweden
    Posts
    154
    Thanks
    1
    Thanked 22 Times in 22 Posts
    Try:
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
    table {background:#ddd}
    td {font: 18px Tahoma, Geneva, sans-serif;padding:10px}
    </style>
    <title>Fade it</title>
    <script type="text/javascript">
    /**
    *  Fade in/out
    *  el = DOM element or id of dom element,
    *  from = 0-100,  100 being fully visible
    *   to = 0-100
    *  time = time in ms for the fade
    */
    var fade = function(el,from,to,time){
      typeof el == 'string' && (el = document.getElementById(el));
      time = time || 500;
      var steps = time/25;
      var step = (to-from)/steps;
      var inter = setInterval(function(){
        from += step;
        el.style.opacity = from/100;
        el.style.filter = 'alpha(opacity=' + from + ')';
        Math.abs(from-to) < 1 && clearInterval(inter)
      },time/steps);
    };
    
    onload = function(){
      // example fade
      fade('users_table',100,30,1000);
    };
    </script>
    </head>
    
    <body>
    <table id="users_table" style="border:1px solid #000;border-collapse: collapse;" border='1'>
      <tr class="dataRow">
        <td>11</td>
        <td>12</td>
        <td>13</td>
      </tr>
      <tr class="dataRow">
        <td>21</td>
        <td>22</td>
        <td>23</td>
      </tr>
      <tr id="row3" class="dataRow">
        <td>31</td>
        <td>32</td>
        <td>33</td>
      </tr>
      <tr class="dataRow">
        <td>41</td>
        <td>42</td>
        <td>43</td>
      </tr>
    </table>
    </body>
    </html>

  • #3
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you so much! With a little tweaking, that works perfectly.


  •  

    Posting Permissions

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