The blog has moved to ... Many google searches point here so I am leaving it operational, but there will be no new posts.

Monday, March 2, 2009

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 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");

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


Tim Stevens said...

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.

Wesley said...

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.