a method for IE7 and jquery effects interactive

liquidCanvas is great.
And I fixed it for my need.
Hope below info will help someone.

1.use canvas tag with excanvas.(work on IE7)
2.wrap canvas into container, so canvas would be affect by container.
3.support jquery chaining
4.update liquidCanvas paint function


jQuery.fn.extend({
liquidCanvas: function(func) {
return this.each(function() {
var self=$(this);
var data = self.data('liquid-canvas');
var canvas;
if(!data||!data.canvas) {
self.wrapInner($('<'+'div class="liquidCanvas-main" style='position:relative;z-Index:1' />');
//create the DOM element canvas
var canvas=document.createElement('canvas');
if(window.G_vmlCanvasManager) { G_vmlCanvasManager.initElement(canvas);}

$(canvas).css({position:'absolute',top:0,left:0}).appendTo(self);
}
else {
canvas=data.canvas;
}
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
});

if ($(this).css("position") != "absolute") $(this).css({ position: "relative" });

canvasElements.push(this);
checkResize(this, true);
});
}
});

function checkResize(container, force) {
var $container = $(container);
var data = $container.data('liquid-canvas');
if (!data) return;
var canvas = data.canvas;
var $canvas = $(canvas);
var w = $container.outerWidth();
var h = $container.outerHeight();

if (force ||
canvas.width != w || canvas.height != h ||
canvas.offsetTop != container.offsetTop || canvas.offsetLeft != container.offsetLeft) {
pollCounter = 100;
canvas.width = w;
canvas.height = h;
var area = new Area(canvas);
area.save();
data.paint(area);
area.restore();
}
}

Trackback URL for this post:

http://www.ruzee.com/trackback/249