HTML charcter entity copy-and-paste.

<div id="photo_stack">
	<img id="photo1" src="images/photostack1.jpg" alt="Alt text goes here..." />
	<img id="photo2" src="images/photostack2.jpg" alt="Alt text goes here..." />
	<img id="photo3" src="images/photostack3.jpg" alt="Alt text goes here..." />
</div>

You will then need some simple CSS to style and position the images in a stack. We will be using jQuery to alter the z-index values of each image once the animation has completed, so we will start by giving each image a high z-index value. You will also need to setup the speed and easing functions for the transitions.

#photo_stack img {
	position: absolute;
	border: 10px solid #FFF;
	box-shadow: 2px 2px 8px rgba(0,0,0,0.5);
	-moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.5);
	-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.5);
	z-index: 9999;

	/* setup transition speed and easing */
	-moz-transition: all 0.2s ease; /* Firefox */
	-webkit-transition: all 0.2s ease; /* WebKit */
	-o-transition: all 0.2s ease; /* Opera */
	transition: all 0.2s ease; /* Standard */

}
#photo_stack #photo1 {
	top: 0;
	left: 100px;
}
#photo_stack #photo2 {
	top: 12px;
	left: 55px;
}
#photo_stack #photo3 {
	top: 27px;
	left: 50px;
}

Once this is complete you can add the CSS to create the keyframe animation, which will take the image at the top of the stack and place it at the bottom of the photo stack.

@-webkit-keyframes shuffle {
	0% {
		margin-left: 0px;
	}
	50% {
		margin-left: 450px;
		-webkit-transform: scale(0.9);
		-moz-transform: scale(0.9);
		transform: scale(0.9);
	}
	100% {
		margin-left: 0px;
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		transform: scale(1);
	}
}
#photo_stack .animate {
	-webkit-animation-name: shuffle;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
}

What this is basically doing, is running the keyframe animation called ’shuffle’ once and for a duration of 1 second. The animation itself is moving the image 450px to the right of the stack, scaling down to give an impression of depth, and then moving it back to where it’s original position. Note that this will only happen when the image is assigned the ‘animate’ class.

Okay, so you now have a cool animation effect, but nothing triggers it and the image does not go to the bottom of the stack: Enter jquery. What jquery will do, is trigger the animation by assigning the ‘animate’ class to the image on the top of the stack, removing it once the animation is complete.

$imgs = $("#photo_stack img");
$imgCount = $imgs.length;
$curr_index = 0;
$imgs.last().addClass('current'); /* Set the image at top of stack to current */

$("#photo_stack")
	.delegate('img', 'click', function() {
		$this = $(this);

		/* If the image is at the top of the stack */
		if ($this.hasClass('current')) {
			/* Work out new z-index value */
			$zi = $this.css('zIndex') - $imgCount;

			/* Trigger animation */
			$this.addClass('animate');

			/* Assign new z-index value then stop animation after complete */
			setTimeout(function() { $this.css('zIndex', $zi); }, 200);
			setTimeout(function() { $this.removeClass('animate'); }, 1000);

			/* Set next image to current */
			$this.removeClass('current');
			if ($this.index() == 0) {
				$imgs.last().addClass('current');
			} else {
				$imgs.eq($this.index()-1).addClass('current');
			}
		}
	})

You will now have some images in a stack that you can click on and they will be animated and placed to the bottom of the stack. Now it is time to use the rotation transition to make the photo stack look a little more realistic. I used CSS classes to rotate the images somewhere between -4 and 4 degrees and used jQuery to randomly assign one of those classes to each image when the DOM has loaded. Then I just added a CSS rule to rotate the image to 0 degrees on hover.

#photo_stack .deg1 {
	-webkit-transform: rotate(1deg);
   	-moz-transform: rotate(1deg);
   	transform: rotate(1deg);
}
#photo_stack .deg2 {
	-webkit-transform: rotate(2deg);
   	-moz-transform: rotate(2deg);
   	transform: rotate(2deg);
}
#photo_stack .deg3 {
	-webkit-transform: rotate(3deg);
   	-moz-transform: rotate(3deg);
   	transform: rotate(3deg);
}
#photo_stack .deg4 {
	-webkit-transform: rotate(4deg);
   	-moz-transform: rotate(4deg);
   	transform: rotate(4deg);
}
#photo_stack .deg1neg {
	-webkit-transform: rotate(-1deg);
   	-moz-transform: rotate(-1deg);
   	transform: rotate(-1deg);
}
#photo_stack .deg2neg {
	-webkit-transform: rotate(-2deg);
   	-moz-transform: rotate(-2deg);
   	transform: rotate(-2deg);
}
#photo_stack .deg3neg {
	-webkit-transform: rotate(-3deg);
   	-moz-transform: rotate(-3deg);
   	transform: rotate(-3deg);
}
#photo_stack .deg4neg {
	-webkit-transform: rotate(-4deg);
   	-moz-transform: rotate(-4deg);
   	transform: rotate(-4deg);
}
#photo_stack .hover {
	-webkit-transform: rotate(0deg);
   	-moz-transform: rotate(0deg);
   	transform: rotate(0deg);
	cursor: pointer;
}

