David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

MooTools Plugin: Event.Mock

2010-09-02T03:13:15Z

Those of you who visit this blog often know that I have a certain love for the simple things: simple CSS enhancements, simple PHP scripts, and most importantly, simple JavaScript plugins. One plugin that recently caught my attention was Arieh Glazer Event.Mock plugin. Event.Mock is a tiny MooTools plugin (essentially just a small function; not a MooTools class) that does exactly what it says: provides a Mock event for easy use with Element.fireEvent.

Download Event.Mock

Why Event.Mock?

One frequent MooTools occurrence is assigning an event to a given element, then firing an event on the given element. The problem that occurs is that fireEvent doesn’t provide an Event object to the event listener’s function because a real event didn’t occur. Thus, if you reference the event within the listener function, you’ll get an error:

/* assign an event to myElement */
$('myElement').addEvent('click',function(e) {
	var target = e.target;  /* ERROR! -- e is null */
})

/* fire an event */
$('myElement').fireEvent('click');

Event.Mock serves as a fake event to provide to the listener function.

The Event.Mock MooTools JavaScript

/**
 * creates a Mock event to be used with fire event
 * @param Element target an element to set as the target of the event - not required
 *  @param string type the type of the event to be fired. Will not be used by IE - not required.
 *
 */
Event.Mock = function(target,type){
var e = window.event;
type = type || 'click';

if (document.createEvent){
    e = document.createEvent('HTMLEvents');
    e.initEvent(
        type, //event type
        false, //bubbles - set to false because the event should like normal fireEvent
        true //cancelable
    );
}
e = new Event(e);
e.target = target;
return e;
}

Event.Mock accepts two arguments: the first being the fake event’s target element, the second being the type of event (i.e. “click”, “mouseenter”, etc.) That means I can use Event.Mock as such:

/* listen! */
$('myElement').addEvent('click',function(e){
	/* log the event to the console */
	console.log(e);
});

/* fire! */
$('myElement').fireEvent('click',new Event.Mock($('myElement'),'mousedown'));

Boom. No worries about event errors AND useful information, in the form of a fake event target and type, is event listener function.

Big ups to Arieh for his simple but useful MooTools plugin!

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

Full David Walsh Blog Post: MooTools Plugin: Event.Mock

Duplicate the jQuery Homepage Tooltips

2010-08-31T13:48:40Z

The jQuery homepage has a pretty suave tooltip-like effect as seen below:

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.

View Demo

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.

View Demo

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

Quick Tip: Object Indexing vs. Array Collection

2010-08-27T01:33:21Z

The Setup & Goal

Let’s say that we have one large text document and we have a a bunch of keywords that we want to parse the document for. We don’t care how many times times the keyword appears — we just care that it’s been used. When we find a keyword, we need to record that keyword been found so that we may check at a later time.

Inefficient Method: Array Collection and Search

The first method to record that a keyword has been found is by pushing the keyword into one array:

//Assume an array called "foundKeywords" was defined above
if(shouldSave(keyword)) {
	foundKeywords.push(keyword);
}

At the end of the document search, we’d end up with an array like:

//the foundKeywords array looks like:
//['keyword1','keyword2','keyword2',...]

When it comes to checking this array for the existence of a given keyword, this method will prove inefficient. Why? Because we’d need to loop through the array and search until we found the given keyword (if ever). Those are a lot of “wasted” or fruitless cycles, even if we break the loop when the keyword was found. Inefficient is the only word to describe this process.

The Efficient Method: Object with Index

The fastest method of checking a storing keywords for later reference is by object (in JavaScript) or associative array (in PHP). Instead of adding the keyword to an array, we add the keyword as an index to a master object, giving the value as 1:

//Assume an object {} called "foundKeywords" was defined above
if(shouldSave(keyword)) {
	foundKeywords[keyword] = 1;
}

Why is this faster? No wasted cycles looking blindly through an array. The check is quick and simple:

if(foundKeywords[keyword]) { //FOUND!
	//do something
}

It’s either an index or it’s not! In PHP, we’d save the keyword to an associative array:

//Assume an array called "$found_keywords" was defined above
if(shouldSave($keyword)) {
	$found_keywords[$keyword] = 1;
}

