A little over a year ago I authored a post titled Fancy FAQs with MooTools Sliders. My post detailed a method of taking boring FAQs and making them more robust using the world’s best javascript framework: MooTools. I’ve taken some time to improve my original code for optimal performance and functionality.

The HTML

	
This is question 1
	

		
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae....
	
	
This is question 2
	

		
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae....

The prospect of creating graphics charts with javascript is exciting. It’s also the perfect use of javascript — creating non-essential features with unobtrusive scripting. I’ve created a mix of PHP (the Analytics class), HTML, and MooTools javascript that will connect to Google Analytics, create an HTML table with the statistics for a given month, and use MooTools MilkChart to colorfully chart them out.

Many times you’ll see a form dynamically change available values based on the value of a form field. For example, a “State” field will change based on which Country a user selects. What annoys me about these forms is that they’ll often do an AJAX request to grab the states but wont show any indicator to the user that something is happening. We’re going to use MooTools to add an AJAX spinner image next to form fields that perform such AJAX requests.

We’ve all used word processing applications like Microsoft Word and if there’s one thing they’ve taught you it’s that you need to save every few seconds in anticipation of the inevitable crash. WordPress has mimicked this functionality within their WYSIWYG editor and I use it frequently. Here’s how to listen for “CONTROL+S” using MooTools.

The HTML

<form method="post" id="edit-form">
<textarea style="width:400px;height:250px;" name="content" id="content-box"><?php echo $_POST['content']; ?></textarea><br />
<input type="submit" id="save-button" value="Save and Continue" />
</form>

A simple form — no modifications needed for this functionality to work.

I wrote a post titled Get Slick with MooTools Kwicks ages ago. The post was quite popular and the effect has been used often. Looking back now, the original code doesn’t look as clean as it could. I’ve revised the original Kwicks code so that Kwicks is laid out in the form of a standard MooTools plugin.

The HTML

<div id="kwick">
	<ul id="kwicks">
		<li><a class="kwick john" href="http://en.wikipedia.org/wiki/John_lennon" title="John Lennon"><span>John Lennon</span></a></li>
		<li><a class="kwick paul" href="http://en.wikipedia.org/wiki/Paul_mccartney" title="Paul McCartney"><span>Paul McCartney</span></a></li>
		<li><a class="kwick george" href="http://en.wikipedia.org/wiki/George_harrison" title="George Harrison"><span>George Harrison</span></a></li>
		<li><a class="kwick ringo" href="http://en.wikipedia.org/wiki/Ringo_starr" title="Ringo Starr"><span>Ringo Starr</span></a></li>
	</ul>
</div>

The Kwicks system works based off of an HTML list containing list items with links.