Some Updated and Improved Examples
Published by Chris Coyier
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.
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:
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.
<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.
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.