//Later: checking if the keyword was there...
if($found_keywords[$keyword]) { //or array_key_exists($keyword,$found_keywords)
	//FOUND!
}

In a word…awesome. Not only fast but simple!

I cannot provide a benchmark because the speed of execution depends on how large the keyword array is. Suffice to say, for the sake of simplicity and speed, using an object with keyword index is definitely the way to go!

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

Full David Walsh Blog Post: Quick Tip: Object Indexing vs. Array Collection

Create a Twitter AJAX Button with MooTools, jQuery, or Dojo

2010-08-26T13:35:48Z

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.

View MooTools Demo View Dojo Demo View jQuery Demo

The HTML Structure

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.

View MooTools Demo View Dojo Demo View jQuery Demo

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

Create a Dynamic Flickr Image Search with the Dojo Toolkit

2010-08-24T15:01:56Z

The Dojo Toolkit is a treasure chest of great JavaScript classes. You can find basic JavaScript functionality classes for AJAX, node manipulation, animations, and the like within Dojo. You can find elegant, functional UI widgets like DropDown Menus, tabbed interfaces, and form element replacements within Dijit. In DojoX you can find charting libraries, special data stores, vector graphic helpers, and much more.

This post aims to mesh the three collections together. We’ll be creating a tabbed interface for grabbing Flickr images using Dijit’s TabContainer, DojoX’s Flickr data store, and basic Dojo code for event handling and node manipulation.

View Demo

Select a Theme

There are two main steps in adding a theme to the page: importing the theme stylesheet and adding the theme as a class name to the BODY element.

<style type="text/css">
	/* bring in the claro theme */
	@import "http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css";
	
	/* define styles per the images */
	a.thumb	{ display:inline-block; margin:0 20px 20px 0; }
	
</style>

<body class="claro">

The claro theme is new in Dojo 1.5 and happens to be my favorite.

Import Dojo From CDN, parseOnLoad:true

Pulling from Google’s CDN makes Dojo load lightning-fast. Adding a djConfig attribute with parseOnLoad:true instructs Dojo to scour the page looking for widgets.

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" type="text/javascript" djConfig="parseOnLoad:true"></script>

Alternatively you could configure Dojo by using the djConfig JavaScript variable:

djConfig = {
	parseOnLoad: true
};

Either way will suffice.

Create the HTML Structure: Tab Container and Search Form

Setting up the form comes first. The form is going to be very simple, containing only a search box and a submit button. Each node (FORM, INPUT, and BUTTON) is converted to its Dijit widget equivalent to provide extra functionality and themed display.

<!-- search will be here -->
<form dojoType="dijit.form.Form" id="searchForm">
	<input dojoType="dijit.form.ValidationTextBox" id="searchBox" missingMessage="Please provide a term to search" placeholder="search term..." required="true" />
	<button type="submit" dojoType="dijit.form.Button" id="searchButton">Submit Search</button>
</form>

The search box becomes a dijit.form.ValidationTextBox which allows me to require a value and display an error message if no term is provided. I’ve also used the placeholder attribute to display a message in the search box when there is no value. Dojo’s internal awesomeness adds JavaScript support for the same functionality if the user’s browser doesn’t support placeholder yet.

The second piece is placing the TabContainer and its initial content pane in the page. The initial ContentPane content will simply be a “welcome” tab so that there’s always one tab within the container:

<!-- will set the eventual dimensions for the tab container -->
<div style="width:675px;height:400px">
	<!-- will host all tabs and their content panes -->
	<div dojoType="dijit.layout.TabContainer" id="tabContainer" style="width:100%;height:100%;">
		<!-- welcome pane: title is tab name, make this tab selected -->
		<div dojoType="dijit.layout.ContentPane" title="Welcome Pane" selected="true">
			<p>
				Welcome to the Flickr Search data store and Tab Container example.  
				Submit your search and watch the tab load!
			</p>
		</div>
	</div>
</div>

Future tabs will be closable.

Require Dojo/Dijit/DojoX Dependencies

Before we can create our widgets and use Dojo classes, we need to load them:

