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.

In an example for a previous post, I showed you how to use opacity during a drag’n'drop transaction. One bit I didn’t account for was element stacking and bringing the most recent element to the top of the stack. To do so, we’ll need to use a variable that represents the highest zIndex, which we’ll be incrementing.

The MooTools Javascript

window.addEvent('domready',function() {
	var zIndex = 2;
	$$('.draggable').each(function(el) {
		var drag = new Drag.Move(el,{
			grid: false,
			preventDefault: true,
			onStart: function() {
				el.setStyle('z-index',zIndex++); //increment!
			}
		});
	});
});

As you probably expected, the process is as simple as it gets. Correct stacking order is incredibly important as you don’t want items to be wrongly buried.

Sometimes we’re presented with unforeseen problems when it comes to our javascript effects. In this case, I’m talking about printing jQuery and MooTools accordions. Each “closed” accordion content element has its height set to 0 which means it will be hidden when the user tries to print the page. Luckily MooTools Core Developer Thomas Aylott provides a simple fix.

The CSS Fix

@media print {
	.element { height:auto !important; }
}

That’s it — no joke. Setting a print-specific height of auto with the ever-useful !important declaration fixes everything.

A week back I saw a great effect created by CSSKarma: input labels being animated horizontally. The idea is everything positive: elegant, practical, unobtrusive, and requires very little jQuery code. Luckily the effect doesn’t require much MooTools code either!

The HTML

<form action="" method="post" id="info">
	<h2>Contact Information</h2>
    <div id="name-wrap" class="slider">
        <label for="name">Name</label>
        <input type="text" id="name" name="name">

    </div><!--/#name-wrap-->

    <div id="email-wrap"  class="slider">
        <label for="email">Email</label>
        <input type="text" id="email" name="email" />
    </div><!--/#email-wrap-->

    <div id="street-wrap"  class="slider">
        <label for="st">Street</label>

        <input type="text" id="st" name="st" />
    </div><!--/#street-wrap-->

    <div id="city-wrap"  class="slider">
        <label for="city">City & State</label>
        <input type="text" id="city" name="city" />
    </div><!--/#city-wrap-->

    <div id="zip-wrap"  class="slider">

        <label for="zip">Zip code</label>
        <input type="text" id="zip" name="zip" />
    </div><!--/#zip-wrap-->

    <input type="submit" id="btn" name="btn" value="submit" />
</form>

A simple form with DIVs wrapping labels and inputs. This probably looks like many of your forms.

The following tools is in its very beta stages and works intermittently. Its so damn useful that I had to show it off now though!

I recently stumbled upon Downloadify, a client-side file generation tool based on javascript and Flash ActionScript code. A huge advantage to creating files on the client-side is that you can reduce the load on the server — especially when there’s no need for the server to get involved (the data is available within the page, etc.) Lets take a look at how we can use Downloadify.