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!
![Detect DOM Node Insertions with JavaScript and CSS Animations]()
I work with an awesome cast of developers at Mozilla, and one of them in Daniel Buchner. Daniel's shared with me an awesome strategy for detecting when nodes have been injected into a parent node without using the deprecated DOM Events API.
![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...
![Create a 3D Panorama Image with A-Frame]()
In the five years I've been at Mozilla I've seen some awesome projects. Some of them very popular, some of them very niche, but none of them has inspired me the way the MozVR team's work with WebVR and A-Frame project have.
A-Frame is a community project...
![Build a Toggling Announcement Slider Using MooTools 1.2]()
A few of my customer have asked for me to create a subtle but dynamic (...I know...) way for them to advertise different specials on their website. Not something that would display on every page, but periodically or only the homepage. Using a trick...
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!