News on different JavaScript techniques is coming often recently. In our article 100 Ajax And JavaScript Techniques we tried to cover what we considered as the most useful techniques. But since then there is more fresh news on the MooTools horizon. For some time ago we did a follow up article on JavaScript techniques, 10 New jQuery Techniques, and we decided to do something similar with MooTools – a short update on MooTools.
The MooTools news items in this list are released or updated during the period October to December 2009 – as far as we can understand. You are so welcome to update us if you think something is missing in the list.
Wikipedia: MooTools is an open source, lightweight, modular object-oriented programming JavaScript web application framework released under the MIT License.
Cashrevelations.com presents 10+ New MooTools Techniques with demos you can use for your site or blog. It is also possible you might be interested to take a closer look at the MooTools JavaScript Framework – MooTools.net.
MooTools Techniques
1. MooTools ScrollSidebar
ScrollSidebar allows you to attach an element to a place on the screen and animate the menu to the current scroll position.
View Demo
2. Retro Animated Flip-Down Clock
In this tutorial, you will create an animated flip down clock inspired by the 70′s. Using the Mootools framework, Alexandru Pitea tried to replicate the flip action of the pads and make it as lifelike as possible.
View Demo
3. Icons To External Links
A trend going on around on websites is putting icons on links that point to web pages externally. If you want that on your site, this simple script will dynamically take care of that for you with the help of Mootools and some CSS.
View Demo
4. New York Times-Style Text Selection Widget
NYT’s text selection widget listens for text selection and presents the user with a “search” icon they may click on to learn more about that term. Also available as jQuery.
View Demo
5. Floom – Blinds Effect MooTools Slideshow
Floom is a Blinds-effect MooTolls slideshow plugin. There are two ways of setting up Floom. One is the object way, where you specify the image url and the caption using the key-value notation. The second one is by simply passing an element collection, ie. $$('#blinds img'), where the passed element has to be the actual image collection.
View Demo
6. Mootools 1.2 cvLinkSelect Class
This class links the select boxes to each other. When you change the first select element the options for the following select boxes are loaded.
View Demo
7. Thumbnail Hover Effect Using Mootools
Image is splitting in the middle using two instances of the same image. One instance goes toward left while second image goes right, in effect giving an illusion that image is splitting in middle.
View Demo
8. Pull Quotes With MooTools
Chris Coyier authored a post titled Better Pull Quotes: Don’t Repeat Markup a while back. In his post he created great-looking pull quotes without repeating any content — instead he uses jQuery to dynamically create the pull quotes. The following is the MooTools method for doing so.
View Demo
9. Animated TwitterReader
Animated TwitterReader class with MooTools. The MooTools plug-in for downloading and displaying Twitter status via Twitter Search API – created by Jakub Karlec.
View Demo
10. Mootools Navigation Plugin
The goal of this plugin is to create a complex navigation menu as seamless as possible. All you need to do is create a standard unordered list and the plugin will do the rest.
View Demo
11. Depender
A new plugin called Depender which uses MooTools dependency mappings to allow you to lazy load additional scripts on the fly based on what you need.
View Demo
12. MooShell – Shell Editor
MooShell Shell Editor allows you to paste your HTML, CSS, and MooTools JavaScript into the page and easy test your snippets before implementing.
View Demo
The MooTools Techniques are not in any particular order and as usual you decide what fits best for your purposes and demands – and Cashrevelations.com is not affiliated with any of the plugin or tutorial authors.
More about JavaScript:
Interesting post. Add to bookmarks
Thomas: Thank you for the tip.
Hello,
I suggest Moowind for mootools (Moowind.com) to. It a french plugin, but commented in english in the code
to control windows objects with mootools.
Thank for this usefull list