Ruby on Rails
JavaScript, XHTML, CSS
Java, Distributed Systems
<you_name_it>
Only apply once
First of all, thanks for providing a cross-browser solution for easily rounded corners!
I have a website which loads in extra html with ajax calls after the page has been loaded.
The initial page load contains some elements I want to have rounded corners, but the extra html I load should also be processed.
In order for me to apply the rounded corners on the extra (ajax) html, I run the $(".selector").liquidCanvas(blabla); call after each ajax call has been completed.
I noticed that by doing it this way, the items that already had an canvas applied over them, had an extra canvas placed around them after every ajax call.
It seems like an optimalisation would be very nice in this area (just for ajax-heavy sites like mine) because otherwise the html won't stop growing and I can imagen the render times shooting through the roof at some point.
You could for instance tag the proccesed elements with class="LC_processed" and skip each element which has this class applied.
----EDIT----
solved my problem by editing the liquid-canvas.js
jQuery.fn.extend({
liquidCanvas: function(func) {
this.each(function() {
if ($(this).is(".processed")) {
//do nothing
} else {
$(this).addClass("processed");
var canvas;
if (window.G_vmlCanvasManager) {
$(this).before('');
canvas = G_vmlCanvasManager.initElement($(this).prev("div").get(0));
} else {
$(this).before('');
canvas = $(this).prev("canvas").get(0);
}
var paint;
if ($.isFunction(func)) {
paint = func;
} else {
var plugin = parse(func)
paint = function(area) { plugin.paint(area); };
}
$(this).data("liquid-canvas", {
"canvas": canvas,
"paint": paint
});
$(this).css({ background: "transparent" });
if ($(this).css("position") != "absolute") $(this).css({ position: "relative" });
canvasElements.push(this);
checkResize(this, true);
}
});
}
});
