UXDE dot Net Wordpress Themes

Check Here For 40 Amazing MooTool Tutorials and Plug-ins

To spice up the beauty of your website and to make it more interactive, there is MooTools which is a framework of Javascript, written in Javascript. MooTools has provided the designers with a light-weight and user-friendly setup which they can use to enhance the functionality of their website. A well-built user interface is what renders a website successful and Javascript, AJAX and CSS are the tools to build it like that. All of these give a designer liberty to build his website with the best of creativity and smoothness that he wants. Check Here For 40 Amazing MooTool Tutorials and Plug-ins we have gathered for you to take help if you are plunging in the world of MooTools. Enjoy!

Checkbox Filtering Using MooTools ElementFilter

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!

Read Full Tutorial
Demo

Create a Simple News Scroller Using MooTools

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.

Read Full Tutorial
Demo

FancyUpload – Swiff meets Ajax

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.

Download

 

SqueezeBox – Expandable Lightbox

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.

 

Download
Demo

 

Facebook-Style Modal Box Using MooTools

This tutorial will teach you to combine CSS, Facebook’s imagery and MooTools to create a stylish and lightweight Facebook like Modal Box.

Read Full Tutorial
Demo

 

Using MooTools to Instruct Google Analytics to Track Outbound Links

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.

Using CSS and Mootools to simulate Flash horizontal navigation effect

This tutorial explains how to use Mootools and pure CSS / HTML code to simulate a Flash (follow mouse) horizontal navigation effect.

Read Full Tutorial
Demo

 

Two CSS vertical menu with show/hide effects

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.

Read Full Tutorial
Demo

 

TableGear

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.

Download
Demo

 

Smooth Scrolling with MooTools Fx.SmoothScroll

Learn to create smooth scrolling effect using MooTools Fx.SmoothScroll.

Sliding Labels Using MooTools

This tutorial will teach you to create sliding labels using little jQuery code. Luckily the effect doesn’t require much MooTools code either!

Download
Demo

 

Sexy sliding JavaScript side bar menu using mootools

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.

Read Full Tutorial
Demo

 

Sexy Animated Tabs Using MooTools

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.

Read Full Tutorial
Demo

 

Morph Effect on mouseenter/mouseleave with Mootools

In this tutorial you will learn to add an elegant morph effect on unordered list on mouseover.  Demo can elaborate more about this tutorial.

Tutorial
Download
Demo

 

MooTools Zoomer Plugin

Zoomer provides an elegant method for zooming in on large images.

Original Link
Demo

 

MooTools Kwicks Plugin

MooTools Kwick Plugin will enable you to have a hidden detail of an image displayed when you take your cursor on that image.

Original Link
Demo

 

MooTools CountDown Plugin

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.

Original Link
Demo

mooSlide

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.

Download
Demo

mooRainbow

Description
Download
Demo

MooFlow

MooFlow give you a completely awesome browsing experience on your website, almost same as you get on apple.com for viewing the products.

Download
Demo

Milkbox

Milkbox is a simple and sleek lightbox clone written for MooTools.

Read Full Tutorial
Demo

Kroppr

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.

Read Full Tutorial
Demo

JavaScript drop down menu using Mootools

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.

Read Full Tutorial
Demo

iPhone-Style Passwords Using MooTools PassShark

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.

Read Full Tutorial
Demo

FancyForm

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.

Read Full Tutorial
Demo

Facebook Sliders With MooTools and CSS

This tutorial will explain how to create Facebook-style sliders that control the height, width, and opacity of an image.

Read Full Tutorial
Demo

 

Create Twitter-Style Dropdowns Using MooTools

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.

Read Full Tutorial
Demo

 

Create Snook-Style Navigation Using MooTools

This tutorial will teach how you can use an image and Mootools to create a slick mouse-over effect.

Read Full Tutorial
Demo

Create an Animated Sliding Button Using 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.

Read Full Tutorial
Demo

 

Create a Sprited Navigation Menu Using CSS and MooTools

In this tutorial your will learn to create a sprited navigation menu using CSS and Mootools

Read Full Tutorial
Demo

 

Create a Spectacular Photo Gallery with MooTools

In this tutorial, you will learn to combine many of MooTools’s features to create a nice and simple photo gallery.

Read Full Tutorial
Demo

 

Create a Simple, Powerful Product Highlighter with MooTools

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.

Read Full Tutorial
Demo

 

Create a Quick MooTools Slideshow with Preloading Images

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.

Read Full Tutorial
Demo

 

Better Pull Quotes with MooTools

This tutorial will use MooTools to create a great-looking pull quotes which will automatically display quotes without repeating any content.

Read Full Tutorial
Demo

 

Background Animations Using MooTools

Mootools a JavaScript framework made animation very easy. This tutorial will show how you can use animated effect in your website.

Read Full Tutorial
Demo

 

AutoGrow Textarea MooTools Plug-In

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).

Read Download Plug-in
Demo

 

AutoCompleter

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.

Read Full Tutorial
Demo

 

AJAX Username Availability Checker Using MooTools 1.2

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.

Read Full Tutorial
Demo

 

Sexy Alert Box

Sexy Alert Box replaces old fashion and abruptly appearing alerts with good-looking ans smoothly appearing Alerts using MooTools 1.2 or up.

Read Full Tutorial
Demo

 

 

How to Auto Caption Images Using 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.

Read Full Tutorial
Demo

 

 

This tutorial will teach how you can use an image and Mootools to create a slick mouse-over effect.

Asma Abbas

Asma Abbass is a professional content writer based in Lahore. She has an aim to do something some day that breaks the modus operandi of her life.

Discussion 1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>