/* require necessary classes */
dojo.require('dijit.layout.TabContainer');
dojo.require('dijit.layout.ContentPane');
dojo.require('dijit.form.Button');
dojo.require('dijit.form.Form');
dojo.require('dijit.form.ValidationTextBox');
dojo.require('dojox.data.FlickrStore');
dojo.require('dijit.Tooltip');

Dojo’s internal functionality will also direct dependencies of dependencies to be loaded. If you aren’t familiar with Dojo class loading, be sure to read The Beauty of dojo.require().

Dojo, Dijit, DojoX: Make It Happen

Now that the theme is in place, HTML structure is there, and we’ve required the necessary classes, we can code our application-specific JavaScript. There’s a decent amount of JavaScript need to make this work so let’s break it down.

Start by creating an object which will hold all of our open tabs and an instance of dojox.data.FlickrStore which will be used to query Flickr:

/* settings */
var tabSubjects = {};
var flickrStore = new dojox.data.FlickrStore();

Then collect the form elements as well as the TabContainer:

/* collect proper elements */
var searchForm = dijit.byId('searchForm');
var searchBox = dijit.byId('searchBox');
var searchButton = dijit.byId('searchButton');
var tabContainer = dijit.byId('tabContainer');

Add a “submit” event listener to the TabContainer…