I chose to use this approach, as it means that you can have any number of images in the stack, and they will be randomly rotated. If you wanted, you could just assign a specific angle to each photo in the stack using each images ID for complete control.

The full code for the animated photo stack can be found on the demo page. It works best in the latest version of Chrome or Safari. Firefox works but without the animation and I did not even bother checking Internet Explorer – it always spoils the party!

Before I begin, it is worth highlighting that I am using an ordered list of links, and the hidden image is a background image on the <ol> element. I will take the following approach:

1. Store the url of the hidden image
2. Add an element to each list item, which will be used to display the hidden portion of the image
3. then add the click events to the numbered square and the reveal element

So the first few lines set a few variables, allowing us to cache some jQuery objects for later use.

$gridWrap = $('#reveal_grid');
$revealImg = $gridWrap.css('background-image');
$gridWrap.css('background', 'transparent')
$sqrs = $('#reveal_grid li');

We then loop through the links in the list and add the elements, add some CSS rules to setup the hide/reveal.

$('#reveal_grid li a').each(function() {
	$num = $(this);
	$bgPos = $num.css('backgroundPosition');
	$num.parent('li').append(
		$('').css({
			backgroundImage: $revealImg,
			backgroundPosition: $bgPos,
			height:'0',
			marginTop: ($num.height()/2) + 'px',
			opacity:'0.2'
		})
	);
});

Next we need to add the click events, which just adds the flip animation that was based upon the original by Aayush Shastri:

$sqrs.delegate('a', 'click', function() {
	$sqr = $(this);
	$height = $sqr.height();
	$width = $sqr.width();
	$sqr.stop()
	.animate({
		width: $width + 'px',
		height: '0',
		marginTop: ($height/2) + 'px',
		opacity: '0.2'
	}, 500, function() {
	$sqr.next('.reveal')
		.stop()
		.animate({
			width: $width + 'px',
			height: $height + 'px',
			marginTop: '0',
			opacity: '1'
		}, 500);
	});
	return false;
});
$sqrs.delegate('span', 'click', function() {
	$sqr = $(this);
	$height = $sqr.height();
	$width = $sqr.width();
	$sqr.stop()
	.animate({
		width: $width + 'px',
		height: '0',
		marginTop: ($height/2) + 'px',
		opacity: '0.2'
	}, 500, function() {
		$sqr.prev('a')
		.stop()
		.animate({
			width: $width + 'px',
			height: $height + 'px',
			marginTop: '0',
			opacity: '1'
		}, 500);
	});
	return false;
});

I am aware that this code could be streamlined somewhat, but it made sense to structure it like this for demonstration purposes. In terms of performance, it seems fine, so I will leave as is for the time being.

The Markup and CSS is pretty straight forward: We just use a list of links that are floated to achieve the horizontal tabs. This is a pretty standard appraoch, so I won’t list that code here as it is unecessary.

Now the tricky part: the jQuery. Before writing the JavaScript, I wanted to have a clear approach to solving this problem. Basically, every time the page loads or the window is resized, the following steps must take place:

1. Find the width of the tabs’ containing element
2. Determine how many rows there will be and what row each tab will be in
3. Determine the amount of space left on each row, and from that work out how much padding to add to each tab to make them fill the space
4. Add the extra padding to each tab
5. Do any extra +/- of pixels to accommodate browser rounding inconsistencies

There are also a few other things that needed to be done in order to get around the browser inconsistencies with working out dimensions, but I will explain them when we get to it.

To begin with, we setup the load and window resize events and also make any whitespace in the link text a non-breaking space. This is necessary to prevent the text from dropping onto two lines when resizing.

$(function() {
	$("#tab_container li a").html(function(index, htm) {
		return htm.replace(/\s/g, ' ');
	});
	autoSizeTabs();
	$(window).resize(function() {
		autoSizeTabs();
	});
});
function autoSizeTabs() {
	// add code here...
}

Now for the fun part, the code that actually makes the tabs fit their container. To start with, we just set a few variables which will be used throughout. the main one is the width of the tab container. I have also added some code to reset the tabs to their default state, otherwise it will break if the function is called more than once. (I.e. when someone is testing by constantly resizing the browser).

// Reset the tabs to their default state
$("#tab_container li").css({"width": "auto", "borderRightWidth": "1px"});
$("#tab_container li:last-child").css({'borderRightWidth': '0px'});
$("#tab_container").parent().css({"width": "50%"});

