Element.zboing()

Snippets are small pieces of code that do not fit in the UvumiTools plugin category. Please note that each of these semi-useful functions requires Mootools 1.2.

Inspired by the red ball from the old moofx site. It pretty much takes the same idea, but written for mootools 1.2 and as an Element function. Like the heart beating effect, it's not very useful but looks cool on a logo or similar graphic element.

Element.implement({
zboing : function(){
var parent = this.getParent();
if(parent != $(document.body) && parent.getStyle('position')=='static'){
parent.setStyle('position','relative');
}
var position = this.getStyle('position');
if(position=='static'){
this.setStyle('position','relative');
position = 'relative';
}
if(Browser.Engine.trident || Browser.Engine.presto){
parent.setStyle('height',parent.getStyle('height'));
var coords = this.getPosition(parent);
}else{
var coords = this.getPosition(parent);
if(position == 'relative'){
coords.x -= parent.getStyle('paddingLeft').toInt();
coords.y -= parent.getStyle('paddingTop').toInt();
}
}
this.setStyle('cursor','move').store('position',coords).set('morph',{
transition:Fx.Transitions.Elastic.easeOut
}).makeDraggable({
onComplete:function(){
var position = this.element.retrieve('position');
this.element.get('morph').start({
top:position.y,
left:position.x
});
}
});
return this;
}
});

Usage:

$('myElement').zboing();

Demo: Try to grab and release the ball. Woot.

dummy

Note: if you're going to use this effect on an image, like here, Internet Explorer is going to try to ruin you life, again, by activating its special dragging thingy meant to allow you set the picture directly as your desktop wallpaper or something like that.
To disable this awesome feature (read: to fix this bug), just throw this code anywhere, like we did:

if(Browser.Engine.trident){
document.ondragstart = function(){return false;}
}

This fix works whenever you want to use Mootools' Drag class on an image. Sweet!