There are many examples on creating tabbed navigation with (or without) help of JavaScript frameworks like Prototype, MooTools or JQuery. However, I find that it’s much easier to create draggable tabbed navigation using Chain.js and its great extension: Interaction.js.

Riziq, creator of Chain.js & Interaction.js, already showed an example on how to utilize the libs to build tab interface in a few JS code lines. However, for its own purpose, the example is not SEO-friendly — disabling JavaScript in your browser will result in empty content and search engines will see nothing on your page consequently. Now say, you want to create a tabbed navigation for your blog to show/hide “Latest Posts”, “Latest Comments” etc. and you want the links can be seen no matter if JavaScript is enabled or not in reader’s browser — something looks like this:

Blog's tabbed navigation

Step 1: HTML & CSS

Just create a template in HTML and full links to latest posts, comments and most popular articles:

Read the rest of this entry »

Recommended Reading

HTML & XHTML: The Definitive Guide (6th Edition)

"...lucid, in-depth descriptions of the behavior of every HTML tag on every major browser and platform, plus enough dry humor to make the book a pl... Read More >

Smashing CSS: Professional Techniques for Modern Layout (Smashing Magazine Book Series)PROFESSIONAL TECHNIQUES FOR MODERN LAYOUT

Smashing CSS takes you well beyond the basics, covering not only the finer points of layout and effects, b... Read More >

Eloquent JavaScript: A Modern Introduction to Programming

"A concise and balanced mix of principles and pragmatics. I loved the tutorial-style game-like program development. This book rekindled my earliest... Read More >

In previous post, I had a chance to introduce Chain.js with 3 examples and found a few issues due to both bugs in version 0.1 and my unawareness of implemented features. Now version 0.2 of Chain.js has just come out, I’d like to revise the examples to show better implementation we can do with the library in practice.

Basically, we don’t need to call chain() function every time we add or replace items instead just execute it once on DOM ready event, and we can utilize anchor property to define where items to be rendered within table tag.

Example 1: All codes to get it works are here.

1
2
3
4
5
6
7
8
9
10
11
12
13

function render(){
	$.getJSON('json.php', 'lang=' + $('#langList').val(), function(books){
		$('#table_book').items('replace', books);
	});
}
 
$(document).ready(function(){
	$('#table_book').chain({
		anchor: 'tbody' /* defines, where items will be rendered*/
	});
	$('#langList').change(render); 	// handle change event of drop-down list
	setTimeout(render, 100); 		// call render function on load
});

Example 2: Almost the same codes as example 1 plus add, remove and sort functions.

Read the rest of this entry »

Recommended Reading

JavaScript & jQuery: The Missing Manual

JavaScript lets you supercharge your HTML with animation, interactivity, and visual effects—but many web designers find the language hard to lear... Read More >

JavaScript: The Definitive Guide: Activate Your Web Pages (Definitive Guides)

Since 1996, JavaScript: The Definitive Guide has been the bible for JavaScript programmers—a programmer's guide and comprehensive reference to th... Read More >

JavaScript: The Good Parts

Most programming languages contain good and bad parts, but JavaScript has more than its share of the bad, having been developed and released in a h... Read More >