/* connect click event to search */
dojo.connect(searchForm,'onSubmit',function(e) {

…which stops the normal form submission:

//stop!
dojo.stopEvent(e);

…grabs the value of the search box:

//store value - set to lower case to save to caching object
var value = searchBox.get('value').toLowerCase();

If a value is present, make sure there isn’t currently a search tab open for that term. If there is, focus on it. If this is a new search term, direct the dojox.data.FlickrStore instance to search and return images for the given term. Upon search, a new tab for this term is created with a default title and content string, added to the TabContainer, and this new tab is selected:

//if a value exists...
if(value) {
	//if the tab isn't already there...
	if(!tabSubjects[value]) {
		//do the search...
		flickrStore.fetch({
			query: { tags: value },
			onBegin: function() {
				//create the tab
				tabSubjects[value] = new dijit.layout.ContentPane({ 
					title:value, 
					content:'Searching for ' + value + '...', 
					closable:true,
					onClose: function() {
						//remove this from our saved tabs when closed
						tabSubjects[value] = null;
						return true;
					}
				});
				//add to tabcontainer and select
				tabContainer.addChild(tabSubjects[value]);
				tabContainer.selectChild(tabSubjects[value]);
			},

When the search is complete, we clear the contents of the tab’s pane and loop through each returned image, injecting it into the content pane. Lastly, we create a tooltip for the image which displays the image name when the user focuses on the image:

	onComplete: function(items) {
		//if we got items...
		if(items.length) {
			//clear the tab's content'
			tabSubjects[value].set('content','');
			//cycle through each image returned, inject into new tab, add tooltip
			dojo.forEach(items,function(item,i) {
				//create the link's ID for the tooltip
				var id = new Date().getTime() + '_' + i;
				var a = dojo.create('a',{ 
					href: flickrStore.getValue(item,'link'),
					className: 'thumb',
					target: '_blank',
					id:  id,
					innerHTML: '<img src="' + flickrStore.getValue(item,'imageUrlSmall') + '" alt="' + flickrStore.getValue(item,'title') +'" />'
				},tabSubjects[value].domNode);
				//tooltip!
				new dijit.Tooltip({ label: flickrStore.getValue(item,'title'), connectId: id });
			});
		}
		else {
			//provide "no images" content
			tabSubjects[value].set('content','There were no images available for this term.');
		}
		//empty the search box
		searchBox.set('value','');
		
	}
});

Here’s the complete JavaScript block for this app:

/* require necessary classes */
dojo.require('dijit.layout.TabContainer');
dojo.require('dijit.layout.ContentPane');
dojo.require('dijit.form.Button');
dojo.require('dijit.form.Form');
dojo.require('dijit.form.ValidationTextBox');
dojo.require('dojox.data.FlickrStore');
dojo.require('dijit.Tooltip');

/* when all classes have loaded... */
dojo.ready(function() {
	
	/* settings */
	var tabSubjects = {};
	var flickrStore = new dojox.data.FlickrStore();
	
	/* collect proper elements */
	var searchForm = dijit.byId('searchForm');
	var searchBox = dijit.byId('searchBox');
	var searchButton = dijit.byId('searchButton');
	var tabContainer = dijit.byId('tabContainer');
	
	/* connect click event to search */
	dojo.connect(searchForm,'onSubmit',function(e) {
		//stop!
		dojo.stopEvent(e);
		//store value
		var value = searchBox.get('value').toLowerCase();
		//if a value exists...
		if(value) {
			//if the tab isn't already there...
			if(!tabSubjects[value]) {
				//do the search...
				flickrStore.fetch({
					query: { tags: value },
					onBegin: function() {
						//create the tab
						tabSubjects[value] = new dijit.layout.ContentPane({ 
							title:value, 
							content:'Searching for ' + value + '...', 
							closable:true,
							onClose: function() {
								//remove this from our saved tabs when closed
								tabSubjects[value] = null;
								return true;
							}
						});
						//add to tabcontainer and select
						tabContainer.addChild(tabSubjects[value]);
						tabContainer.selectChild(tabSubjects[value]);
					},
					onComplete: function(items) {
						//if we got items...
						if(items.length) {
							//clear the tab's content'
							tabSubjects[value].set('content','');
							//cycle through each image returned, inject into new tab, add tooltip
							dojo.forEach(items,function(item,i) {
								//create the link's ID for the tooltip
								var id = new Date().getTime() + '_' + i;
								var a = dojo.create('a',{ 
									href: flickrStore.getValue(item,'link'),
									className: 'thumb',
									target: '_blank',
									id:  id,
									innerHTML: '<img src="' + flickrStore.getValue(item,'imageUrlSmall') + '" alt="' + flickrStore.getValue(item,'title') +'" />'
								},tabSubjects[value].domNode);
								//tooltip!
								if(flickrStore.getValue(item,'title')) { new dijit.Tooltip({ label: flickrStore.getValue(item,'title'), connectId: id }); }
							});
						}
						else {
							//provide "no images" content
							tabSubjects[value].set('content','There were no images available for this term.');
						}
						//empty the search box
						searchBox.set('value','');
						
					}
				});
			}
			//if it does exist, focus on it
			else {
				tabContainer.selectChild(tabSubjects[value]);
			}
		}
	});
});

How long would you say this took to write? Half hour? Hour? Three hours? Nope. This mini-application only took me about 15 minutes to write! DojoX also features a class for pulling images from Picasa.

View Demo

Nice, huh? Meshing Dojo, Dijit, and DojoX classes is a breeze thanks to Dojo’s tightly knit class system. I challenge you to create a simple application and see what you can do in an hour. Use Theme Tester as a helper should you need inspiration! And always share what you’ve created when you’re done!

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

Full David Walsh Blog Post: Create a Dynamic Flickr Image Search with the Dojo Toolkit

Dijit’s TabContainer Layout: Easy Tabbed Content

2010-08-23T03:56:15Z

One of Dojo’s major advantages over other JavaScript toolkits is its Dijit library. Dijit is a UI framework comprised of JavaScript widget classes, CSS files, and HTML templates. One very useful layout class is the TabContainer. TabContainer allows you to quickly create a tabbed content layout with minimal effort. Keep reading to see what you can create in just 10 minutes!

View Demo

The Basic Dijit HTML

<style type="text/css">
	/* bring in the claro theme */
	@import "http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css";

	/* bring in the widget-specific CSS classes */
	@import "http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/layout/ContentPane.css";
	@import "http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/layout/TabContainer.css";
</style>
<body class="claro">

The first piece of HTML requires grabbing the required CSS theme files and adding the theme name as a class to the BODY tag. All widgets on the page will use the claro theme unless otherwise specified. Once we have those details out of the way, we can code the HTML structure of TabContainer and ContentPanes:


<!-- will set the eventual dimensions for the tab container -->
<div style="width:600px;height:300px">
	
	<!-- will host all tabs and their content panes -->
	<div dojoType="dijit.layout.TabContainer" id="tabContainer" style="width:100%;height:100%;">
		
		<!-- content panes: title is tab name, make this tab selected -->
		<div dojoType="dijit.layout.ContentPane" title="Rod Stewart" selected="true">			
			<p>Roderick David "Rod" Stewart, CBE (born 10 January 1945)[1] is a British singer-songwriter...</p>			
		</div>
		
		<!-- content panes: title is tab name, no special features here -->
		<div dojoType="dijit.layout.ContentPane" title="Oasis">
			<p>Oasis were an English rock band that formed in Manchester in 1991...</p>
		</div>
		
		<!-- content panes: title is tab name, make this tab closable -->
		<div dojoType="dijit.layout.ContentPane" title="ColdPlay" closable="true" onClose="alert('Closing Tab!');">
			<p>Coldplay are an English alternative rock band...</p>
		</div>
		
		<!-- content panes: title is tab name, load content remotely, preload -->
		<div dojoType="dijit.layout.ContentPane" title="SomeBand" href="some-page.html" preload="true">
			<p>Lorem ipsum...</p>
		</div>
		
	</div>
</div>

You’ll notice the dojoType attribute on a few of the DIVs; that means we’re creating our widgets declaratively, not programatically. We’ll address what that means in a moment. For now, realize that the dojoType attribute’s content is the name of the JavaScript class that it will become. The title attribute text will become the actual tab’s content. Adding a selected attribute will make the given tab start as the selected tab, and adding a closable attribute will make the tab closable.

So how does Dojo know to turn these boring DIVs into rich widgets? parseonLoad!

Including Dojo with parseOnLoad; Requiring Dijit Widget Classes

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" type="text/javascript" djConfig="parseOnLoad:true"></script>

We start by pulling Dojo into the page with a normal SCRIPT tag (AOL CDN, Google CDN, local build). Note that I’ve added a djConfig attribute with parseOnLoad:true; — this will instruct Dojo to scour the page looking for Dijit widgets once the required classes have loaded. How do we require the proper classes? By using dojo.require, of course:

<script type="text/javascript">
	/* require necessary classes */
	dojo.require('dijit.layout.TabContainer');
	dojo.require('dijit.layout.ContentPane');
	dojo.require('dijit.form.Button');
	
	/* when all classes have loaded... */
	dojo.ready(function() {
		/* 
			don't need to do anything programmatically!
			parseOnLoad and dojoType does the magic!
		*/
	});
</script>

With the proper classes loaded, Dojo will now find all widgets and inject widgets into the page as necessary.

That’s It?!

Yep. The demo I’ve provided to me roughly 10 minutes to create. I spent more time looking for information on Wikipedia than I did putting together the tab layout. I really love the declarative method of widget creation — it’s less JavaScript write and quicker to code. What you shouldn’t lose sight of is that you can also control the Dijit widget programmatically after it’s been created.

Dynamically Adding Tabs

To this point our layout is static and was built declaratively. Let’s add a Button widget to the page that, when clicked, adds a new tab to the container:

<button dojoType="dijit.form.Button" id="addButton">Add New Tab</button>
<script type="text/javascript">
dijit.connect('addButton')
dijit.byId('tabContainer').addChild(new dijit.layout.ContentPane({ title:'New Tab!', content:'This is new content!', closable:true }));
</script>

I’ve used onClick to add a click event listener to the button which programmatically adds a new ContentPane to the TabContainer. We start by grabbing the widget with dijit.byId and proceed to add the new ContentPane instance as a child. The object properties passed as parameters should be self explanatory but there’s one more bonus — if you prefer to loaded content from another file via AJAX, all you need to do is provide the file path via the href property. You may also preload the content of that pane by setting the preload property to true:

<button dojoType="dijit.form.Button" id="addButton" onClick="dijit.byId('tabContainer').addChild(new dijit.layout.ContentPane({ title:'New Tab!', content:'This is new content!', closable:true }));">Add New Tab</button>

Doesn’t it seem almost too easy?

TabContainer Accommodations

Another awesome part of using Dojo TabContainer is that the class monitors the number of tabs and, if the tabs stretch further than the container’s width, will add scrolling left and right controls as well as a table of contents dropdown to easily navigate through the tabs. Additionally, the tab system is completely accessible and keyboard shortcuts work wonderfully!

You may also designate where tabs should display: right-h, left-h, bottom, and top, which is the default. These options are placed within the tabPosition setting:

<div dojoType="dijit.layout.TabContainer" id="tabContainer" style="width:100%;height:100%;" tabPosition="right-h">

Your layout changes simply by providing one parameter!

View Demo

Possibly the best part about Dijit is just how easy it is to take a static set of HTML markup and make it dynamic, especially when using the dynamic method of widget creation. I encourage you to give Dijit a go by starting with this tutorial. I also encourage you to take a look at Dojo’s infamous Theme Tester page. Theme Tester will show you just about every widget within Dijit in one spot.

Have any questions about jumping into Dijit? Ask away!

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

Full David Walsh Blog Post: Dijit’s TabContainer Layout: Easy Tabbed Content

Image Reflections with CSS

2010-08-22T17:10:54Z

Image reflection is a great way to subtly spice up an image. The first method of creating these reflections was baking them right into the images themselves. Within the past few years, we’ve introduced JavaScript strategies and CANVAS alternatives to achieve image reflections without having to modify original images. The minds behind WebKit have their own idea behind image reflection: pure CSS.

View Demo

The Webkit CSS

The -webkit-box-reflect property accepts a value in the following format:

-webkit-box-reflect: 
	<direction> /* above|below|left|right */ 	
	<offset>    /* pixel value start offset from image */
	<mask-box-image> /* http://webkit.org/blog/181/css-masks/ */

A sample usage of -webkit-box-reflect looks like:

.reflectBelow	{ 
	-webkit-box-reflect: below 0
    -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white)); 
}

An involved CSS value but well worth the work. The gradient is linear from left top to left bottom from transparent to white, showing half (0.5 the image).

View Demo

WebKit first implemented CSS reflections in 2008 and, to my knowledge, no other browsers have implemented a similar API. I find that frustrating but image reflection isn’t a priority so I can’t complain too much. I am glad, however, that this is just one of several CSS enhancements given to us by the developers of WebKit!

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

Full David Walsh Blog Post: Image Reflections with CSS

No related posts.

Accomplishing Common Tasks Using MooTools, jQuery, and Dojo III

2010-08-19T17:43:54Z

My love of the JavaScript frameworks knows no bounds. Unfortunately too many developers stick to one framework without taking the time to learn the others. The more frameworks you know, the better a programmer you will be and the more money you’ll make. Let me show you how to accomplish a few more tasks using three JavaScript frameworks: MooTools, jQuery, and Dojo.

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

Create a Context Menu with Dojo and Dijit

2010-08-18T15:05:57Z

Context menus, used in the right type of web application, can be invaluable. They provide shortcut methods to different functionality within the application and, with just a right click, they are readily available. Dojo’s Dijit frameworks provides an easy way to create stylish, flexible context menus in just minutes.

View Demo

The Dojo JavaScript

/* require necessary classes */
dojo.require('dijit.Menu');
dojo.require('dijit.MenuSeparator');
dojo.require('dijit.MenuItem');
dojo.require('dijit.PopupMenuItem');

The above requires the necessary widget classes that will be used in the context menu.

The Context Menu HTML

<-- menu container -->
<div dojoType="dijit.Menu" id="submenu1" contextMenuForWindow="true" style="display:none;">

	<-- enabled menu item -->
	<div dojoType="dijit.MenuItem" id="enabledItem" onClick="Clicked enabled item!">Enabled Item</div>
	
	<-- disabled menu item -->
	<div dojoType="dijit.MenuItem" disabled="true">Disabled Item</div>
	
	<-- separator -->
	<div dojoType="dijit.MenuSeparator"></div>
	
	<-- menu items with icons -->
	<div dojoType="dijit.MenuItem" iconClass="dijitIconCut"
		onClick="alert('Cutting!')">Cut</div>
	<div dojoType="dijit.MenuItem" iconClass="dijitIconCopy"
		onClick="alert('not actually copying anything, just a test!')">Copy</div>
	
	<div dojoType="dijit.MenuSeparator"></div>
	
	<-- nested popup menus with items -->
	<div dojoType="dijit.PopupMenuItem">
		<span>Enabled Submenu</span>
		<div dojoType="dijit.Menu" id="submenu2">
			<div dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">Submenu Item One</div>
			<div dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')">Submenu Item Two</div>
			<div dojoType="dijit.PopupMenuItem">
				<span>Deeper Submenu</span>
				<div dojoType="dijit.Menu" id="submenu4">
					<div dojoType="dijit.MenuItem" onClick="alert('Sub-submenu 1!')">Sub-sub-menu Item One</div>
					<div dojoType="dijit.MenuItem" onClick="alert('Sub-submenu 2!')">Sub-sub-menu Item Two</div>
				</div>
			</div>
		</div>
	</div>
	
	<-- popup menu with disabled item -->
	<div dojoType="dijit.PopupMenuItem" disabled="true">
		<span>Disabled Submenu</span>
		<div dojoType="dijit.Menu" id="submenu3" style="display: none;">
			<div dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">Submenu Item One</div>
			<div dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')">Submenu Item Two</div>
		</div>
	</div>
</div>

The menu is based on a system of nested DIV elements. The top element is a dijit.Menu widget with child dijit.MenuItem widgets. You may also add a dijit.MenuSeparator widget or a dijit.PopupMenuItem widget with child dijit.MenuItem widgets to create a popup menu. You may disable menu items with “disabled=’true’” declaratively or by using JavaScript:

dijit.byId('enabledItem').attr('disabled','true');

So simple! Context menus may also be created programmatically, but the declarative method of widget creation speeds up development.

View Demo

This is just another way that Dojo’s Dijit framework allows you to quickly create a functional UI widget in minutes!

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

Full David Walsh Blog Post: Create a Context Menu with Dojo and Dijit

Create a Simple Dojo Accordion

2010-08-20T16:38:06Z

Let’s be honest: even though we all giggle about how cheap of a thrill JavaScript accordions have become on the web, they remain an effective, useful widget. Lots of content, small amount of space. Dojo’s Dijit library provides an incredibly simply method by which you can add accordions to your website. Let’s take a look at how we can implement a Dojo accordion!

View Demo

The Basic Dijit HTML

<style type="text/css">
	/* bring in the claro theme */
	@import "http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css";
</style>
<body class="claro">

<-- The container must be a dijit.layout.AccordionContainer -->
<div id="accordion" dojoType="dijit.layout.AccordionContainer">

	<-- Accordion item -->
	<div class="element" title="The Beatles" dojoType="dijit.layout.ContentPane">
		<img src="http://davidwalsh.name/dw-content/accordion/let-it-be.jpg" class="image" />
		<p>The Beatles were a pop and rock group from Liverpool, England...</p>
	</div>
	
	<-- Accordion item -->
	<div class="element" title="Rod Stewart" selected="true" dojoType="dijit.layout.ContentPane">
		<img src="http://davidwalsh.name/dw-content/accordion/every-picture.jpg" class="image" />
		<p>Roderick "Rod" David Stewart, CBE (born January 10, 1945), is a singer and songwriter...</p>
	</div>
	
	<-- Accordion item -->
	<div class="element" title="Oasis" dojoType="dijit.layout.ContentPane">
		<img src="http://davidwalsh.name/dw-content/accordion/oasis.jpg" class="image" />
		<p>Oasis are an English rock band that formed in Manchester in 1991...</p>
	</div>
	
</div>

The title attribute text will become the Accordion control’s heading. Adding a selected attribute will make the given accordion pane start as the selected pane.

Including Dojo with parseOnLoad; Requiring Dijit Widget Classes

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" type="text/javascript" djConfig="parseOnLoad:true"></script>

<script type="text/javascript">
	/* require necessary classes */
	dojo.require('dijit.layout.AccordionContainer');
	dojo.require('dijit.layout.ContentPane');
	/* when all classes have loaded... */
	dojo.ready(function() {
		/*
			don't need to do anything programmatically!
			parseOnLoad and dojoType does the magic!
		*/
	});
</script>

With the proper classes loaded, Dojo will now find all widgets and inject widgets into the page as necessary.

View Demo

All JavaScript toolkits have provided an easy way to create accordions and Dojo/Dijit is no exception!

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

Full David Walsh Blog Post: Create a Simple Dojo Accordion