The amount of jQuery required to duplicate this effect is next to nothing;  in fact, there’s more CSS than there is jQuery code!  Let’s explore how we can duplicate jQuery’s tooltip effect.

The HTML

The overall structure includes a wrapping DIV element with each tooltip link featured in a list:

<div id="jq-intro" class="jq-clearfix">
	<h2>jQuery is a new kind of JavaScript Library.</h2>
	<p>jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and AJAX interactions for rapid web development. <strong>jQuery is designed to change the way that you write JavaScript.</strong></p>
	<ul class="jq-checkpoints jq-clearfix">
		<li><a href="http://docs.jquery.com/Tutorials" title="Lightweight Footprint" class="jq-thickbox">Lightweight Footprint</a>
			<div class="jq-checkpointSubhead">
				<p>About 18KB in size <em>(Minified and Gzipped)</em></p>
			</div>
		</li>
		<li><a href="http://docs.jquery.com/Tutorials" title="CSS3 Compliant" class="jq-thickbox">CSS3 Compliant</a>
			<div class="jq-checkpointSubhead">
				<p>Supports CSS 1-3 selectors and more!</p>
			</div>
		</li>
		<li><a href="http://docs.jquery.com/Tutorials" title="Cross-browser" class="jq-thickbox">Cross-browser</a>
			<div class="jq-checkpointSubhead">
				<p>IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome</p>
			</div>
		</li>
	</ul>
</div>

Note that the UL element has been given a jq-checkpoints CSS class — we’ll use that in a selector for both CSS styling and element collection using jQuery.

The CSS

Like I said…there’s more CSS than there will be jQuery code:

