MooTools Tip: Class.toElement
Many of you may not know of a feature that's baked into MooTools' Class internals: Class.toElement. Class.toElement allows you to pass the $ (or document.id) method an instance of your class and the instance will be treated as an element.
The MooTools Class.toElement Usage
/* baking into the class */
var myClass = new Class({
initialize: function(container,options) {
this.container = $(container);
},
// .. lots more methods //
toElement: function() {
return this.container;
}
});
/* usage */
var mc = new MyClass('wrapper');
$(mc).fade('out'); //fades the container out
This isn't a groundbreaking piece of code but it's just another example of the flexibility that MooTools affords its developers. Happy coding!
![Create a CSS Flipping Animation]()
CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...
![Creating Scrolling Parallax Effects with CSS]()
Introduction
For quite a long time now websites with the so called "parallax" effect have been really popular.
In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...
![Create a Sprited Navigation Menu Using CSS and MooTools]()
CSS sprites are all the rage these days. And why shouldn't be? They're easy to implement, have great upside, and usually take little effort to create. Dave Shea wrote an epic CSS sprites navigation post titled CSS Sprites2 - It's JavaScript Time.
![CSS Triangles]()
I was recently redesigning my website and wanted to create tooltips. Making that was easy but I also wanted my tooltips to feature the a triangular pointer. I'm a disaster when it comes to images and the prospect of needing to make an image for...
Haven’t noticed this wonderful tiny yet so useful method before. Thanks for bringing this up :)
i was actually just reading about this today.
it seems often times the method is used to create the element that gets returned as well, in which case its important to make sure the method doesn’t re-define the element it returns.
toElement: function() { if (this.element) return this element; return this.element = new Element(...); }Hey, that’s a useful thing! Didn’t know this before, THX for sharing!