Many of you probably already know this but I like to consider myself a bit of a javascript chameleon. If you know that then you probably know I’m a MooTools fanatic that periodically dabbles with jQuery. I’m happy to announce that I was able to join Elijah Manor and Ralph Whitbeck on the jQuery podcast this past week to talk jQuery, MooTools, and web development in general. Head on over to the jQuery blog for more information or iTunes to grab the podcast.

As an extension of my podcast appearance, I wanted to share a few code snippets to make your introduction to MooTools or jQuery easier.

Frequently asked questions can be super boring, right? They don’t have to be! I’ve already shown you how to create fancy FAQs with MooTools — here’s how to create the same effect using jQuery.

The HTML

<h3>This is question 1?</h3>
<div>
	<p>This is the answer to question #1.  Pellentesque habitant morbi....</p>
</div>
<h3>This is question 2?</h3>
<div>
	<p>This is the answer to question #2.  Pellentesque habitant morbi....</p>
</div>
<!-- more... -->

Simply a series of H3s and DIVs wrapper in one container DIV. Simple, simple, simple.

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.

One project I’m currently working on requires jQuery. The project also features a datepicker for requesting a visit to their location. jQuery UI’s DatePicker plugin was the natural choice and it does a really nice job. One challenge I encountered was the need to prevent specific days from being picked. Here’s the jQuery javascript I used to accomplish that.

I’ve been working with the Magento eCommerce solution a lot lately and I’ve taken a liking to a technique they use with the top bar within their administrative control panel. When the user scrolls below a specified threshold, the top bar becomes attached to the top of the window and the opacity set to 50%. I’ve implemented this technique in my current design and have gotten numerous requests for a tutorial so…here you go!

The HTML

	Top of Page
	Bottom of Page
	

A DIV with whatever elements and structure you’d like within it.