Skip to main content

Bug Tracker

Side navigation

#24 closed bug (fixed)

Opened July 01, 2006 04:23PM UTC

Closed March 15, 2007 05:16PM UTC

Make fade effects work on tables

Reported by: steven@acko.net Owned by:
Priority: major Milestone: 1.1.3
Component: effects Version: 1.1.2
Keywords: Cc:
Blocked by: Blocking:
Description

Effects don't work on tables, because in CSS2-compatible browsers, table elements have "display: table" "display: table-row" and "display: table-cell". Trying to apply revealing effects will end up setting "display: block", and destroying the table layout.

The following patch tries to fix this by setting the right display style based on the element's HTML tag. Fade effects work on table and td, but not on tr. Show/hide should probably work as well.

Doing size-dependant effects will probably not work well though, as you can't just isolate table elements with position: absolute to measure them. Still, it's a start.

http://acko.net/dumpx/jquery-table.patch

Attachments (0)
Change History (12)

Changed July 01, 2006 04:45PM UTC by john comment:1

component: corefx
milestone: → 1.0
version: → 1.0

Changed August 15, 2006 04:57AM UTC by john comment:2

milestone: 1.0
version: 1.0

Changed November 03, 2006 09:53PM UTC by laurenty@gma comment:3

Keep in mind that IE doesn't support the table display properties table-row, table-cell, etc... And I don't know if that was fixed in IE7

Changed November 17, 2006 09:44PM UTC by john comment:4

milestone: → 1.1
summary: Make show/hide and fade effects work on tablesMake fade effects work on tables
type: enhancementbug
version: → 1.1

I think this can be resolved by simply not tampering with style.display when only opacity is being animated. (For right now, let's only worry about fadeIn and fadeOut - show/hide are much much harder)

Changed November 25, 2006 11:25PM UTC by brandon comment:5

I've adapted the patch a little to work with fadeOut and fadeIn.

http://brandon.jquery.com/testing/24/

Apparently Safari and Opera do not support setting opacity for elements with display: table-row. This means that fading TR elements will not work properly in Safari and Opera. So far table, td and th are working fine in all browsers.

Opinions? The relevant lines are around 5113.

Changed November 27, 2006 03:19PM UTC by sam comment:6

Until this is patched (in stable, not SVN), the workaround I have used is to wrap the table in a div and do the effect on that.

$("#mytable").wrap("<div>");
$("#tablefade").click(
	function()
	{
		$("#mytable").parent().fadeOut("slow");
	}
);

Changed November 28, 2006 02:46AM UTC by brandon comment:7

Sam, I think your workaround might best approach to take. Browsers just act weird with these tables. Just, not messing with display or actually trying to use the appropriate display property will not work cross browser.

Changed December 29, 2006 11:33PM UTC by joern comment:8

milestone: 1.1
version: 1.1

Changed January 15, 2007 09:27AM UTC by mathieuma@us comment:9

The issue is the same with toggle and show / hide.

The div warpping issue is nice when working on a complete table, but what do you do when you want to work on a cell or a row ?

Changed March 01, 2007 05:52PM UTC by carlof comment:10

Wrapping the selected tr:

$("tr#id").prependTo('<div class="foo"></div>');
$("div.foo").fadeOut("slow");

the fade out effect behaves like hide, but the speed paramater is ignored.

Changed March 09, 2007 02:55PM UTC by GoodIsh comment:11

I just threw this in where ever I was toggling a table:

$("table:visible").css("display","table");

Hopefully a fix will come for this to get back the old display value instead of changing it to block, but this hack works fine for now.

Changed March 15, 2007 05:16PM UTC by john comment:12

milestone: → 1.1.3
resolution: → fixed
status: newclosed
version: → 1.1.2

This should be fixed in SVN rev [1531]. You can now do fade animations on table cells.