Ruby on Rails
JavaScript, XHTML, CSS
Java, Distributed Systems
<you_name_it>
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();
}
}
