Total Followers 132,503
MooTools is a lightweight, object-oriented and very popular framework for JavaScript, written in JavaScript which can spice up the interactivity and beauty of your site. User interface plays an important role in the success of any website; JavaScript, CSS and AJAX are commonly used to provide users the leisure of rich user interface over past few years. But using one of the most popular JavaScript libraries, MooTools you can add extra smoothness and interactivity in your website. In this post we have covered some MooTools tutorials and plugins which can be very handy if you are just entering in the world of MooTools.
In this tutorial your will write a simple script that will select all images with the class of captioned, Take its title attribute or alt attribute and Display it right below the image.
Sexy Alert Box replaces old fashion and abruptly appearing alerts with good-looking ans smoothly appearing Alerts using MooTools 1.2 or up.
Almost every website offering membership to its readers needs username availability checker to facilitate users in a way that they know if their desired username is available or already registered on the specific site. So here is a tutorial on how you can implement a username availability checker using MooTools 1.2.
You must have noticed Google giving suggestion about your search queries in a drop down. This Auto-completer script provide the same facility for text suggestion and completion using MooTools.
This MooTools plug-in expands a text-area as the user types something in it. This version is based on the jQuery plug-in developed by Chrys Bader (www.chrysbader.com).
Mootools a JavaScript framework made animation very easy. This tutorial will show how you can use animated effect in your website.
This tutorial will use MooTools to create a great-looking pull quotes which will automatically display quotes without repeating any content.
This code will let you learn how to create a simple image slideshow using MooTools with the feature of pre-loading the images; which looks more elegant and enhance the pleasure of viewing the images.
In this tutorial we’ll be creating a flexible tool for highlighting the products or services available on your website using the MooTools; a JavaScript framework.
In this tutorial, you will learn to combine many of MooTools’s features to create a nice and simple photo gallery.
In this tutorial your will learn to create a sprited navigation menu using CSS and Mootools
Every website should have attractive and good-looking buttons to gain the attention and attraction of readers. If you want to be a successful website owner you need to be creative and should not use the old style boring buttons. In this tutorial you will learn to create an animated sliding button using MooTools.
This tutorial will teach how you can use an image and Mootools to create a slick mouse-over effect.
Well, everybody must have seen the drop-down login menu to twitter. This tutorial will teach you how you can duplicate that functionality of twitter like drop-down menu using MooTools.
This tutorial will explain how to create Facebook-style sliders that control the height, width, and opacity of an image.
FancyForm script replaces old checkboxes with the new interactive and flexible checkboxes with Tick being the sign for checked option and cross for the unchecked option.
In this tutorial you will learn how to create a iPhone-like password field, showing the most recently typed character and hiding previous per normal password fields.
Drop down menus are very important for any website layout and beauty. So in this tutorial you will learn to create a very easy and unobtrusive drop down menu using MooTools Core Build and the Fx.Slide.
Kroppr is an image cropping tool for your website that allows users to rotate, re-size and crop images with minor changes to your site.
Milkbox is a simple and sleek lightbox clone written for MooTools.
MooFlow give you a completely awesome browsing experience on your website, almost same as you get on apple.com for viewing the products.
mooSlide replaces common lightbox with Ajax one. You can have any type of content in it like HTML or FLASH, it can slide from top or bottom. It can be very handy to create beautiful sliding login panel.
I assume every one have used rapidshare at least for one time and had to wait for some seconds for the downloading starts. Using MooTools you can make a similar CountDown plugin by the use of which you can implement the same system that rapidshare is using.
MooTools Kwick Plugin will enable you to have a hidden detail of an image displayed when you take your cursor on that image.
Zoomer provides an elegant method for zooming in on large images.
In this tutorial you will learn to add an elegant morph effect on unordered list on mouseover. Demo can elaborate more about this tutorial.
If you have less space and more content to display then you can use tab systems. This tutorial will show you how to create sexy and animated tabs which can handle lot of content in little space.
A sliding menu can help you to save a lot of space on your website. This tutorial will use MooTools to create a sexy sliding side bar menu with very smooth sliding effect.
This tutorial will teach you to create sliding labels using little jQuery code. Luckily the effect doesn’t require much MooTools code either!
Learn to create smooth scrolling effect using MooTools Fx.SmoothScroll.
TableGear is a software package for working with data on the web. It is designed get your data into a web page, and let you work with it quickly and easily, the way you would in powerful desktop applications like Excel.
This is a simple tutorial which will teach you to create two vertical menu with hide/shoe effect. One example will use Simple JavaScript and other will use MooTools.
This tutorial explains how to use Mootools and pure CSS / HTML code to simulate a Flash (follow mouse) horizontal navigation effect.
Google Analytical provides important information about your visitors and where they are coming from, and if you want to see what are the exit links then by using MooTools you can direct Google Analytic to track outbound links
This tutorial will teach you to combine CSS, Facebook’s imagery and MooTools to create a stylish and lightweight Facebook like Modal Box.
SqeezeBox is an overly which is designed getting inspired from LightBox. It will display the images in the full size in the same window like LightBox.
FancyUpload replaces unobtrusive, queued and multiple-file selection with a fancy animated progress bar. It is very easy to set up and completely customizable using CSS and XHTML.
News scrollers are very common on internet because of their effectiveness. In this tutorial you will learn to create a simple news scroller using MooTools.
This tutorial will use MooTools ElementFilter to make a checkbox filter, for example if you are making a search box, when you type your search in the box, elements with matching text will automatically be checked!
This is all for this post. Anything missing or any suggestion? Do mention in your comments and we will be ha
Get The Only Freelancer crash course you will ever need to read!
Taimur here, who spent 19 years of my life doing nothing but study. An year back started blogging and it happened to be the best thing ever happened to me, I found what I want to do in spare time. Got lot of exposure and experience about my personal, professional and social life in past 1 year, all because of Blogging. On December, 14th 2010 I turned 20, want to be an accountant, doing ACCA (UK) and part-time Blogging. Living happily with my family in Lahore, Pakistan. Love coffee, adore photography and addicted to music. Owner of Designer's Terminal and AddictiveFonts. You can also follow me on Twitter
Monday, November 28th, 2011 09:07
Like the username availability checker – now that could come in dead handy!
Saturday, October 15th, 2011 00:27
Unquestionably imagine that which you said. Your favorite reason appeared to be at the web the easiest thing to take note of. I say to you, I definitely get annoyed whilst folks think about issues that they plainly do not realize about. You controlled to hit the nail upon the highest and also outlined out the entire thing without having side effect , folks could take a signal. Will probably be back to get more. Thank you
Wednesday, July 14th, 2010 23:53
I have always been in bed with JQury but I may take a look at MooTools after looking at some of these effects.
Wednesday, July 14th, 2010 14:51
Excellent round up of plugin tutorials utilizing mootools.
Saturday, July 10th, 2010 21:36
Very nice compilation of MooTools stuff, nice to see all the good things people do with this library.
Sunday, July 11th, 2010 00:51
Good Work !
Glad you like this article !
Saturday, July 10th, 2010 21:08
I know this is a bit of shameless self promotion… but:
http://mootools.net/forge/p/dynamictextarea
Is a much better textarea resizer than the one listed here.
Sunday, July 11th, 2010 00:48
Thanks for letting us know about other good stuff !
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
Amadeus
Saturday, July 10th, 2010 21:08
I know this is a bit of shameless self promotion… but:
http://mootools.net/forge/p/dynamictextarea
Is a much better textarea resizer than the one listed here.
Demo: http://enmassellc.com/misc/dynamicTextarea.html
Taimur Asghar
Sunday, July 11th, 2010 00:48
Thanks for letting us know about other good stuff !
Hadrien
Saturday, July 10th, 2010 21:36
Very nice compilation of MooTools stuff, nice to see all the good things people do with this library.
Taimur Asghar
Sunday, July 11th, 2010 00:51
Good Work !
Glad you like this article !
Dr.Death
Monday, July 12th, 2010 10:49
all cool stuffs in one place
Jordan Walker
Wednesday, July 14th, 2010 14:51
Excellent round up of plugin tutorials utilizing mootools.
David
Monday, November 28th, 2011 09:07
Like the username availability checker – now that could come in dead handy!
Garry
Saturday, October 15th, 2011 00:27
Unquestionably imagine that which you said. Your favorite reason appeared to be at the web the easiest thing to take note of. I say to you, I definitely get annoyed whilst folks think about issues that they plainly do not realize about. You controlled to hit the nail upon the highest and also outlined out the entire thing without having side effect , folks could take a signal. Will probably be back to get more. Thank you
Alex Cooper
Wednesday, July 14th, 2010 23:53
I have always been in bed with JQury but I may take a look at MooTools after looking at some of these effects.