// Setup some variables
var containerWidth = $("#tab_container").innerWidth();
var tabsWidth = 0;
var rowCount = 1;

As outlined in the steps above, we then need to loop through the list-items to determine which row each should be on. In this implementation, I decided to make use of a class name which takes the form of “tab_row_X”. I did play with the idea of using jQuery’s data() method for this, but it seemed more tricky to retrieve that value, so I decided against it.

// Go through tabs and work out how many rows there are and which tabs are on which row
$("#tab_container li").each(function() {
	tabsWidth = tabsWidth + $(this).outerWidth();
	if (tabsWidth > containerWidth) {
		tabsWidth = 0;
		rowCount++;
	}
	$(this).addClass('tab_row_'+rowCount);
});

With the above in place, we are now ready to pad-out the tabs to make them fit to the width of their parent node. To do this we loop through each row of tabs and work out how much space (in pixels) the tabs use up, and subtract it from the width of the parent container to find the amount of space left over. Then we just divide that by the number of tabs. It is important to note, that I used Math.round() here which means that there could be too much or too little padding added, which will need to be addressed later. (Browser inconsistencies with rounding decimal dimensions meant that I had to make these whole numbers at this stage).

// Now go through the tabs in each row and pad them out to fill the container
for (var d=1; d<=rowCount; d++) {
	var row = $(".tab_row_"+d);
	var rowWidth = 0;

	// Work out the space left over in the row
	for (var r=0; r<$(row).length; r++) {
		rowWidth = rowWidth + $(row[r]).outerWidth();
	}
	var pxDiff = containerWidth - rowWidth;
	tabExtraPx = Math.round(pxDiff / $(row).length);

	// Now add the extra padding to each of the tabs in the row
	var newWidth = 0;
	$(".tab_row_"+d+":last").css({'borderRightWidth': '0px'});
	$(row).each(function() {
		var wd = $(this).outerWidth() + tabExtraPx;
		var cssWd = $(this).innerWidth() + tabExtraPx;
		$(this).css({'width': cssWd + 'px'});
		newWidth = newWidth + wd;
	});

	// Rest of code goes here...
}

Once that is complete, we then need to address any differences caused by the rounding. This just works out the overall width of the tabs and compares it to the width of the container, adding or subtracting the difference.

// Now deal with any difference left as a result of rounding
if (newWidth > containerWidth) {
	var diff = newWidth - containerWidth;
	var lastTab = $(".tab_row_"+d+":last");
	var nWidth = Math.round($(lastTab).innerWidth() - diff);
	var row = $(lastTab).css({'width': nWidth+'px'});;
}
if (newWidth < containerWidth) {
	var diff = containerWidth - newWidth;
	var lastTab = $(".tab_row_"+d+":last");
	var nWidth = Math.round($(lastTab).innerWidth() + diff);
	var row = $(lastTab).css({'width': nWidth+'px'});;
}

Once we have resized the tabs, We need to remove the class used to identify which row each was on, so that if the function gets called again, the tabs will be in their default state.

// reset the row class
$("#tab_container li").removeClass("tab_row_"+d);

Lastly, we need to set the width, in pixels, of the parent container, otherwise we will again come across inconsistenices with browser dimension rounding if the width is actually a decimal number.

// Fix the width of the container to get around browser rounding issues
$("#tab_container").parent().css({"width": containerWidth+'px'});

Although this solution does work, it doesnt evenly spread the tabs across rows. It merely works out what row a tab is one and applies the necessary padding to make them fit their container. So there will be circumstances where one tab drops to a new row and fills the entire row. It’s not ideal, but it satisfied my requirements at the time.
The code is also far from optimal, and I’m sure there are some improvements that can be made, but I don’t particularly have the desire to expend any more time on this right now.

Tested in Firefox 3+, IE6+ (IE6 seems to work 99% of the time, but very occaisonally mis-calculates the widths), Chrome, Safari (Win).

View demo

However, I feel it is worth mentioning a weird IE7/8 bug that I encountered along the way. Basically, when I wrapped each word in span, the first word of each line had an incorrect top offset. In fact, the offset was equal to that of an element on the previous line. There didn’t seem to be any logical reason for this to be happening, other than a browser bug. A quick workaround later and the plugin works in all major browsers.

<header class="centered">
  Header markup goes here
</header>
<div id="main_content">
  Content goes here
</div>
<div id="nav_bar">
  Navigation goes here
</div>

I used CSS to position the navigation absolutely in between the header and the main content, and then wrote a small amount of jQuery to do the rest.

$(document).ready(function() {
	var yOffset = $("#nav_bar").offset().top;
	$(window).scroll(function() {
		if ($(window).scrollTop() > yOffset) {
			$("#nav_bar").css({
				'top': 0,
				'position': 'fixed'
			});
		} else {
			$("#nav_bar").css({
				'top': yOffset + 'px',
				'position': 'absolute'
			});
		}
	});
});

