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