The Latest

Introducing MooTools ElementSpy

One part of MooTools I love is the ease of implementing events within classes. Just add Events to your Implements array and you can fire events anywhere you want — these events are extremely helpful. ScrollSpy and many other popular MooTools plugins would be nothing without events. And think of DOM elements without events…terrible! Not knowing when someone clicked, hovered, etc. would completely defeat the purpose of javascript!

I wanted to take basic element events further. Sure I know when the value of an input changes (via onChange), but what about when another attribute changes? Or a style change? Or the change in a storage value? ElementSpy allows you to assign periodical checks on element attributes or other aspects of elements.

Checkbox Filtering Using MooTools ElementFilter

When I first wrote MooTools ElementFilter, I didn’t think much of it. Fast forward eight months later and I’ve realized I’ve used the plugin a billion times. Hell, even one of the “big 3″ search engines is using it for their maps application. There’s one more place I’d like to use it. My employer uses a basic SPAM filtering system which allows me to see emails that were incorrectly (or correctly) caught in SPAM, click a checkbox, and click a “Deliver” button. The problem is that it will catch a bunch of valid emails with very similar subject lines, so I have to hunt down all of the emails, check the email’s checkbox, and keep searching. Inefficient to say the least. That’s why I’ve used ElementFilter to find LABEL elements with the given search text and automatically check their checkboxes.

ID Your Body Using PHP

It seems like every part of a website needs to be dynamic. Dynamic, database-driven pages, dynamic javascript, dynamic CSS, etc. All this dynamism can make it difficult to style or script a page easily. One way I’ve learned to combat the rigidness of using CMS’ is to give the BODY element a unique ID based on the URL. Doing so allows me to add special styling to any page.

Scrolling “Agree to Terms” Component with MooTools ScrollSpy

Remember the good old days of Windows applications forcing you to scroll down to the bottom of the “terms and conditions” pane, theoretically in an effort ensure that you actually read them? You’re saying “No David, don’t do it.” Too late — I’ve done it.

The HTML

<form method="post">
	<div id="terms-pane">
		<h2>Terms & Conditions</h2>
		<p>Pellentesque habitant morbi tristique senectus...</p>
		<p>Pellentesque habitant morbi tristique senectus...</p>
		<!-- many more... -->
	</div>
	<input type="submit" name="submit" id="submit" value="Submit" />
</form>

The scrolling area must be wrapped with a DIV.

Google-Style Element Fading Using MooTools or jQuery

Google recently introduced an interesting effect to their homepage: the top left and top right navigation items don’t display until you move your mouse or leave the search term box. Why? I can only speculate that they want their homepage as simple as possible; after all, the search box is given focus immediately and at least half of their users probably just type their term and hit enter — no need for more clutter. Here’s how you can implement a similar system with MooTools or jQuery.

Feeds & Profiles

Sponsors

Tutorials & Topics

Script & Style Tweets