This piece of JavaScript starts by finding the offset of the navigation from the top of the document. Then, it defines the scroll event for the window object, which checks to see if the window has been scrolled past the navigation element. If this has occurred, it fixes the navigation to the top of the window. If not, the navigation is returned to it’s default state.

The jQuery library is one of many libraries hosted by Google AJAX Libraries. Up until this redesign, I had thought nothing of downloading the latest version, uploading it to my webserver and including it as usual in the document head. However, after reading a number of articles about browsers limiting the number of simultaneous connections, it was obvious that using the files hosted by Google will free up connections for other resources to be downloaded.

This isn’t the only benefit of using files hosted by Google. Google’s Content Delivery Network (CDN) means that anyone anywhere in the world can view the page and not have to endure the increased latency of downloading the resources from my single web server (which could be half the world away!). Not only that, but if other sites use Google’s AJAX libraries, then these files will be cached in many people’s browsers already! So they won’t even need to download them!

Serve Resources from a Subdomain

This was obviously the reason why I began look into the performance of my site. I have already explained how browsers limit the number of simultaneous connections, so setting up a subdomain that points to the directory on your server where your images are stored will trick the browser into thinking they are stored on a different domain. As previously stated, this wil free up connections so that other resources can be downloaded, thus decreasing the overall time taken to download all resources that make up the page.

Image Sprites

I have been using this technique for years now, but it is still worth mentioning as it really can have a big impact on the number of requests made when loading a page. For example, when I first created the skin for my site, I used no sprites and there were 36 separate requests made by the browser. After generating a few image sprites, I managed to reduce the amount of requests to 28!

To wrap up…

The below screenshot shows the Net panel in Firebug when loading my site in Firefox. As you can see I have jQuery hosted by Google; images and Javascript files are served from resources.pmbennett.net; and the stylesheets are served from pmbennett.net. As I mentioned at the beginning, this has shaved 4 seconds off the average page load speed!

I started with a simple ordered list, which contained the text values which would represent the height of each bar on the chart. there are wrapped in a span which we will require in order to style this correctly in the CSS.

<div id="chart">
<ol>
	<li id="green_bar">450</li>
	<li id="yellow_bar">600</li>
	<li id="red_bar">300</li>
</ol>
</div>

Step 2: The CSS

I then used some background images to create the graph and the 3D bars. The CSS specifies how high each bar should be and adds the background images. (This can be quite tricky as it requires a little bit of arithmetic to ensure that the bar is the correct height and the scales are consistent).

#chart {
	background: #FFF url('../images/chart_bg.png') no-repeat 0 0;
	width: 636px;
	height: 420px;
}
#chart ol {
	margin: 0;
	padding: 0;
	list-style-type: none;
	position: relative;
	height: 420px;
	width: 636px;
	overflow: hidden;
}
#chart ol li {
	text-indent: -9999em;
	width: 140px;
	position: absolute;
	bottom: 0;
	background-repeat: no-repeat;
	background-position: -140px 0;
	background-color: transparent;
	padding: 38px 0 0 0;
}
#green_bar {
	height: 150px;
	background-image: url('../images/green_bar_top.png');
	left: 80px;
}
#green_bar span {
	background: transparent url('../images/green_bar.png') no-repeat left bottom;
	display: block;
	height: 150px;
}
#yellow_bar {
	height: 200px;
	background-image: url('../images/yellow_bar_top.png');
	left: 260px;
}
#yellow_bar span {
	background: transparent url('../images/yellow_bar.png') no-repeat left bottom;
	display: block;
	height: 200px;
}
#red_bar {
	height: 100px;
	background-image: url('../images/red_bar_top.png');
	left: 440px;
}
#red_bar span {
	background: transparent url('../images/red_bar.png') no-repeat left bottom;
	display: block;
	height: 100px;
}

Step 3: Adding some jQuery animation

At this point we have a fairly nice looking three dimensional graph using only CSS and some markup: now to add the animation! All we need to do is position the bars below the x-axis using jQuery, and then add the animation that will slide them in. It’s pretty simple, but looks pretty nice. It does have it’s drawbacks, as the height of the highest bar needs to be known so that the chart background image can be created. Any dynamic graphs that are created on-the-fly will be difficult to create, but for one-off static graphs, this is a neat little effect.

$(function() {
  // hide the bars to begin with
	$('#chart ol li').each(function() {
		$(this).css({'bottom': '-' + $(this).height() + 'px'});
		$(this).css({'background-position': '0 0'});
	});
  // animate the bars position to show on the graph
	$('<p>Show_results</p>').click(function() {
		$('#chart ol li').each(function() {
			$(this)
			.css({'background-position': '-140px 0'})
			.animate({
				bottom: '0px'
			}, 500);
		});
		return false;
	}).appendTo('body');
});