house9

random code and what not

jqueryUI effect error with Google Chrome and Safari

Ran into a strange issue using jqueryUI highlight effect, the issue only occurred with Webkit browsers (Google Chrome and Safari) and only when I was manipulating the background property of the element that was being highlighted.

Using a slightly modified version of the demo. I tweak the background image before applying the highlight effect

$("#highlight").click(function() {
  $(this).css("background", "url(some_image.png) no-repeat");
  $(this).effect("highlight");
});
This resulted in the highlight appearing but not going away. Then checking it in the debugger the following javascript error was being generated - “Uncaught TypeError: Cannot read property ‘0’ of undefined,” Changing the background manipulation to the following fixed the issue.

$(this).css("background-image", "url(some_image.png)");
$(this).css("background-repeat", "no-repeat");
$(this).effect("highlight");

Update 2009-03-06: You also need to make sure that if there is an existing style on the element being highlighted it is using the more verbose style tags of background-image and background-repeat or the same error will be encountered

Comments

Wesley
Thank you for your post. This has solved a similar jQueryUI problem for me on Chrome. I'm also aware now that it may be safer to use verbose background styles when dealing with Chrome and jQuery.
Tim Stevens
just had the same problem.

was trying to highlight a table row that had been newly created.

solved the problem by highlighting each child cell instead

//tbody is the body of a table with a header and a footer. I just want to highlight the first row
//I use row.find rather than row.children in case there are embedded tables

tbody.find("tr:first").find("td").effect("highlight", {}, 1000);


This didn't exhibit the same behaviour as just highlighting the row.