9 replies to this topic

[arunpatal]

Hi,

Is it possible to give fade effect to td tag???
with the help of javascript or jquery or css...

[cpd]

You could fade the contents of the table-data tag and then remove the tag from the DOM.

jQuery can do this easily. It would be best if you go away and have a mess around.

[arunpatal]

I have already spend 1hour to look this but no luck....

anyways my table look like this..

and i want all menu td with fade effect........
if anyone know then let me know....
till then i am searching

<table id="header_table">
  <tr>
    <td height="81" id="header_left_td">&nbsp;</td>
    <td colspan="7" id="header_right_td">&nbsp;</td>
  </tr>
  <tr>
 
<td id="top_menu_first_td" onclick="document.location.href='style/demo_php/return_data_javascript.php';" style="cursor:pointer;cursor:hand">&#10054;
    Admin Login &#10054;</td>
   
   
<td id="top_menu_td" onclick="document.location.href='add_cat.php';" style="cursor:pointer;cursor:hand">&#10054;
    Add New Category &#10054;</td>
	 
	
	 <td id="top_menu_td" onclick="document.location.href='list_cat.php';" style="cursor:pointer;cursor:hand">&#10054;
	  Category List &#10054;</td>
   
   
   
    <td id="top_menu_td" onclick="document.location.href='add_topic.php';" style="cursor:pointer;cursor:hand">&#10054;
    Add New Topic &#10054;</td>
   
   
   
    <td id="top_menu_td" onclick="document.location.href='select_cat.php';" style="cursor:pointer;cursor:hand">&#10054;
    Topic List &#10054;</td>
   
   
   
    <td id="top_menu_last_td" onclick="document.location.href='test.php';" style="cursor:pointer;cursor:hand">&#10054;
    Site Settings &#10054;</td>
   
  </tr>
</table>

[Xaotique]

CPD's suggestion will help you learn better. But once you know what you're doing, I would still use jQuery's functions.

I know I need to stop just writing code for people ... Came to this realization after I wrote it. lol
Demo: http://xaotique.no-ip.org/tmp/39/

So .. lets look at what this would be like in jQuery quick.

$(document).ready(function()
{
    $("#myTable td").click(function()
    {
        $(this).fadeOut();
    });
});

If you wanted to do it the long way though, you could do something like this.

window.addEventListener("load", function()
{
	function fadeOut(elm, speed)
	{
		speed = speed / 100;
		elm.style.opacity = 1;
		
		var timer = setInterval(function()
		{
			if (Number(elm.style.opacity) - speed < 0)
			{
				elm.parentNode.removeChild(elm);
				clearInerval(timer);
			}
			else
			{
				elm.style.opacity -= speed;
			}
		}, 50);
	}
	
	var items = window.document.querySelectorAll("#myTable td");
	
	for (var i in items)
	{
		items[i].addEventListener("click", function()
		{
			fadeOut(this, 5);
		}, false);
	}
}, false);

Edited by Xaotique, 03 January 2013 - 07:37 PM.

[cpd]

You shouldn't need window.document.querySelectorAll(). The document object inherits this method so document.querySelectorAll() should be just fine.

[Xaotique]

You shouldn't need window.document.querySelectorAll(). The document object inherits this method so document.querySelectorAll() should be just fine.

I've always used window.document. Habit from GM scripts. lol I don't think it makes a difference, but I could be wrong.

[cpd]

It doesn't really because document is a part of window but I just didn't see the need for it; and I was just curious as to why, clearly

Edited by CPD, 04 January 2013 - 08:37 AM.

[arunpatal]

thanks a lot for helping.........
now i am testing and will write back when it works hopefully

[arunpatal]

It works with the help of jquery
Thanks CPD and Xaotique

Edited by arunpatal, 04 January 2013 - 02:11 PM.

[Xaotique]

It works with the help of jquery
Thanks CPD and Xaotique

If I were you, I'd use the second method I showed. Simply because, there's no real reason to include jQuery just for a single action. Everything else you have is longhand, so you may as well just add one extra function.

Just my thought. Glad ya got it.