#jq-intro 			{ padding-top:1em; width:605px; margin:0 auto; }
#jq-intro h2 		{ font-size:1.9em; font-weight:bold; color:#5DB0E6; line-height:1em; }
#jq-intro h2 span.jq-jquery { float:left; width:81px; height:23px; margin-right:.3em; position:relative; }
#jq-intro h2 span.jq-jquery span { position:absolute; left:-999999px; }
#jq-intro p 		{ clear:both; font-size:1.5em; margin:5px 0; font-weight:normal; line-height:1.6; }
#jq-intro ul 		{ padding:1.5em 0; list-style-type:none; }
#jq-intro li 		{ float:left; font-size:1.4em; }
#jq-intro li a 	{ color:#5DB0E6; font-weight:bold; text-decoration:underline; float:left; padding:0 30px 0 23px; }
#jq-intro li p 	{ font-size:12px; }
#jq-intro li 		{ position:relative; }
div.jq-checkpointSubhead { display:none; position:absolute; width:253px; height:54px; background:url(jquery-tooltip.png) 0 0 no-repeat; top:-1.5em; left:-35%; z-index:100; }
div.jq-checkpointSubhead p { font-size:1em; padding:10px 5px 0 50px; color:#AE0001; font-weight:bold; line-height:1.3em; margin:0; cursor:pointer; }

Most of the CSS is gloss for the overall look.  The important piece is the jq-checkpointSubhead CSS class being positioned absolutely and with an initial display value of none.  That will allow us to use the :hidden selector within jQuery.

The jQuery JavaScript

And now for the jQuery JavaScript:

jQuery(document).ready(function() {
	var duration = 500;
	jQuery('.jq-checkpoints li').hover(
		function(){ jQuery(this).find('div.jq-checkpointSubhead:hidden').fadeIn(duration); },
		function(){ jQuery(this).find('div.jq-checkpointSubhead:visible').fadeOut(duration); }
	);
});

When the use hovers over the list items, the tooltip for the given list item fades in.  When the user leaves the list item, the tooltip fades out.

There you have it.  If you’re interested in how to do this with out JavaScript frameworks, read my MooTools and Dojo tutorials!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Duplicate the jQuery Homepage Tooltips

Related posts:

1. Duplicate the jQuery Homepage Tooltips Using MooTools
2. Duplicate the jQuery Homepage Tooltips Using Dojo
3. MooTools 1.2 Tooltips: Customize Your Tips
4. Sexy Album Art with MooTools or jQuery
5. TextboxList for MooTools and jQuery by Guillermo Rauch

There’s nothing like a subtle, slick website widget that effectively uses CSS and JavaScript to enhance the user experience.  Of course widgets like that take many hours to perfect, but it doesn’t take long for that effort to be rewarded with above-average user retention and buzz.  One of the widgets I love is Twitter’s “Follow” button.  Let me show you how you can implement this functionality with three popular JavaScript toolkits:  MooTools, jQuery, and Dojo.

Note:  This tutorial will only display the client side handling of the form submission — NOT any PHP/MySQL/server-side handling of the request.

The HTML Structure

	
	
		follow
	

The HTML for the button is very simple.  The structure revolves around a BUTTON element which contains an I element and SPAN element.  You’re probably thinking “An I element?  WTF.”  I know I did.  The truth of the matter is that the I element is deprecated and, as far as I’m concerned, and be used for any purpose the developer would like.  I’m also sure that Twitter doesn’t mind saving bytes here or there.

The CSS Styles

/* twitter button and its children */
button.btn { 
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	background-attachment:scroll;
	background-color:#ddd;
	background-image:url(http://s.twimg.com/a/1282150308/images/buttons/bg-btn.gif);
	background-position:0 0;
	background-repeat:repeat-x;
	border:1px solid #ddd;
	border-bottom:1px solid #ccc;
	color:#333;
	cursor:pointer;
	font-family:"Lucida Grande",sans-serif;
	font-size:11px;
	line-height:14px;
	padding:4px 8px 5px 8px;
	text-shadow:1px 1px 0 #fff;
	vertical-align:top;
}
button.btn:hover {
	border:1px solid #999;
	border-bottom-color:#888;
	color:#000;
	background-color:#d5d5d5;
	background-position:0 -6px;
}
button.btn:active {
	background-image:none !important;
	text-shadow:none !important;
}
			
button.btn i {
	background-image:url(http://s.twimg.com/a/1282150308/images/sprite-icons.png);
	background-position:-176px -32px;
	background-repeat:no-repeat;
	display:inline-block;
	height:13px;
	margin-right:5px;
	width:15px;
}
button.btn i.active	{ background:url(http://s.twimg.com/a/1282150308/images/spinner.gif); }

/* properties for the element that is generated *after* following */
span.following	{  background:#ffd; padding:5px 10px; }
span.following span { width:10px; height:9px; margin-right:5px; display:inline-block; background:url("http://s.twimg.com/a/1282150308/images/sprite-icons.png") -160px -16px no-repeat; }

Most of the styling for this button goes onto the BUTTON element itself.  You’ll notice directives to round the button;  leaving the button sharp also please the eye.  Through the regular, hover, and active button states, check out how Twitter users the background position and colors to nicely modify the button without the need for additional images.  You’ll also notice Twitter uses sprites…as should you.

The MooTools JavaScript

/* with mootools */
window.addEvent('domready',function() {
	/* fetch elements */
	$$('form.follow-form').each(function(form) {
		/* stop form event */
		form.addEvent('submit',function(e) {
			/* stop event */
			if(e) e.stop();
			/* send ajax request */
			var i = form.getElement('i');
			new Request({
				url: 'twitter-follow.php',
				method: 'post',
				data: {
					followID: form.getElement('input').value
				},
				onRequest: function() {
					i.addClass('active');
				},
				onSuccess: function() {
					var button = form.getElement('button');
					button.setStyle('display','none');
					new Element('span',{
						html: 'Following!',
						'class': 'following'
					}).inject(button,'after');
				},
				onComplete: function() {
					i.removeClass('active');
				}
			}).send();
		});
	});
});

The first step is grabbing all of the FORM elements with the follow-form CSS class.  Upon form submission, the default submission action is stopped.  An AJAX request is fired, using the INPUT element’s ID as the user to follow.  When the request is fired, the I element’s background image is set to the spinner.  When the request is complete, the button is hidden and a new SPAN element is displayed informing the user that they are now following the given user!

The jQuery JavaScript

// Idiomatic jQuery by Doug Neiner
jQuery(function ($) {
	/* fetch elements and stop form event */
	$("form.follow-form").submit(function (e) {
		/* stop event */
		e.preventDefault();
		/* "on request" */
		$(this).find('i').addClass('active');
		/* send ajax request */
		$.post('twitter-follow.php', {
			followID: $(this).find('input').val()
		}, function () {
			/* find and hide button, create element */
			$(e.currentTarget)
			  .find('button').hide()
			  .after('<span class="following"><span></span>Following!</span>');
		});
	});
});

The code above is based off of the MooTools code.  The workflow is exactly the same.

The Dojo JavaScript

/* when the DOM is ready */
dojo.ready(function() {
	/* fetch elements */
	dojo.query('form.follow-form').forEach(function(form) {
		/* stop form event */
		dojo.connect(form,'onsubmit',function(e) {
			/* stop event */
			dojo.stopEvent(e);
			/* active class */
			dojo.query('i',form).addClass('active');
			/* get button */
			var button = dojo.query('button',form)[0];
			/* ajax request */
			dojo.xhrPost({
				form: form,
				load: function() {
					dojo.style(button,'display','none');
					dojo.create('span',{
						innerHTML: 'Following',
						className: 'following'
					},button,'after');
				}
			});
		});
	});
});

The code above is based off of the MooTools code.  The workflow is exactly the same.

This “Follow” button is only one of many details that Twitter has paid attention to, just to make the user experience on the site better.  Take note from the effort put forth by large websites — adding these types of details to your smaller websites can make the user experience much better for YOUR users!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Create a Twitter AJAX Button with MooTools, jQuery, or Dojo

Related posts:

1. Create Twitter-Style Buttons with the Dojo Toolkit
2. Create GitHub-Style Buttons with CSS and jQuery, MooTools, or Dojo JavaScript
3. Animated AJAX Record Deletion Using Dojo
4. Create an Animated Sliding Button Using MooTools
5. Create Twitter-Style Dropdowns Using jQuery

Calculate Element Dimensions and Position

Knowing not only the height and width of a dimension but it’s top/left position from an offset parent or document body can be extremely helpful when trying to animate or move a DOM element.

MooTools

var dimensions = document.id('myElement').getDimensions();
/* returns:
{ 
	height: 4684,
	width: 1408,
	x: 1408,
	y: 4684
}
*/

jQuery

var myElement = jQuery('#myElement');
var position = myElement.position();
var dimensions = {
	height: myElement.height(),
	width: myElement.width(),
	top: position.top,
	left: position.left
};

Dojo

var dimension = dojo.coords('myElement');
/* returns:
{
	h: 4684,
	l: 0,
	t: 0,
	w: 1408,
	x: 0,
	y: 0
}
*/

Extend an Object

Extending an object means taking on object and merging a second objects properties into it. This is very helpful in merging default options with instance options.

MooTools

$extend(firstObject,{ anotherProperty:'anothervalue' });
//second arg is added to the first object

jQuery

jQuery.extend(firstObject,{ anotherProperty:'anothervalue' })

Dojo

dojo.mixin(firstObject,{ anotherProperty:'anothervalue' });

Stop an Event

Stopping an event is helpful when looking to execute functionality (usually an XHR request) when a link is clicked.

MooTools

$('myElement').addEvent('click',function(e) {
	e.stop();
});

jQuery

$('#myElement').click(function(e){ 
	event.stopPropagation();
	e.preventDefault();
	// (no internal method that does both)
});

Dojo

dojo.connect(dojo.byId('myElement'),'onclick',function(e) {
	dojo.stopEvent(e);
});

Load Content into an Element

Sure we can create an XHR request manually to load content into an element but why do that when your favorite lirbary can do that work for you?

MooTools

document.id('myElement').load('ajax/script.html');

jQuery

jQuery('#myElement').load('ajax/script.html');

Dojo

//as found on Pete Higgins' website:
//http://higginsforpresident.net/2009/12/140-characters-of-awesome/
dojo.extend(dojo.NodeList, {
	grab: function(url){
		dojo.xhr('GET', { url:url })
			.addCallback(this, function(response){
				this.addContent(response, 'only');
			});
		return this;
	}
});
dojo.query('#myElement').grab('header.html');

Get and Set HTML Content

Getting and setting HTML is a frequent JavaScript operation…yet each library handles it a bit differently.

MooTools

//get
var html = document.id('myElement').get('html');
//set
document.id('myElement').set('html','Hello!');

jQuery

//get
var html = jQuery('#myElement').html();
//set
jQuery('#myElement').html('Hello!');

Dojo

//get 
var html = dojo.byId('myElement').innerHTML
//set
dojo.byId('myElement').innerHTML = 'Hello!';

Use Element Storage

Element data storage is important because it allows you to store settings within the element itself — perfect for defeating scope and context issues.

MooTools

//set
document.id('myElement').store('key','value');
//get
var value = document.id('myElement').retrieve('key');

jQuery

//set
jQuery('#myElement').data('key','value');
//get
var value = jQuery('#myElement').data('key');

Dojo

//set
dojo.attr('myElement','data-key','value');
//get
dojo.attr('myElement','data-key');

There you are — more proof that the toolkits are one in the same, all except the syntax.  Do yourself a favor and learn more than one JavaScript framework — you’ll be better for it!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Accomplishing Common Tasks Using MooTools, jQuery, and Dojo III

Related posts:

1. Accomplishing Common Tasks Using MooTools, jQuery, and Dojo
2. Accomplishing Common Tasks Using MooTools, jQuery, and Dojo II
3. Quick Dojo Setup Snippet for MooTools Developers
4. dojo.connect: A Powerful Object and Event Listener
5. Create GitHub-Style Buttons with CSS and jQuery, MooTools, or Dojo JavaScript

Loop Through an Element Collection

MooTools

$$('div').each(function(div) {
	/* do stuff here */
});

jQuery

jQuery('div').each(function(){ 
	/* do stuff;  "this" is the element */
});

Dojo

dojo.query('div').forEach(function(div){ 
	/* do stuff */
});

Get an Element Attribute Value

MooTools

var rel = document.id('myElement').get('rel');

jQuery

var rel = jQuery('#myElement').attr('rel');

Dojo

//var rel = dojo.query('#myElement').attr('rel')[0];
var rel = dojo.attr('myElement','rel');

Create a Plugin / Class – Template

MooTools

var myClass = new Class({
	
	initialize: function(options) {
		/* do initial processing */
	}
	
});

jQuery

jQuery.fn.myClass = function(options) {
	
	return this.each(function() {
		/* do initial processing */
	});
	
};

Dojo

dojo.provide('mynamespace.PluginName');
dojo.declare('mynamespace.PluginName',null,{
	
	constructor: function(options) {
		/* do initial processing */
	}
	
});

Set and Get Cookie Key=>Values

MooTools

/* set */
Cookie.write('key','value',{ duration: 5 }); //5 days
/* get */
var cookieValue = Cookie.read('key');

jQuery

/* 
	requires this plugin:  http://plugins.jquery.com/project/cookie
*/
/* set */
jQuery.cookie('key','value', { expires: 5 });
/* get */
var cookieValue = jQuery.cookie('key');

Dojo

/* get dojo's cookie class */
dojo.require('dojo.cookie');
/* set */
dojo.cookie('key','value', { expires: 5 }); //5 days
/* get */
var cookieValue = dojo.cookie('key');

Retrieve JSON via XHR

MooTools

var jsonRequest = new Request.JSON({
	url: 'info.json', 
	onSuccess: function(json){
    	/* do something with results */
	}
}).get();

jQuery

jQuery.getJSON('info.json',function(json) {
	/* do something with results */
});

Dojo

dojo.xhrGet({
	url: 'info.json',
	handleAs: 'json',
	load: function(json) {
		/* do something with results */
	}
});

There you are — more proof that the toolkits are one in the same, all except the syntax.  Do yourself a favor and learn more than one JavaScript framework — you’ll be better for it!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Accomplishing Common Tasks Using MooTools, jQuery, and Dojo II

Related posts:

1. Accomplishing Common Tasks Using MooTools, jQuery, and Dojo III
2. Accomplishing Common Tasks Using MooTools, jQuery, and Dojo
3. dojo.connect: A Powerful Object and Event Listener
4. Quick Dojo Setup Snippet for MooTools Developers
5. Create GitHub-Style Buttons with CSS and jQuery, MooTools, or Dojo JavaScript

MooTools (FTW)

window.addEvent('domready',function() {
	//do stuff
});

jQuery

jQuery(document).ready(function() {
	//do stuff
})

Dojo Toolkit

dojo.addOnLoad(function() {
	//do stuff
});

YUI

YUI().use('*',function(Y) {
	Y.on("domready", function() {
		//do stuff
	}, Y, "The DOMContentLoaded event fired.  The DOM is now safe to modify via script.");
});

Prototype

document.observe("dom:loaded", function() { 
	//do stuff
});

Sencha JS

Ext.onReady(function() {
	//do stuff
});

Be sure to let me know if I’m missing a framework — I’d like this list to become as comprehensive as possible!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: DomReady Event Methods in JavaScript Frameworks

Related posts:

1. Quick Tip: Faster DOMReady Checks with MooTools
2. When JavaScript Frameworks Collide
3. 6 Reasons To Use JavaScript Libraries & Frameworks
4. New MooTools Methods: .from()
5. Prototype’s Element.on with MooTools

I’ll be honest with you: I still haven’t figured out if I like my MooTools teammate Guillermo Rauch. He’s got a lot stacked up against him. He’s from Argentina so I get IM’ed about 10 times a day about how great Lionel Messi is. He lives in California so he doesn’t have to deal with 3 months of bitter cold like I do in Madison. He even takes some of my chicks. All that said…he’s just…just…so damn smart. In the end I think some of my bitterness about Guiller is that he’s smarter than me. Better than me at MooTools, JavaScript, and even life.

Evidence of Guiller’s FTW-age can be found in his TextboxList plugin. TextboxList is a Facebook-style input list originally used by a small startup called Facebook. TextbloxList is available in both MooTools and jQuery flavors and is incredibly easy to implement. Lets walk through a simple example.

The HTML

Enter tags (with commas)

Type the tag (one or more words) and press comma (,). Use left/right arrows, backspace, delete to navigate

An input element. That’s it. (Editor’s note: Sometimes I don’t understand why I even put a small description of the HTML portion of my code examples. Since I follow the “JS for enhancements” philosophy, the HTML part is usually self-explanatory. ….That is all.)

The CSS

.textboxlist { font: 11px "Lucida Grande", Verdana; cursor: text; }
.textboxlist-bits { zoom: 1; overflow: hidden; margin: 0; padding: 3px 4px 0; border: 1px solid #999; *padding-bottom: 3px; }
.textboxlist-bit { list-style-type: none; float: left; display: block; padding: 0; margin: 0 5px 3px 0; cursor: default; }
.textboxlist-bit-editable { border: 1px solid #fff; }
.textboxlist-bit-editable-input { border: 0; padding: 2px 0; *padding-bottom: 0; height: 14px; font: 11px "Lucida Grande", Verdana; }
.textboxlist-bit-editable-input:focus { outline: 0; }
.textboxlist-bit-box { position: relative; line-height: 18px; padding: 0 5px; -moz-border-radius: 9px; -webkit-border-radius: 9px; border-radius: 9px; border: 1px solid #CAD8F3; background: #DEE7F8; cursor: default; }
.textboxlist-bit-box-deletable { padding-right: 15px; }
.textboxlist-bit-box-deletebutton { position: absolute; right: 4px; top: 6px; display: block; width: 7px; height: 7px; font-size: 1px; background: url('close.gif'); }
.textboxlist-bit-box-deletebutton:hover { border: none; background-position: 7px; text-decoration: none; }
.textboxlist-bit-box-hover { background: #BBCEF1; border: 1px solid #6D95E0; }
.textboxlist-bit-box-focus { border-color: #598BEC; background: #598BEC; color: #fff; }
.textboxlist-bit-box-focus .textboxlist-bit-box-deletebutton { background-position: bottom; }

TextboxList comes with its own CSS stylesheet so the CSS portion is done for you. There’s only one image required for TextboxList and it’s sprited, at that. Guiller doesn’t leave anything unoptimized. (Editor’s note: Guiller’s attention to detail both impresses me and pisses me off.)

The MooTools Usage

//create an instance 
var t2 = new TextboxList('myListElement', {bitsOptions:{editable:{addKeys: 188}}});
//add a few just for giggles
t2.add('Tag 1').add('Tag 2');

The above example is an extremely simple usage — type a name, add a comma, and you can see the effect immediately. What’s even more awesome is that the plugin is keyboard-compatible, meaning you can press the arrow keys to move “over” or between items, and even delete them. Essentially you never have to use your mouse. Also of note is that Guillermo’s TextboxList class works with a bundled autocomplete plugin so you may quickly hook TextboxList in with your database. (Editor’s note: There’s also a special autocomplete snippet for binary searches….Yeah, I know, I bet you’re probably starting to dislike him too…)

All jokes aside, Guillermo Rauch is an awesome developer. You can follow him on Twitter, poach his code on GitHub (he’s a Node.js guru as well), or check out his musings on his blog. He also has project pages created for both the MooTools and jQuery versions of TextboxList so be sure to hit those to get the details on class options, events, and usages.

If you do by chance get a moment to throw a tweet at him be sure to thank him for creating the MooTools Forge!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: TextboxList for MooTools and jQuery by Guillermo Rauch

Related posts:

1. Editable Content Using MooTools 1.2, PHP, and MySQL
2. Create a Twitter AJAX Button with MooTools, jQuery, or Dojo
3. Color Palette Generator Using jQuery
4. Sexy Album Art with MooTools or jQuery
5. Create GitHub-Style Buttons with CSS and jQuery, MooTools, or Dojo JavaScript

I’m what you would consider a bit of a GitHub fanboy. We all know that GitHub is the perfect place to store repositories of open source code, but I think my love of GitHub goes beyond that. GitHub seems to understand that most repo sites are usually boring so they’ve spiced their site up with some catchy CSS and great JavaScript features. One tiny piece of the GitHub design I love are the basic buttons. Lets examine how we can create our own GitHub-style buttons with a bit of HTML, CSS, and JavaScript.

The HTML

<!-- button 1:"plain" -->
<a href="javascript:;" class="minibutton"><span>Basic Button</span></a>
<!-- button 2:"icon" -->
<a href="javascript:;" class="minibutton btn-download"><span><span class="icon"></span>Button With Icon</span></a>

Below are two styles of buttons: one basic button and one with an icon to the left of the text.

The CSS

	/* button basics */
	a.minibutton {
		display:inline-block;
		height:23px;
		padding:0 0 0 3px;
		font-size:11px;
		font-weight:bold;
		color:#333;
		text-shadow:1px 1px 0 #fff; 
		background:url(http://github.com/images/modules/buttons/minibutton_matrix.png) 0 0 no-repeat;
		white-space:nowrap;
		border:none;
		overflow:visible;
		cursor:pointer;
		text-decoration:none;
	}
	
	a.minibutton>span {
		display:block;
		height:23px;
		padding:0 10px 0 8px;
		line-height:23px;
		background:url(http://github.com/images/modules/buttons/minibutton_matrix.png) 100% 0 no-repeat;
	}
	
	a.minibutton:hover, a.minibutton:focus {
		color:#fff;
		text-decoration:none;
		text-shadow:-1px -1px 0 rgba(0,0,0,0.3);
		background-position:0 -30px;
	}
	a.minibutton:hover>span, a.minibutton:focus>span {background-position:100% -30px;}
	
	a.minibutton.mousedown{background-position:0 -60px; }
	a.minibutton.mousedown>span{background-position:100% -60px; }
	
	/* with icon */
	a.btn-download .icon {
		float:left;
		margin-left:-4px;
		width:18px;
		height:22px;
		background:url(http://github.com/images/modules/buttons/minibutton_icons.png?v20100306) 0 0 no-repeat;
	}
	a.btn-download .icon {background-position:-40px 0;}
	a.btn-download:hover .icon, a.btn-download:focus .icon {background-position:-40px -25px;}

The CSS is bountiful but it usually is when trying to achieve perfection. And just like most buttons, the GitHub button is an A element with a series of SPAN elements inside of it. You’ll also note more CSS code is needed to accommodate for the button…obviously.

The MooTools, Dojo, or jQuery JavaScript

/* MooTools (FTW) */
window.addEvent('domready',function() {
	$$('a.minibutton').addEvents({
		mousedown: function() {
			this.addClass('mousedown');
		},
		blur: function() {
			this.removeClass('mousedown');
		},
		mouseup: function() {
			this.removeClass('mousedown');
		}
	});
});

/* Dojo Toolkit */
dojo.addOnLoad(function() {
	var buttons = dojo.query('a.minibutton');
	buttons.connect('onmousedown',function() { dojo.addClass(this,'mousedown'); });
	buttons.connect('onblur',function() { dojo.removeClass(this,'mousedown'); });
	buttons.connect('onmouseup',function() { dojo.removeClass(this,'mousedown'); });
});

/* jQuery */
jQuery.ready(function() {
	jQuery('a.minibutton').bind({
		mousedown: function() {
			jQuery(this).addClass('mousedown');
		},
		blur: function() {
			jQuery(this).removeClass('mousedown');
		},
		mouseup: function() {
			jQuery(this).removeClass('mousedown');
		}
	});
});

GitHub gets it right by making the JavaScript portion only serve as an enhancement for button focus/mousedown. This JavaScript is not required.

In the end, the amount of CSS and JavaScript used is probably more than you would have thought but the result is really smooth. Feel free to profess your own love for GitHub below.

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Create GitHub-Style Buttons with CSS and jQuery, MooTools, or Dojo JavaScript

Related posts:

1. Create Twitter-Style Buttons with the Dojo Toolkit
2. Create a Twitter AJAX Button with MooTools, jQuery, or Dojo
3. Skype-Style Buttons Using MooTools
4. Accomplishing Common Tasks Using MooTools, jQuery, and Dojo III
5. Duplicate the jQuery Homepage Tooltips Using Dojo

Execute Code when the DOM is Ready

Dojo Toolkit

dojo.ready(function() {
	//do stuff
});

jQuery

jQuery(document).ready(function() {
	//do stuff
});

MooTools

window.addEvent('domready',function() {
	//do stuff
});

Collect Elements

Dojo Toolkit

var myElement = dojo.byId('myElement');
var divs = dojo.query('div');

jQuery

var myElement = jQuery('#myElement');
var divs = jQuery('div');

MooTools

var myElement = document.id('myElement');
var divs = $$('div');

Create Event Listeners

Dojo Toolkit

dojo.connect(dojo.byId('myElement'),'onclick',function() {
	alert('You clicked me!');
});

jQuery

jQuery('#myElement').click(function() {
	alert('You clicked me!');
});

MooTools

document.id('myElement').addEvent('click',function() {
	alert('You clicked me!');
});

Create a New Element, Inject Into Document.Body

Dojo Toolkit

dojo.create('div',{
	innerHTML: 'This is a new element',
	id: 'myElement'
},dojo.body());

jQuery

jQuery('<div id="myElement">This is a new element</div>').appendTo('body');

MooTools

new Element('div',{
	id: 'myElement',
	text: 'This is a new element'
}).inject(document.body);

Execute AJAX Requests

Dojo Toolkit

dojo.xhrPost({
	url: 'save.php',
	content: {
		id: dojo.byId('user-id').value
	}
	load: function(response) {
		alert('Received the following response:  ' + response);
	}
});

jQuery

jQuery.ajax({
	url: 'save.php',
	type: 'post',
	data: {
		id: jQuery('#user-id').val()
	},
	success: function(response) {
		alert('Received the following response:  ' + response);
	}
});

MooTools

new Request({
	url: 'save.php',
	method: 'post',
	data: {
		id: document.id('user-id').value
	},
	onSuccess: function(response) {
		alert('Received the following response:  ' + response);
	}
}).send();

Animate the Opacity of an Element

Dojo Toolkit

dojo.anim('myElement',{ opacity: 0.7 }, 250);

jQuery

jQuery('#myElement').fadeTo(250,0.7);
//duration first...ftl

MooTools

document.id('myElement').set('tween',{ duration: 250 }).fade(0.7);

See? Dojo, jQuery, and MooTools aren’t that different. Same problems, different solution syntax. Like Pete Higgins says: It’s just JavaScript!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Accomplishing Common Tasks Using MooTools, jQuery, and Dojo

Related posts:

1. Accomplishing Common Tasks Using MooTools, jQuery, and Dojo III
2. Accomplishing Common Tasks Using MooTools, jQuery, and Dojo II
3. dojo.connect: A Powerful Object and Event Listener
4. Create GitHub-Style Buttons with CSS and jQuery, MooTools, or Dojo JavaScript
5. Create a Twitter AJAX Button with MooTools, jQuery, or Dojo

Twitter does some great stuff with JavaScript. What I really appreciate about what they do is that there aren’t any epic JS functionalities — they’re all simple touches. One of those simple touches is the “Login” dropdown on their homepage. I’ve taken some time to duplicate that functionality with jQuery.

The HTML

<div id="menu1"><div class="relative">
	<a href="/demos" title="Popular MooTools Tutorials" id="dd1" class="dropdown" style="width:170px;text-decoration:none;"><span>Menu 1</span></a>
	<div id="dropdown1" class="dropdown-menu">
		<a href="/about-david-walsh" title="Learn a bit about me.">About Me</a>
		<a href="/page/1" title="The David Walsh Blog">Blog</a>
		<a href="/chat" title="#davidwalshblog IRC Chat">Chat</a>
		<a href="/contact" title="Contact David Walsh">Contact Me</a>
		<a href="/demos" title="CSS, PHP, jQuery, MooTools Demos">Demos &amp; Downloads</a>
		<a href="/js" title="ScrollSpy, Lazyload, Overlay, Context Menu">MooTools Plugins</a>
		<a href="/network" title="David Walsh Blog, Script &amp; Style, Band Website Template, Wynq">Network</a>
		<a href="/web-development-tools" title="JS, CSS Compression">Web Dev Tools</a>
	</div>
</div></div>

<div id="menu2"><div class="relative">
	<a href="/demos" title="Popular MooTools Tutorials" id="dd2" class="dropdown" rel="dropdown2" style="width:170px;text-decoration:none;"><span>Menu 2</span></a>
	<div id="dropdown2" class="dropdown-menu">
		<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
	</div>
</div></div>

A series of DIVS wrapping a link (the dropdown “trigger”) and a DIV containing the menu items.

The CSS

/* dropdowns: general */
a.dropdown { background: #88bbd4; padding: 4px 6px 6px; text-decoration: none; font-weight: bold; color: #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
a.dropdown:hover { background: #59b; }
a.dropdown { position: relative; margin-left: 3px; }
a.dropdown span { background-image: url(toggle_down_light.png); background-repeat: no-repeat; background-position: 100% 50%; padding: 4px 16px 6px 0; }
a.dropdown.dropdown-active { color:#59b; background-color:#ddeef6; }
a.dropdown.dropdown-active span { background:url(toggle_up_dark.png) 100% 50% no-repeat; }
.dropdown-menu	{ background:#ddeef6; padding:7px 12px; position:absolute; top:16px; right:0; display:none; z-index:5000; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; }
	.dropdown-menu p { font-size:11px; }
.dropdown-menu a:link, .dropdown-menu a:visited	{ font-weight:bold; color:#59b; text-decoration:none; line-height:1.7em; }
.dropdown-menu a:active, .dropdown-menu a:hover { color:#555; }

			* html .dropdown-menu { top:28px; }
			*+ html .dropdown-menu { top:28px; }

/* dropdowns: specific */
#menu1			{ float:left; margin-right:20px; }
	#dropdown1	{ width:150px; }
	#dropdown1 a	{ display:block; }
#menu2			{ float:left; }
	#dropdown2	{ width:150px; font-size:11px; }
.relative		{ position:relative; }

There’s a lot of CSS involved but most of it is simple visual styling as opposed to styling for JavaScript’s sake. Do, however, note where relative and absolute positioning is used. The outermost DIV may be positioned absolutely if you’d like. Also note that I’m not doing anything to accommodate for rounded corners in IE — I recommend DD_Roundies for that.

The jQuery JavaScript

$(document).ready(function() {
	/* for keeping track of what's "open" */
	var activeClass = 'dropdown-active', showingDropdown, showingMenu, showingParent;
	/* hides the current menu */
	var hideMenu = function() {
		if(showingDropdown) {
			showingDropdown.removeClass(activeClass);
			showingMenu.hide();
		}
	};
	
	/* recurse through dropdown menus */
	$('.dropdown').each(function() {
		/* track elements: menu, parent */
		var dropdown = $(this);
		var menu = dropdown.next('div.dropdown-menu'), parent = dropdown.parent();
		/* function that shows THIS menu */
		var showMenu = function() {
			hideMenu();
			showingDropdown = dropdown.addClass('dropdown-active');
			showingMenu = menu.show();
			showingParent = parent;
		};
		/* function to show menu when clicked */
		dropdown.bind('click',function(e) {
			if(e) e.stopPropagation();
			if(e) e.preventDefault();
			showMenu();
		});
		/* function to show menu when someone tabs to the box */
		dropdown.bind('focus',function() {
			showMenu();
		});
	});
	
	/* hide when clicked outside */
	$(document.body).bind('click',function(e) {
		if(showingParent) {
			var parentElement = showingParent[0];
			if(!$.contains(parentElement,e.target) || !parentElement == e.target) {
				hideMenu();
			}
		}
	});
});

I’ve commented to the code to illustrate what each block does. In a nutshell:

• I create placeholder variables which will keep track of the current menu, dropdown, and parent for the opened menu. This functionality is only included because I don’t want more than one menu to be open at a time.
• I create a function that hides the current menu — this can be used from anywhere within the closure.
• I cycle through each dropdown and add events to relevant elements to show and hide menus.
• I add an event to the body to close the current menu if the user clicks outside of the menu.

That’s it!

Be sure to check out the MooTools version.

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Create Twitter-Style Dropdowns Using jQuery

Related posts:

1. Create Twitter-Style Dropdowns Using MooTools
2. Create Twitter-Style Buttons with the Dojo Toolkit
3. Create a Twitter AJAX Button with MooTools, jQuery, or Dojo
4. Track Clicks Outside Active Elements with MooTools or jQuery
5. Create GitHub-Style Buttons with CSS and jQuery, MooTools, or Dojo JavaScript

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.

Featured jQuery & MooTools Snippets

Using jQuery and MooTools Together

Did you know that you can use jQuery and MooTools within the same page? It’s easy to!

<script type="text/javascript" src="moo1.2.4.js"></script>
<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript">
window.addEvent('domready',function() { //moo stuff
	$('p').css('border','1px solid #fc0'); //jquery
});
</script>

Using Sizzle Within MooTools

Prefer to use jQuery’s selector engine within MooTools? No problem — here’s how:

//just as reader "Ryan" mentioned....
Window.$$ = function(selector){
	return new Elements(new Sizzle(selector));
}

jQuery and MooTools Link Nudging

Link nudging is a classy, subtle effect that makes your websites more dynamic.

/* jquery */
$.fn.nudge = function(params) {
	//set default parameters
	params = $.extend({
		amount: 20,
		duration: 300,
		property: 'padding',
		direction: 'left',
		toCallback: function() {},
		fromCallback: function() {}
	}, params);
	//For every element meant to nudge...
	this.each(function() {
		//variables
		var $t = $(this);
		var $p = params;
		var dir = $p.direction;
		var prop = $p.property + dir.substring(0,1).toUpperCase() + dir.substring(1,dir.length);
		var initialValue = $t.css(prop);
		/* fx */
		var go = {}; go[prop] = parseInt($p.amount) + parseInt(initialValue);
		var bk = {}; bk[prop] = initialValue;
		
		//Proceed to nudge on hover
		$t.hover(function() {
					$t.stop().animate(go, $p.duration, '', $p.toCallback);
				}, function() {
					$t.stop().animate(bk, $p.duration, '', $p.fromCallback);
				});
	});
	return this;
};

/* jquery usages */
$(document).ready(function() {
	/* usage 1 */
	$('#nudgeUs li a').nudge();
	/* usage 2 */
	$('#nudgeUs2 li a').nudge({
		property: 'margin',
		direction: 'left',
		amount: 30,
		duration: 400,
		toCallback: function() { $(this).css('color','#f00'); },
		fromCallback: function() { $(this).css('color','#000'); }
	});
});

/* mootols link nudge */
window.addEvent('domready',function() {
	$$('#nudges a').addEvents({
		'mouseenter': function() { this.tween('padding-left',20); },
		'mouseleave': function() { this.tween('padding-left',0); }
	});
});

jQuery and MooTools Search Bookmarklets

These bookmarklets will allow you to highlight text on a page and search the jQuery or MooTools websites to learn more about the phrase.

jQuery Events within MooTools

The following MooTools snippet allows you to use jQuery-style syntax for event listening.

//hash the element.natives so we can do stuff with it
var hash = new Hash(Element.NativeEvents);
//remove items that need to be replaced, add their replacements
hash.erase('mouseover').erase('mouseout').erase('DOMMouseScroll');
hash.include('mouseenter',1).include('mouseleave',1);
//initialize this
var eventHash = new Hash({});
//for every event type, add to our hash
hash.getKeys().each(function(event){
	eventHash[event] = function(fn) {
		this.addEvent(event,fn);
		return this;
	}
});
//make it happen
Element.implement(eventHash);

JavaScript FTW!

Here are a few other MooTools and jQuery tutorials you may like:

• Sexy Opacity Animation with MooTools or jQuery
• Google-Style Element Fading Using MooTools or jQuery
• iPhone Click Effect Using MooTools or jQuery
• Record Text Selections Using MooTools or jQuery AJAX
• Remove Broken Images Using MooTools or jQuery
• Duplicate the jQuery Homepage Tooltips Using MooTools
• All jQuery Tutorials
• All MooTools Tutorials
• All MooTools & jQuery Demos

Isn’t the JavaScript community great? MooTools FTW!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: jQuery Podcast & Essential jQuery and MooTools Snippets

Related posts:

1. jQuery Link Nudge Plugin
2. Implementing jQuery-Like Event Syntax in MooTools
3. David Walsh on the Faceoff Show Podcast
4. Using jQuery and MooTools Together
5. Count MooTools Events Per Element in MooTools 1.2