Browsing articles in "MooTools"
May
6
2011

MooTools History Plugin

One of the reasons I love AJAX technology so much is because it allows us to avoid unnecessary page loads.  Why download the header, footer, and other static data multiple times if that specific data never changes?  It’s a waste of time, processing, and bandwidth.  Unfortunately, at this point in the web, constant refreshes are the norm — but they don’t have to be.  Christoph Pojer, a MooTools Core Developer, has added History to his [...]

Feb
12
2011

MooTools Star Ratings with MooStarRating

I’ve said it over and over but I’ll say it again:  JavaScript’s main role in web applications is to enhance otherwise boring, static functionality provided by the browser.  One perfect example of this is the Javascript/AJAX-powered star rating systems that have become popular over the past five years.  Star rating systems are attractive, allow us to avoid ugly forms, and prevent unnecessary page reloads.  A new plugin by Lorenzo Stanco called MooStarRating has hit the [...]

Nov
30
2010

LightFace: Facebook Lightbox for MooTools

One of the web components I’ve always loved has been Facebook’s modal dialog.  This “lightbox” isn’t like others:  no dark overlay, no obnoxious animating to size, and it doesn’t try to do “too much.”  With Facebook’s dialog in mind, I’ve created LightFace:  a Facebook lightbox clone for MooTools.  LightFace and its family of classes work well with iFrames, images, AJAX-requested content, static positioning, and static content.

Jun
17
2010

AJAX Username Availability Checker Using MooTools

The HTML 1<p><strong>Please provide your desired username: &nbsp;&nbsp;&nbsp;</strong> 2 <input type=”text” name=”username” id=”username” size=”30″ class=”basis” /> 3</p> The foundation of the system is the INPUT element with a specific ID. No other elements are required. The eventual IMG element will be generated by MooTools.

Jun
5
2010

Creating 10 Most-Used Javascript Techniques Using Pure CSS Styling

How To Create a Pure CSS Polaroid Photo Gallery Learn how to build a cool looking stack of Polaroid photos with pure CSS styling. Basic CSS is used to style up the photos into a Polaroid style images, then some additional styling with shadows and rotation are injected, then z-index property is used to alter the stacking order of all the objects.

Jun
5
2010

Using jQuery or MooTools For Drag, Drop, Sort, Save

One of my most popular posts has been Using MooTools 1.2 for Drag, Drop, Sort, Save. My post detailed how you can create a drag’n’drop, AJAX-ified system to allow the user to drag and drop elements and quickly save them with PHP and MySQL on the server side. I’ve chosen to update the post with a faster, more efficient set of MooTools and PHP code. I’ve also provided a jQuery equivalent. Enjoy!

Apr
25
2010

Accomplishing Common Tasks Using MooTools, jQuery, and Dojo

I’ve been dabbling with Dojo quite a bit lately. I feel great about my MooTools and jQuery skills but I’m a bit still raw when it comes to Dojo. What’s important that I keep in mind, however, is that the tasks I’m trying to accomplish are the same — the syntax is simply different. Here are a few basic JavaScript tasks and the syntax to accomplish them within each awesome framework.

Apr
6
2010

Smooth Scrolling with MooTools Fx.SmoothScroll

get quite a few support requests for my previous MooTools SmoothScroll article and the issue usually boils down to the fact that SmoothScroll has become Fx.SmoothScroll. Here’s a simple usage of Fx.SmoothScroll.

Mar
12
2010

Create Twitter-Style Dropdowns Using MooTools

Twitter does some great stuff with javascript. What I really appreciate about what they do is that there aren’t any epic JS functionalities — they’re all simple touches. One of those simple touches is the “Login” dropdown on their homepage. I’ve taken some time to duplicate that functionality with MooTools.