Some Updated and Improved Examples

Avatar of Chris Coyier
Chris Coyier on (Updated on )

We are all learning and becoming better web designers and developers all the time. At least I hope we are, that is the whole point of this site! It is always a good idea to re-visit things from time to time and make sure we did things as well and as smart as we are able. If it’s been long, chances are there are things that can be done better. Here are some examples that I have updated recently.

Digg Header

With the help of Christian Gorbach, I was able to improve the jQuery for the drop-down menu in the Digg Header Example. Before, the drop down menus were activated by toggling the display value of the unordered list that made up that menu. Plus, it relied on each of those menus having a unique ID. jQuery is able to be MUCH smarter than that, this is how we do it now:

<script type="text/javascript">
	$(document).ready(function(){
	   $("#zone-bar li em").click(function() {
			var hidden = $(this).parents("li").children("ul").is(":hidden");
			
			$("#zone-bar>ul>li>ul").hide()        
			$("#zone-bar>ul>li>a").removeClass();
				
			if (hidden) {
				$(this)
					.parents("li").children("ul").toggle()
					.parents("li").children("a").addClass("zoneCur");
				} 
		   });
	});
</script>

Aside from being shorter and more flexible code, it has more functionality. Now the menus will now close when another is opened. In Christian’s words, it “preserves the state of the menu” before the toggling happens. Also the current menu highlighting is done now by applying a class so that it can stay highlighted even when you mouse away. Very cool.

 

Photo Revealer

Along these same lines, I have made a few improvements to the Revealing Photo Slider. In this new version, no longer are any variables hard-coded into the javascript, they are all dynamically gotten from the size of the image in the markup. Each photo you wish to add simply looks like this now:

<td><div class="photo_slider">
	<img src="images/baloon.jpg"/>
	<div class="info_area">
		<h3>Climbing Mt. Hood</h3>
		<p><em>By: <a href="http://flickr.com/photos/kevinomara/">Brother O'Mara</a></em></p>
	</div>
</div></td>

This can (and will) be made even smarter yet. Right now, you can see the main DIV is wrapped yet again by a table cell, this is because a table with a single row is an easy way to prevent any line wrapping so the row of pictures only horizontally expands. This table and cells could be applied directly from jQuery and not need to be coded directly in the markup, just haven’t gotten around to that yet. HUGE thanks to Benjamin Sterling for all his patience at help on this one. Firefox is still being a punk about getting the image sizes on the first page load…

 

Great Gallery Roundup

There has been some new website galleries pop up since I first created The Great Website Design Gallery Roundup. A number of them have been added. Several folks have sent in requests for sites to be added. I’m happy to do that in order to keep this being a useful reference for those type of sites.

 

Menu Fader

Romain Sauvaire helped me out with a great way to handle the “Menu Fader” example. In the new smarter version, instead of hard-coding which buttons and content areas fade in and out when the buttons are clicked the script first checks to see if the button is already faded or not. If it is, it fades it in and reveals the proper content area based on it’s ID (some extra smarts in there). If it’s not it does nothing so it doesn’t waste any cycles.