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
2 comments:
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.
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.
Post a Comment