Jump to content


Photo

TD fade effect


  • Please log in to reply
9 replies to this topic

#1 arunpatal

arunpatal

    Advanced Member

  • Members
  • PipPipPip
  • 273 posts

Posted 03 January 2013 - 03:34 PM

Hi,

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

#2 cpd

cpd

    ¬_¬

  • Members
  • PipPipPip
  • 892 posts
  • LocationLondon, UK

Posted 03 January 2013 - 03:42 PM

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.
"Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it."

"One of my most productive days was throwing away 1000 lines of code."

#3 arunpatal

arunpatal

    Advanced Member

  • Members
  • PipPipPip
  • 273 posts

Posted 03 January 2013 - 04:03 PM

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>


#4 Xaotique

Xaotique

    Advanced Member

  • Members
  • PipPipPip
  • 565 posts
  • LocationPennsylvania, United States
  • Age:22

Posted 03 January 2013 - 07:28 PM

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.


#5 cpd

cpd

    ¬_¬

  • Members
  • PipPipPip
  • 892 posts
  • LocationLondon, UK

Posted 04 January 2013 - 03:54 AM

You shouldn't need window.document.querySelectorAll(). The document object inherits this method so document.querySelectorAll() should be just fine.
"Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it."

"One of my most productive days was throwing away 1000 lines of code."

#6 Xaotique

Xaotique

    Advanced Member

  • Members
  • PipPipPip
  • 565 posts
  • LocationPennsylvania, United States
  • Age:22

Posted 04 January 2013 - 08:24 AM

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.

#7 cpd

cpd

    ¬_¬

  • Members
  • PipPipPip
  • 892 posts
  • LocationLondon, UK

Posted 04 January 2013 - 08:37 AM

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 :D

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

"Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it."

"One of my most productive days was throwing away 1000 lines of code."

#8 arunpatal

arunpatal

    Advanced Member

  • Members
  • PipPipPip
  • 273 posts

Posted 04 January 2013 - 09:49 AM

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

#9 arunpatal

arunpatal

    Advanced Member

  • Members
  • PipPipPip
  • 273 posts

Posted 04 January 2013 - 02:11 PM

It works with the help of jquery :)
Thanks CPD and Xaotique

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


#10 Xaotique

Xaotique

    Advanced Member

  • Members
  • PipPipPip
  • 565 posts
  • LocationPennsylvania, United States
  • Age:22

Posted 04 January 2013 - 03:09 PM

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.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com