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.
Attachments (0)
Change History (12)
Changed July 01, 2006 04:45PM UTC by comment:1
| component: | core → fx |
|---|---|
| milestone: | → 1.0 |
| version: | → 1.0 |
Changed August 15, 2006 04:57AM UTC by comment:2
| milestone: | 1.0 |
|---|---|
| version: | 1.0 |
Changed November 03, 2006 09:53PM UTC by comment:3
Changed November 17, 2006 09:44PM UTC by comment:4
| milestone: | → 1.1 |
|---|---|
| summary: | Make show/hide and fade effects work on tables → Make fade effects work on tables |
| type: | enhancement → bug |
| 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 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 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 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 comment:8
| milestone: | 1.1 |
|---|---|
| version: | 1.1 |
Changed January 15, 2007 09:27AM UTC by 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 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 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 comment:12
| milestone: | → 1.1.3 |
|---|---|
| resolution: | → fixed |
| status: | new → closed |
| version: | → 1.1.2 |
This should be fixed in SVN rev [1531]. You can now do fade animations on table cells.
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