...
PDA

Fading out a table with JavaScript onclick button

rubyriot
10-09-2011, 01:07 AM
I need to make a table fadeout with JavaScript when I click a button. The table is simple.

<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?
ironboy
10-09-2011, 01:37 AM
Try:
<!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>
rubyriot
10-09-2011, 02:21 PM
Thank you so much! With a little tweaking, that works perfectly. :D

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum