Here’s a a small problem that one of customers ran into a few days ago: He was playing around with some of
the sample code I’ve put out
for one of my simple jQuery demos which deals with providing a simple pulse behavior plug-in: $.fn.pulse = function(time) {
if (!time)
time = 2000;
// *** this == jQuery object that contains selections
$(this).fadeTo(time, 0.20,
function() {
$(this).fadeTo(time, 1);
});
return this;
}
it’s a very simplistic plug-in and it works fine
for simple pulse animations. However he ran into a problem where it didn’t work when working with tables – specifically pulsing a table row in Internet Explorer. Works fine in FireFox and Chrome, but IE not so much. It also works just fine in IE as long as you don’t try it on tables or table rows specifically. Applying against
something like this (an ASP.NET GridView):
var sel =
$("#gdEntries>tbody>tr")
.not(":first-child") // no header
.not(":last-child") // no footer
.filter(":even")
.addClass("gridalternate");
// *** Demonstrate simple plugin
sel.pulse(2000);
fails in IE. No pulsing happens in any version of IE. After some additional experimentation with single rows and various ways of selecting each and still failing, I’ve come to
the conclusion that
the various fade operations in jQuery simply won’t work correctly in IE (any version). So even
something as ‘elemental’ as this:
var el = $("#gdEntries>tbody>tr").get(0);$(el).fadeOut(2000);
is not working correctly.
The item will stick around
for 2 seconds and then magically disappear.
Likewise:
sel.hide().fadeIn(5000);
also doesn’t fade in although
the items become immediately visible in IE. Go figure that behavior out.
Thanks to a tweet from red_square and a link he provided here is a grid that explains what works and doesn’t in IE (and most last gen browsers) regarding opacity:
http://www.quirksmode.org/js/opacity.html
It appears from this link that table and row elements can’t be made opaque, but td elements can. This means
for the row selections I can force each of
the td elements to be selected and then pulse all of those. Once you have
the rows it’s easy to explicitly select all
the columns in those rows with .find(“td”). Aha
the following actually works:
var sel =
$("#gdEntries>tbody>tr")
.not(":first-child") // no header
.not(":last-child") // no footer
.filter(":even")
.addClass("gridalternate");
// *** Demonstrate simple plugin
sel.find("td").pulse(2000);
A little unintuitive that, but it works.
Stay away from <table> and <tr> Fades
The moral of
the story is – stay away from TR, TH and TABLE fades and opacity. If you have to do it on tables use
the columns instead and if necessary use .find(“td”) on your row(s) selector to grab all
the columns.
I’ve been surprised by this uhm relevation, since I use fadeOut in almost every one of my applications
for deletion of items and row deletions from grids are not uncommon especially in older apps. But it turns out that fadeOut actually works in terms of behavior: It removes
the item when
the timeout’s done and because
the fade is relatively short lived and I don’t extensively test IE code any more I just never noticed that
the fade wasn’t happening.
Note – this behavior or rather lack thereof appears to be specific to table table,tr,th elements. I see no problems with other elements like <div> and <li> items.
Chalk this one up to another of IE’s shortcomings.
Incidentally I’m not
the only one who has failed to address this in my simplistic plug-in:
The jquery-ui pulsate effect also fails on
the table rows in
the same way.
sel.effect("pulsate", { times: 3 }, 2000);
and it also works with
the same workaround. If you’re already using jquery-ui definitely use this version of
the plugin which provides a few more options…
Bottom line: be careful with table based fade operations and remember that if you do need to fade – fade on columns.© Rick Strahl, West Wind Technologies, 2005-2010Posted in jQuery
