<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><!-- generator="wordpress/2.0" --><rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" version="2.0">

<channel>
	<title>Exit 404</title>
	<link>http://www.exit404.com</link>
	<description>The online journal of Tony Summerville.</description>
	<pubDate>Mon, 27 Mar 2006 05:19:31 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.0</generator>
	<language>en</language>
			<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/rss+xml" href="http://feeds.feedburner.com/exit404" /><feedburner:info uri="exit404" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><geo:lat>33.479306</geo:lat><geo:long>-86.858789</geo:long><feedburner:browserFriendly>This is an XML content feed. It is intended to be viewed in a newsreader or syndicated to another site, subject to copyright and fair use.</feedburner:browserFriendly><item>
		<title>Big Changes</title>
		<link>http://feedproxy.google.com/~r/exit404/~3/8qZhAwbmn9k/big-changes</link>
		<comments>http://www.exit404.com/2006/91/big-changes#comments</comments>
		<pubDate>Mon, 27 Mar 2006 05:19:31 +0000</pubDate>
		<dc:creator>Tony Summerville</dc:creator>
		
	<category>Work</category>
	<category>Livin'</category>
		<guid isPermaLink="false">http://www.exit404.com/2006/91/big-changes</guid>
		<description><![CDATA[I&#8217;ve been neglecting this site lately I know, but for pretty good reason.  For starters, I am no longer employed at Regions Bank. I&#8217;m now a Software Engineer at DAXKO, a software company here in Birmingham that specializes in web-based applications.  They are the leading provider of software to YMCAs across the country. [...]]]></description>
			<content:encoded><![CDATA[<p>I&#8217;ve been neglecting this site lately I know, but for pretty good reason.  For starters, I am no longer employed at <a href="http://www.regions.com/">Regions Bank</a>. I&#8217;m now a Software Engineer at <a href="http://www.daxko.com/">DAXKO</a>, a software company here in Birmingham that specializes in web-based applications.  They are the <a href="http://en.wikipedia.org/wiki/Daxko">leading provider of software</a> to YMCAs across the country.  </p>
<p>So why did I leave Regions?  Among other things, I was beginning to feel a restained, like I&#8217;d outgrown the job, and frankly, I was getting tired of the super-corporate office environment.  It was a good just-out-of-school job, but it was time to move on to bigger and better things.</p>
<p>Well I&#8217;ve been at DAXKO for a week now, and <em>life is grand</em>.  The work environment is fantastic and is exactly what I was looking for.  I&#8217;m working with a bunch of really smart folks that are passionate about what they&#8217;re doing.  I&#8217;m actually working on the new product development project team where my role lies in user interaction and design.  Very exciting stuff.</p>
<p><a href="http://www.flickr.com/photos/tonysummerville/118561128/" title="Mac mini"><img src="http://static.flickr.com/44/118561128_bd305a5cb9_m.jpg" width="240" height="180" alt="Mac mini" /></a>I also wanted to mention that I got a little crazy a couple weeks back and decided to buy my first <a href="http://www.apple.com/hardware/">Mac</a>.  I purchased the <a href="http://www.apple.com/macmini/">Mac mini Intel Core Duo</a> with a gig of RAM.  So far so good - I&#8217;m still adjusting though.</p>
<p>I&#8217;ve never been one to complain about Windows because I never really have any problems with it.  I know a lot of people do and what not, but I guess I&#8217;ve just become really good at using it over the years.  That being said, the new Mac is definitely a lot more fun to use.</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/exit404?a=8qZhAwbmn9k:IVfKgsF-MsI:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/exit404?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/exit404?a=8qZhAwbmn9k:IVfKgsF-MsI:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/exit404?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/exit404?a=8qZhAwbmn9k:IVfKgsF-MsI:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/exit404?i=8qZhAwbmn9k:IVfKgsF-MsI:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRSS>http://www.exit404.com/2006/91/big-changes/feed/</wfw:commentRSS>
		<feedburner:origLink>http://www.exit404.com/2006/91/big-changes</feedburner:origLink></item>
		<item>
		<title>Talkin CSS</title>
		<link>http://feedproxy.google.com/~r/exit404/~3/SOi_cjaKI-Y/talkin-css</link>
		<comments>http://www.exit404.com/2006/90/talkin-css#comments</comments>
		<pubDate>Wed, 01 Mar 2006 02:39:06 +0000</pubDate>
		<dc:creator>Tony Summerville</dc:creator>
		
	<category>Livin'</category>
		<guid isPermaLink="false">http://www.exit404.com/2006/90/talkin-css</guid>
		<description><![CDATA[On Thursday, I&#8217;ll be co-hosting a CSS Tips &#8216;n Tricks presentation with Jeremy Flint at the March IPSA meeting.  As I&#8217;ve been preparing for my first speaking event (that isn&#8217;t for a school assignment at least), I&#8217;ve been reading up on presentation tips almost as much as I&#8217;ve been working on the actual content [...]]]></description>
			<content:encoded><![CDATA[<p>On Thursday, I&#8217;ll be co-hosting a CSS Tips &#8216;n Tricks presentation with <a href="http://www.jeremyflint.com/">Jeremy Flint</a> at the March <a href="http://ipsaonline.org/">IPSA</a> meeting.  As I&#8217;ve been preparing for my first speaking event (that isn&#8217;t for a school assignment at least), I&#8217;ve been reading up on presentation tips almost as much as I&#8217;ve been working on the actual content itself.</p>
<p>Fortunately, <a href="http://mezzoblue.com/">Dave Shea</a>, along with some great commenters, offer some fantastic advice in a recent post entitled <a href="http://mezzoblue.com/archives/2006/02/27/speaking_ti/">Speaking? Tips.</a></p>
<p>Jeremy and I will be featuring some of the benefits of CSS by showing off some real examples.  Besides a few nervous jitters, I&#8217;m excited to be presenting on something I generally like talking about, and happen to know a little bit about as well.  And I still think it&#8217;s pretty cool that Birmingham has an organized platform for web professionals and enthusiasts to meet regularly and share ideas.  Not very many cities probably do.</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/exit404?a=SOi_cjaKI-Y:CfE531Ui4Pw:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/exit404?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/exit404?a=SOi_cjaKI-Y:CfE531Ui4Pw:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/exit404?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/exit404?a=SOi_cjaKI-Y:CfE531Ui4Pw:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/exit404?i=SOi_cjaKI-Y:CfE531Ui4Pw:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRSS>http://www.exit404.com/2006/90/talkin-css/feed/</wfw:commentRSS>
		<feedburner:origLink>http://www.exit404.com/2006/90/talkin-css</feedburner:origLink></item>
		<item>
		<title>A Better Outlook</title>
		<link>http://feedproxy.google.com/~r/exit404/~3/A0jCZHL3S5g/a-better-outlook</link>
		<comments>http://www.exit404.com/2006/89/a-better-outlook#comments</comments>
		<pubDate>Sun, 19 Feb 2006 22:45:27 +0000</pubDate>
		<dc:creator>Tony Summerville</dc:creator>
		
	<category>Miscellany</category>
		<guid isPermaLink="false">http://www.exit404.com/2006/89/a-better-outlook</guid>
		<description><![CDATA[I&#8217;ve just recently converted from being a long-time Outlook user to a Thunderbird man.  The main reason was that I finally switched from using POP email to IMAP, and Outlook is terrible for IMAP mail.
While Thunderbird isn&#8217;t nearly as robust as Outlook, it handles IMAP mail much, much better.  And since I&#8217;ve been [...]]]></description>
			<content:encoded><![CDATA[<p>I&#8217;ve just recently converted from being a long-time <a href="http://www.microsoft.com/outlook/">Outlook</a> user to a <a href="http://www.mozilla.com/thunderbird/">Thunderbird</a> man.  The main reason was that I finally switched from using POP email to IMAP, and Outlook is <em>terrible</em> for IMAP mail.</p>
<p>While Thunderbird isn&#8217;t nearly as robust as Outlook, it handles IMAP mail much, much better.  And since I&#8217;ve been using it, I&#8217;ve decided that not having all the Outlook features, <em>isn&#8217;t necessarily a bad thing</em>.  The simplicity is quite nice.</p>
<p>I&#8217;ve also installed <a href="http://www.roundcube.net/">RoundCube</a> and now use it for web-based email access.  It&#8217;s pretty slick already, and is in heavy development, so check it out if you&#8217;re looking for something to replace the likes of <a href="http://www.squirrelmail.org/">SquirrelMail </a>.</p>
<p>For Outlook users, the main thing missing from Thunderbird is integrated calendering.  Fortunately, the Mozilla team has a <a href="http://www.mozilla.org/projects/calendar/">calendar project</a> in development.  Unfortunately though, it&#8217;s in the very early stages of development and isn&#8217;t quite as sophisticated.  </p>
<p>Personally, I&#8217;ve been using <a href="http://www.mozilla.org/projects/calendar/sunbird.html">Sunbird</a>, which is the standalone version of the calendar application.  What I like the most is being able to store a calendar file on my webhost server, and manage it from within Sunbird in multiple locations.  <a href="http://wiki.mozilla.org/Lightning">Lightning</a>, a working project name for an extension to tightly integrate calendar functionality (scheduling, tasks, etc.) into Thunderbird, also looks very promising.
</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/exit404?a=A0jCZHL3S5g:fS-Bq_umN-w:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/exit404?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/exit404?a=A0jCZHL3S5g:fS-Bq_umN-w:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/exit404?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/exit404?a=A0jCZHL3S5g:fS-Bq_umN-w:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/exit404?i=A0jCZHL3S5g:fS-Bq_umN-w:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRSS>http://www.exit404.com/2006/89/a-better-outlook/feed/</wfw:commentRSS>
		<feedburner:origLink>http://www.exit404.com/2006/89/a-better-outlook</feedburner:origLink></item>
		<item>
		<title>Super Bowl Extra Large</title>
		<link>http://feedproxy.google.com/~r/exit404/~3/b82uR3eqiDw/super-bowl-extra-large</link>
		<comments>http://www.exit404.com/2006/87/super-bowl-extra-large#comments</comments>
		<pubDate>Fri, 03 Feb 2006 14:58:49 +0000</pubDate>
		<dc:creator>Tony Summerville</dc:creator>
		
	<category>Sports</category>
		<guid isPermaLink="false">http://www.exit404.com/2006/87/super-bowl-extra-large</guid>
		<description><![CDATA[ Who do you like in this year&#8217;s Super Bowl? Me, I&#8217;m taking the Steelers, who are 4 point favorites, for a couple of different reasons.

The Steelers are on fire. They playing near perfect football in every aspect of the game.
Two words: Jerome Bettis. It could possibly be his last game ever, and he&#8217;s playing [...]]]></description>
			<content:encoded><![CDATA[<p> <img id="image88" src="http://www.exit404.com/wp-content/uploads/2006/02/superbowl_xl.thumbnail.jpg" alt="Super Bowl XL" height="74" width="128" />Who do you like in this year&#8217;s Super Bowl? Me, I&#8217;m taking the Steelers, who are 4 point favorites, for a couple of different reasons.</p>
<ol>
<li>The Steelers are on <strong>fire</strong>. They playing near perfect football in every aspect of the game.</li>
<li>Two words: Jerome Bettis. It could possibly be his last game <em>ever</em>, and he&#8217;s playing in his hometown in front of everyone he knows. Look for him to go off in this one.</li>
<li>The NFC is a <strong>much</strong> weaker conference, and the NFC West, the Seahawks&#8217; division, is by far the worst. I&#8217;m not saying they don&#8217;t deserve to be in the Super Bowl, but I don&#8217;t think they&#8217;ve played the same caliber teams as the Steelers.</li>
</ol>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/exit404?a=b82uR3eqiDw:wREE7D04HeA:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/exit404?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/exit404?a=b82uR3eqiDw:wREE7D04HeA:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/exit404?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/exit404?a=b82uR3eqiDw:wREE7D04HeA:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/exit404?i=b82uR3eqiDw:wREE7D04HeA:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRSS>http://www.exit404.com/2006/87/super-bowl-extra-large/feed/</wfw:commentRSS>
		<feedburner:origLink>http://www.exit404.com/2006/87/super-bowl-extra-large</feedburner:origLink></item>
		<item>
		<title>Four Things</title>
		<link>http://feedproxy.google.com/~r/exit404/~3/EeJKQhVtr6U/four-things</link>
		<comments>http://www.exit404.com/2006/86/four-things#comments</comments>
		<pubDate>Fri, 27 Jan 2006 17:09:05 +0000</pubDate>
		<dc:creator>Tony Summerville</dc:creator>
		
	<category>Miscellany</category>
		<guid isPermaLink="false">http://www.exit404.com/2006/86/four-things</guid>
		<description><![CDATA[Ian tagged me so here goes&#8230;
Four jobs I&#8217;ve had

Lifeguard
Warehouse slave at my Dad&#8217;s company
Network Administator (co-op position while in school)
Software Developer

Four movies I can watch over and over

Bottlerocket
A River Runs Through It
Good Will Hunting
Swingers

Four places I’ve lived

Huntsville, AL
Auburn, AL
Brewton, AL
Birmingham, AL

Four TV shows I love

The Shield
24
Lost
The Soup

Four places I’ve vacationed

Bahamas (twice)
Switzerland
Vegas Baby, VEGAS!
2 spring breaks [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.idowens.com">Ian</a> <a title="View Ian's 4 things post" href="http://www.idowens.com/2006/01/26/the-nine-lists-of-four/trackback/">tagged</a> me so here goes&#8230;</p>
<p><strong>Four jobs I&#8217;ve had</strong></p>
<ol>
<li>Lifeguard</li>
<li>Warehouse slave at my Dad&#8217;s company</li>
<li>Network Administator (co-op position while in <a href="http://www.auburn.edu">school</a>)</li>
<li>Software Developer</li>
</ol>
<p><strong>Four movies I can watch over and over</strong></p>
<ol>
<li><a href="http://www.imdb.com/title/tt0115734/">Bottlerocket</a></li>
<li><a href="http://www.imdb.com/title/tt0105265/">A River Runs Through It</a></li>
<li><a href="http://www.imdb.com/title/tt0119217/">Good Will Hunting</a></li>
<li><a href="http://www.imdb.com/title/tt0117802/">Swingers</a></li>
</ol>
<p><strong>Four places I’ve lived</strong></p>
<ol>
<li>Huntsville, AL</li>
<li>Auburn, AL</li>
<li>Brewton, AL</li>
<li>Birmingham, AL</li>
</ol>
<p><strong>Four TV shows I love</strong></p>
<ol>
<li><a href="http://www.imdb.com/title/tt0286486/">The Shield</a></li>
<li><a href="http://www.imdb.com/title/tt0285331/">24</a></li>
<li><a href="http://www.imdb.com/title/tt0411008/">Lost</a></li>
<li><a href="http://www.eonline.com/On/TheSoup/index.html">The Soup</a></li>
</ol>
<p><strong>Four places I’ve vacationed</strong></p>
<ol>
<li>Bahamas (twice)</li>
<li>Switzerland</li>
<li>Vegas Baby, VEGAS!</li>
<li>2 spring breaks at Panama City Beach</li>
</ol>
<p><strong>Four of my favorite dishes</strong></p>
<ol>
<li>Spaghetti</li>
<li>Ribs</li>
<li>Order scrambled with hash browns - covered, chunked, &#038; topped</li>
<li>Sesame Chicken with white rice</li>
</ol>
<p><strong>Four sites I visit daily</strong></p>
<ol>
<li><a href="http://www.digg.com/">digg.com</a></li>
<li><a href="http://www.halogenantelope.com/">HalogenAntelope.com</a></li>
<li>My <a href="http://www.haveamint.com/">Mint</a> Stats</li>
<li>I read most everything via a Feed Reader</li>
</ol>
<p><strong>Four places I would rather be right now</strong></p>
<ol>
<li>At a bar with my friends</li>
<li>Vegas, maybe at <a href="http://www.vegas.com/nightlife/stripclubs/ch2.html">Crazy Horse Too</a></li>
<li>Relaxing on a beach with a big margarita</li>
<li>Travelling somewhere I haven&#8217;t been before</li>
</ol>
<p><strong>Four bloggers I’m tagging</strong><br />
No thanks. I&#8217;ll pass..
</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/exit404?a=EeJKQhVtr6U:VVzQ2cGIqrU:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/exit404?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/exit404?a=EeJKQhVtr6U:VVzQ2cGIqrU:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/exit404?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/exit404?a=EeJKQhVtr6U:VVzQ2cGIqrU:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/exit404?i=EeJKQhVtr6U:VVzQ2cGIqrU:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRSS>http://www.exit404.com/2006/86/four-things/feed/</wfw:commentRSS>
		<feedburner:origLink>http://www.exit404.com/2006/86/four-things</feedburner:origLink></item>
		<item>
		<title>Beauty &amp; The Geek</title>
		<link>http://feedproxy.google.com/~r/exit404/~3/j1x7MCAylfE/beauty-the-geek</link>
		<comments>http://www.exit404.com/2006/84/beauty-the-geek#comments</comments>
		<pubDate>Thu, 12 Jan 2006 21:02:34 +0000</pubDate>
		<dc:creator>Tony Summerville</dc:creator>
		
	<category>Miscellany</category>
		<guid isPermaLink="false">http://www.exit404.com/2006/84/beauty-the-geek</guid>
		<description><![CDATA[I&#8217;ll admit it.  I became a pretty big fan of Beauty &#038; The Geek during its first season last spring.  The girls on the show were hot as hell and the guys were pretty funny too, especially Richard. I was happy to hear the network was giving it a second go around.
Then my [...]]]></description>
			<content:encoded><![CDATA[<p>I&#8217;ll admit it.  I became a pretty big fan of <a href="http://thewb.warnerbros.com/batg/">Beauty &#038; The Geek</a> during its first season last spring.  The girls on the show were hot as hell and the guys were pretty funny too, especially Richard. I was happy to hear the network was giving it a second go around.</p>
<p><img id="image85" src="http://www.exit404.com/wp-content/uploads/2006/01/wes_wilson.jpg" alt="Wes Wilson" />Then my sister surprised me last fall when she told me that Wesley Wilson, a neighbor of mine growing up, a guy I used to carpool with, was going to be on the show.  </p>
<p>On the eve of his graduation from Georgia Tech (a robotics major), Wes was out at the bars in Atlanta and was approached by a casting director for the show. Appearantly, he&#8217;s the only guy contestant that didn&#8217;t go to one of the auditions. Now I&#8217;ve known Wes and his family for a long time and wouldn&#8217;t consider him to be that &#8220;geeky&#8221; - sure he&#8217;s a smart guy, but it&#8217;ll be interesting to see how he&#8217;s portrayed on the show.  </p>
<p>I saw his parents back in November and they told me that Wes had finished filming the show, but couldn&#8217;t say <em>anything</em> to them or anyone else, or he&#8217;d be fined something like <strong>1.5 million</strong> dollars!</p>
<p>Last night, they had a special &#8220;casting&#8221; episode that showed the process of finding the new contestants.  They also showed a quick highlight reel of the upcoming season, with a short clip of what looked like Wes hooking up with one of the beauties!  Season 2 premieres tonight at 8pm central on the WB.  If you&#8217;ve never watched Beauty &#038; The Geek before, you should give it a shot.
</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/exit404?a=j1x7MCAylfE:RvGV00iBZUE:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/exit404?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/exit404?a=j1x7MCAylfE:RvGV00iBZUE:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/exit404?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/exit404?a=j1x7MCAylfE:RvGV00iBZUE:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/exit404?i=j1x7MCAylfE:RvGV00iBZUE:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRSS>http://www.exit404.com/2006/84/beauty-the-geek/feed/</wfw:commentRSS>
		<feedburner:origLink>http://www.exit404.com/2006/84/beauty-the-geek</feedburner:origLink></item>
		<item>
		<title>Here’s to 2006</title>
		<link>http://feedproxy.google.com/~r/exit404/~3/2UuruQyG4uA/heres-to-2006</link>
		<comments>http://www.exit404.com/2005/83/heres-to-2006#comments</comments>
		<pubDate>Wed, 21 Dec 2005 19:28:54 +0000</pubDate>
		<dc:creator>Tony Summerville</dc:creator>
		
	<category>Site news</category>
	<category>Livin'</category>
		<guid isPermaLink="false">http://www.exit404.com/2005/83/heres-to-2006</guid>
		<description><![CDATA[I really just wanted a quick excuse to test out the new Performancing for Firefox extension&#8230;
Performancing for Firefox is a full featured blog editor that sits right within Firefox. Just hit F8 or click the little pencil icon at the bottom right to bring up the blog editor and easily post to your Wordpress, MovableType [...]]]></description>
			<content:encoded><![CDATA[<p>I really just wanted a quick excuse to test out the new <a href="http://performancing.com/firefox">Performancing for Firefox</a> extension&#8230;</p>
<blockquote><p>Performancing for Firefox is a full featured blog editor that sits right within Firefox. Just hit <strong>F8</strong> or click the little pencil icon at the bottom right to bring up the blog editor and easily post to your Wordpress, MovableType or Blogger blogs.</p></blockquote>
<p>&#8230;but I&#8217;d also like to wish everyone a Merry <a href="http://en.wikipedia.org/wiki/Christmukah">Chrismukkah</a> and a happy New Year. I told Santa I wanted a new digital camera (<a href="http://www.dpreview.com/reviews/panasonicfx9/">Panasonic DMC-FX9</a>) for Christmas so hopefully he&#8217;ll come through for me and I&#8217;ll be able to resume taking incriminating photos of me &#038; my friends again. I&#8217;m heading to Phoenix after Christmas and will be drinking in the New Year out there so this will more than likely be my last post of the year. Here&#8217;s wishing you and yours a great <span style="font-weight: bold">2006</span>!</p>
<p>Oh yeah, since installing the wonderful <a href="https://addons.mozilla.org/extensions/moreinfo.php?id=1532">del.icio.us Firefox extension</a>, I&#8217;ve been using <a href="http://del.icio.us/summean">my del.icio.us account</a> much, much more, so I&#8217;ve scrapped using the WordPress Link Manager for my &#8220;Elsewhere&#8221; links and am now using the <a href="http://linuxbrit.co.uk/blog/2004/10/01/wordpress-delicious-plugin-10/">LinuxBrit WordPress plugin</a> instead.
</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/exit404?a=2UuruQyG4uA:WzD97zsETiU:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/exit404?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/exit404?a=2UuruQyG4uA:WzD97zsETiU:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/exit404?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/exit404?a=2UuruQyG4uA:WzD97zsETiU:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/exit404?i=2UuruQyG4uA:WzD97zsETiU:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRSS>http://www.exit404.com/2005/83/heres-to-2006/feed/</wfw:commentRSS>
		<feedburner:origLink>http://www.exit404.com/2005/83/heres-to-2006</feedburner:origLink></item>
		<item>
		<title>Thumping the Competition</title>
		<link>http://feedproxy.google.com/~r/exit404/~3/srErU0zaFMI/thumping-the-competition</link>
		<comments>http://www.exit404.com/2005/82/thumping-the-competition#comments</comments>
		<pubDate>Tue, 13 Dec 2005 21:49:01 +0000</pubDate>
		<dc:creator>Tony Summerville</dc:creator>
		
	<category>Technology</category>
		<guid isPermaLink="false">http://www.exit404.com/?p=82</guid>
		<description><![CDATA[Ever since I bought my iPod, I&#8217;ve been a bit underwhelmed by the headphone market. It seems that the big names in audio aren&#8217;t developing new earbud/earphone products even though the popularity of mobile audio devices continues to rise.
First of all, the earphones that come with the iPod are a joke. They&#8217;re uncomfortable, fall out [...]]]></description>
			<content:encoded><![CDATA[<p>Ever since I bought my iPod, I&#8217;ve been a bit underwhelmed by the headphone market. It seems that the big names in audio aren&#8217;t developing new earbud/earphone products even though the popularity of mobile audio devices continues to rise.</p>
<p>First of all, the earphones that come with the iPod are a joke. They&#8217;re uncomfortable, fall out too easily, and sound like shit. I began looking for a replacement set the day my iPod arrived.</p>
<p>Because of their portability, I like canalphones, which are small headphones that fit inside the ear canal. I&#8217;m not really interested in any of the high end phones because I just can&#8217;t bring myself to spend over $150 dollars for headphones, although I understand that many people will and do every day.</p>
<p>So I fall into a large market segment of iPod users looking for a relatively inexpensive replacement set of earphones that meet some basic requirements.</p>
<ol>
<li>White, minimalistic look that compliments the iPod.</li>
<li>Sound decent enough to make the listening experience enjoyable.</li>
<li>Comfortable. Fit well in the ear and won&#8217;t fall out when running.</li>
</ol>
<p>My first choice was the <a href="http://store.apple.com/1-800-MY-APPLE/WebObjects/AppleStore.woa/73003/wo/gDVp3klSEvY62NLn7MvE28ETqpf/1.SLID?mco=7612A515&#038;nplm=M9394G%2FA">Apple In-Ear Headphones</a>, but they&#8217;ve receieved some pretty lousy reviews on both their sound and fit. Browsing through sites like <a href="http://www.ilounge.com">iLounge</a> and headphone forums, I was surprised that a lot of the recommended products where not available in the US. Most people made their purchases from <a href="http://www.audiocubes.com/">AudioCubes.com</a>, a site based in Japan.</p>
<p>I ended up buying a pair of <a href="http://www.amazon.com/gp/product/B000779RZU/ref=pd_sxp_elt_l1/102-1261868-0218550?n=172282">Sony MDR-EX51LP Headphones</a>, which <em>seemed</em> to meet all of the requirements. The only thing that sucks about them, <em>and pretty much all the other in-ear canalphones</em>, is that instead of the standard &#8220;Y&#8221; split of the cords, <strong>the split is uneven</strong>. The left cord is short, only a few inches, while the right cord is much longer and is meant to wrap around the back of your neck. </p>
<p>To me it&#8217;s stupid and I hate the cords, but I kept the headphones anyway. After using these phones for over 6 months, I&#8217;ve never gotten used to it and have been waiting to try something else. Maybe these things are popular in Japan, but it seems most of the US consumers are like me and prefer the standard &#8220;Y&#8221; split.</p>
<p><img src='/wp-content/images/earthumps.jpg' alt='Griffin EarThumps' /></p>
<h3>Enter the Griffin EarThumps</h3>
<p>A couple of weeks ago, <a href="http://griffintechnology.com/">Griffin Technology</a>, creator of the popular <a href="http://griffintechnology.com/products/earjams/index.php">EarJams</a>, released the <a href="http://griffintechnology.com/products/earthumps/index.php">EarThumps</a>. For only $20 bucks, they looked nice and more importantly had the standard &#8220;Y&#8221; split. There weren&#8217;t any reviews, but I went ahead a purchased them anyway.</p>
<p>I&#8217;ve had them for a few days now and I&#8217;m quite satisfied with them. They sound good enough overall with strong bass, look great, and are very comfortable. I&#8217;ve been running with them twice and for that they work well. And while they do not sound quite as good as the Sonys, I&#8217;ll forgo a little bit of sound quality for usability.</p>
<p>So why haven&#8217;t any of the big companies listened? It&#8217;s not like iPods and other mobile devices came out yesterday. Sure there are companies like <a href="http://www.shure.com/">Shure</a>, <a href="http://www.etymotic.com/">Etymotic</a>, &#038; <a href="http://www.sennheiserusa.com/">Sennheiser</a> that focus on the high end niche, but not everyone wants to spend $300 on earphones. With active forums like the ones at <a href="http://www.ilounge.com">iLounge</a> and <a href="http://www.head-fi.org/">Head-Fi</a>, it should be easy to get a grasp of what people want. Griffin listened and created a product that satisfies a large market segment&#8217;s needs. And until the rest catch up, they&#8217;ll reap the rewards.
</p>
<p class="tags">Tags: <a href="http://technorati.com/tag/ipod" title="See the Technorati tag page for 'ipod'." rel="tag">ipod</a>, <a href="http://technorati.com/tag/headphones" title="See the Technorati tag page for 'headphones'." rel="tag">headphones</a>, <a href="http://technorati.com/tag/griffin" title="See the Technorati tag page for 'griffin'." rel="tag">griffin</a>, <a href="http://technorati.com/tag/sony" title="See the Technorati tag page for 'sony'." rel="tag">sony</a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/exit404?a=srErU0zaFMI:8IJX45104Q0:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/exit404?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/exit404?a=srErU0zaFMI:8IJX45104Q0:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/exit404?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/exit404?a=srErU0zaFMI:8IJX45104Q0:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/exit404?i=srErU0zaFMI:8IJX45104Q0:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRSS>http://www.exit404.com/2005/82/thumping-the-competition/feed/</wfw:commentRSS>
		<feedburner:origLink>http://www.exit404.com/2005/82/thumping-the-competition</feedburner:origLink></item>
		<item>
		<title>Are you on Last.fm?</title>
		<link>http://feedproxy.google.com/~r/exit404/~3/cCubEf3wV5w/are-you-on-lastfm</link>
		<comments>http://www.exit404.com/2005/81/are-you-on-lastfm#comments</comments>
		<pubDate>Fri, 09 Dec 2005 05:24:02 +0000</pubDate>
		<dc:creator>Tony Summerville</dc:creator>
		
	<category>Surfin' the Web</category>
	<category>Music</category>
		<guid isPermaLink="false">http://www.exit404.com/?p=81</guid>
		<description><![CDATA[What is it?
Last.fm is the flagship product from the team that designed the Audioscrobbler system, a music engine based on a massive collection of Music Profiles. Each music profile belongs to one person, and describes their taste in music. Last.fm uses these music profiles to make personalized recommendations, match you up with people who like [...]]]></description>
			<content:encoded><![CDATA[<p>What is it?</p>
<blockquote><p><a href="http://www.last.fm/">Last.fm</a> is the flagship product from the team that designed the Audioscrobbler system, a music engine based on a massive collection of Music Profiles. Each music profile belongs to one person, and describes their taste in music. Last.fm uses these music profiles to make personalized recommendations, match you up with people who like similar music, and generate custom radio stations for each person.</p></blockquote>
<p>Basically, you create an account, <a href="http://www.last.fm/help/plugin/">download and install a plugin for your favorite music player</a>, then Last.fm will keep track of the songs you play on your computer.  But it&#8217;s really so much more than that&#8230;</p>
<p>The more you listen, the better the spiffy recommendations area becomes.  It&#8217;ll help you find new artists and preview music using the Last.fm player, which also doubles as a <a href="http://www.last.fm/radio/">radio station</a>.  The site even has the whole social thing going on so you can see if your friends are listening to crappy music.</p>
<p>Go check it out for yourself and add <a href="http://www.last.fm/user/summerville/">me</a> as a friend if you want to see what awesome people listen to =)
</p>
<p class="tags">Tags: <a href="http://technorati.com/tag/last.fm" title="See the Technorati tag page for 'last.fm'." rel="tag">last.fm</a>, <a href="http://technorati.com/tag/music" title="See the Technorati tag page for 'music'." rel="tag">music</a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/exit404?a=cCubEf3wV5w:QQdhv2SIDmc:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/exit404?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/exit404?a=cCubEf3wV5w:QQdhv2SIDmc:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/exit404?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/exit404?a=cCubEf3wV5w:QQdhv2SIDmc:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/exit404?i=cCubEf3wV5w:QQdhv2SIDmc:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRSS>http://www.exit404.com/2005/81/are-you-on-lastfm/feed/</wfw:commentRSS>
		<feedburner:origLink>http://www.exit404.com/2005/81/are-you-on-lastfm</feedburner:origLink></item>
		<item>
		<title>A new way of looking at things</title>
		<link>http://feedproxy.google.com/~r/exit404/~3/NBlQwKJ8HJw/a-new-way-of-looking-at-things</link>
		<comments>http://www.exit404.com/2005/80/a-new-way-of-looking-at-things#comments</comments>
		<pubDate>Thu, 01 Dec 2005 22:50:50 +0000</pubDate>
		<dc:creator>Tony Summerville</dc:creator>
		
	<category>Miscellany</category>
		<guid isPermaLink="false">http://www.exit404.com/?p=80</guid>
		<description><![CDATA[I&#8217;d been wanting an LCD monitor for a while and I finally caved in and bought one on Sunday.  I&#8217;d had my eye on the Dell UltraSharp 2005FPW 20.1-inch Wide Screen monitor for some time after reading countless great reviews about it.  When I saw that Dell was offering it for 25% off [...]]]></description>
			<content:encoded><![CDATA[<p><img src='/wp-content/images/20053YR.jpg' alt='DELL UltraSharp 2005FPW 20.1-inch Wide Aspect Monitor' />I&#8217;d been wanting an LCD monitor for a while and I finally caved in and bought one on Sunday.  I&#8217;d had my eye on the <a href="http://accessories.us.dell.com/sna/ProductDetail.aspx?sku=20053YR&#038;c=us&#038;category_id=6198&#038;cs=04&#038;l=en&#038;mnf=694&#038;page=productlisting.aspx">Dell UltraSharp 2005FPW 20.1-inch Wide Screen</a> monitor for some time after reading countless great reviews about it.  When I saw that Dell was offering it for 25% off <strong>and</strong> with free shipping, how could I resist?</p>
<p>The monitor is incredible. The difference in clarity between it and my old CRT is amazing. Yada yada yada - its damn good.</p>
<p>It&#8217;s also worth mentioning that my shopping experience with Dell was fantastic.  I placed my order on Sunday, it shipped Monday, and was here on Tuesday!  To add to my delight, Dell actually included a DVI cable (as well as a standard VGA cable) in the box.
</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/exit404?a=NBlQwKJ8HJw:rUC3oMTYPww:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/exit404?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/exit404?a=NBlQwKJ8HJw:rUC3oMTYPww:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/exit404?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/exit404?a=NBlQwKJ8HJw:rUC3oMTYPww:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/exit404?i=NBlQwKJ8HJw:rUC3oMTYPww:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRSS>http://www.exit404.com/2005/80/a-new-way-of-looking-at-things/feed/</wfw:commentRSS>
		<feedburner:origLink>http://www.exit404.com/2005/80/a-new-way-of-looking-at-things</feedburner:origLink></item>
		<item>
		<title>Weekend Review</title>
		<link>http://feedproxy.google.com/~r/exit404/~3/mdM7bShpFLs/weekend-review</link>
		<comments>http://www.exit404.com/2005/79/weekend-review#comments</comments>
		<pubDate>Tue, 22 Nov 2005 05:05:24 +0000</pubDate>
		<dc:creator>Tony Summerville</dc:creator>
		
	<category>Travel</category>
	<category>Sports</category>
	<category>Livin'</category>
		<guid isPermaLink="false">http://www.exit404.com/?p=79</guid>
		<description><![CDATA[
First of all.. WAR DAMN EAGLE!!  Auburn completely ripped Alabama a new one on Saturday and finally exposed our overrated cross-state rivals.  I was able to go to the game and sit in the student section, and though there was not near as much drama as most expected, I was ecstatic to be [...]]]></description>
			<content:encoded><![CDATA[<p class="nofloat center"><img src='/wp-content/images/ironbowl2005_final.jpg' alt='Iron Bowl 2005 Final' /></p>
<p>First of all.. <strong>WAR DAMN EAGLE!!</strong>  Auburn completely ripped Alabama a new one on Saturday and finally exposed our overrated cross-state rivals.  I was able to go to the game and sit in the student section, and though there was not near as much drama as most expected, I was ecstatic to be up 21-0 at the end of the first quarter.  The final score of 28-18 doesn&#8217;t even come close to reflecting Auburn&#8217;s dominating performance. Awesome, awesome game.</p>
<p>After the game however, an unfortunate surprise was awaiting me at my girlfriend&#8217;s apartment complex.  We took her car to the game and left mine in the guest parking lot. <em>This wasn&#8217;t how I remember leaving it:</em></p>
<p class="center nofloat"><a href="http://www.flickr.com/photos/tonysummerville/65764885/" title="Photo Sharing"><img src="http://static.flickr.com/26/65764885_eb13644907_m.jpg" width="240" height="224" alt="Car Wreck" /></a></p>
<p>There was a note from the po-po on my windshield when I returned saying that they&#8217;d been there and started a report, but I needed to call and give them my information.  When I called, the cop that had come earlier was off duty or tied up with the game traffic or something, so they sent a different one instead.  Of course this guy had no clue what had happened, so I had no idea whether or not whoever hit my car had left the scene.  He took my info and I had to wait &#8217;til Monday to get the report.</p>
<p>Luckily, the kid that hit my car was honest, <em>and insured</em>, and reported the accident.  Dealing with his insurance company, Nationwide by the way, has been pretty easy, so let&#8217;s just say I&#8217;m much happier now.</p>
<p>Back to Saturday: We decided to go to the Supper Club earlier than usual that night since it was Iron Bowl weekend. We got there a little after 11 (which trust me is early for Supper Club) only to find that about a thousand other people had the same idea.  After standing in line for over an hour, we were close to the entrance when they stopped letting people in all together since they were way over the fire code limitation.</p>
<p>We ended up going to Bourbon Street, then onto a buddy&#8217;s house afterwards since we all don&#8217;t get to see each other as much after graduating.  We were having a good time, thowing &#8216;em back, when two of my buddies started some playful, drunken wrestling and accidently fell of my friend Virginia while she was sitting on the couch, breaking her wrist. I&#8217;ve broken a lot of bones - my wrist twice - and it really, really sucks to not be able to use your arm like you normally would.</p>
<p>Other than Virginia&#8217;s broken wrist and my broken 4Runner, &#8217;twas a great weekend. To top it off, I&#8217;m off from work all this week too!  Have a happy Thanksgiving.
</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/exit404?a=mdM7bShpFLs:hMibCiuZfmk:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/exit404?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/exit404?a=mdM7bShpFLs:hMibCiuZfmk:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/exit404?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/exit404?a=mdM7bShpFLs:hMibCiuZfmk:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/exit404?i=mdM7bShpFLs:hMibCiuZfmk:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRSS>http://www.exit404.com/2005/79/weekend-review/feed/</wfw:commentRSS>
		<feedburner:origLink>http://www.exit404.com/2005/79/weekend-review</feedburner:origLink></item>
		<item>
		<title>Leaders don’t follow the crowd!</title>
		<link>http://feedproxy.google.com/~r/exit404/~3/LBJN6e48AzY/leaders-dont-follow-the-crowd</link>
		<comments>http://www.exit404.com/2005/78/leaders-dont-follow-the-crowd#comments</comments>
		<pubDate>Thu, 17 Nov 2005 14:21:23 +0000</pubDate>
		<dc:creator>Tony Summerville</dc:creator>
		
	<category>Miscellany</category>
		<guid isPermaLink="false">http://www.exit404.com/?p=78</guid>
		<description><![CDATA[
War Damn Eagle.
]]></description>
			<content:encoded><![CDATA[<p class="nofloat center"><a href="/wp-content/images/leaders.jpg" title="War Damn Eagle"><img src="/wp-content/images/thumb-leaders.jpg" width="410" height="288" alt="War Damn Eagle" /></a></p>
<h3>War Damn Eagle.</h3>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/exit404?a=LBJN6e48AzY:iOxLA-5QR0Q:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/exit404?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/exit404?a=LBJN6e48AzY:iOxLA-5QR0Q:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/exit404?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/exit404?a=LBJN6e48AzY:iOxLA-5QR0Q:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/exit404?i=LBJN6e48AzY:iOxLA-5QR0Q:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRSS>http://www.exit404.com/2005/78/leaders-dont-follow-the-crowd/feed/</wfw:commentRSS>
		<feedburner:origLink>http://www.exit404.com/2005/78/leaders-dont-follow-the-crowd</feedburner:origLink></item>
		<item>
		<title>Blockquote background</title>
		<link>http://feedproxy.google.com/~r/exit404/~3/hifYAQO1OlA/blockquote-background</link>
		<comments>http://www.exit404.com/2005/77/blockquote-background#comments</comments>
		<pubDate>Wed, 16 Nov 2005 19:20:59 +0000</pubDate>
		<dc:creator>Tony Summerville</dc:creator>
		
	<category>Miscellany</category>
		<guid isPermaLink="false">http://www.exit404.com/2005/77/blockquote-background</guid>
		<description><![CDATA[Anyone know of a good font to make a nice, big quote (&#8221;) symbol?  I need one to make a background image for blockquotes and the fonts I have installed just aren&#8217;t doing it for me.

]]></description>
			<content:encoded><![CDATA[<p>Anyone know of a good font to make a nice, big quote (&#8221;) symbol?  I need one to make a background image for blockquotes and the fonts I have installed just aren&#8217;t doing it for me.
</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/exit404?a=hifYAQO1OlA:5_m-dNzGs7A:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/exit404?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/exit404?a=hifYAQO1OlA:5_m-dNzGs7A:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/exit404?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/exit404?a=hifYAQO1OlA:5_m-dNzGs7A:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/exit404?i=hifYAQO1OlA:5_m-dNzGs7A:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRSS>http://www.exit404.com/2005/77/blockquote-background/feed/</wfw:commentRSS>
		<feedburner:origLink>http://www.exit404.com/2005/77/blockquote-background</feedburner:origLink></item>
		<item>
		<title>It’s good to be a banker</title>
		<link>http://feedproxy.google.com/~r/exit404/~3/c2KFVU4GLLw/its-good-to-be-a-banker</link>
		<comments>http://www.exit404.com/2005/76/its-good-to-be-a-banker#comments</comments>
		<pubDate>Fri, 11 Nov 2005 20:04:26 +0000</pubDate>
		<dc:creator>Tony Summerville</dc:creator>
		
	<category>Cognitions</category>
	<category>Livin'</category>
		<guid isPermaLink="false">http://www.exit404.com/?p=76</guid>
		<description><![CDATA[&#8230;because we&#8217;re off for all the holidays, even the ones that nobody else seems to take off, like today - Veterans Day.
Today I&#8217;m working on one of the side projects I&#8217;ve got going: redesigning the website for my dad&#8217;s company - Inline Electric.  It&#8217;s still sporting a design from about 1998 and looks pretty [...]]]></description>
			<content:encoded><![CDATA[<p>&#8230;because <a href="http://www.regions.com">we&#8217;re </a>off for <em>all</em> the holidays, even the ones that nobody else seems to take off, like today - <a href="http://en.wikipedia.org/wiki/Veterans_Day">Veterans Day</a>.</p>
<p>Today I&#8217;m working on one of the side projects I&#8217;ve got going: redesigning the website for my dad&#8217;s company - <a href="http://www.inlineelectric.com">Inline Electric</a>.  It&#8217;s still sporting a design from about 1998 and looks pretty terrible.</p>
<p>Why haven&#8217;t I revamped it before now?  Well, a little over a year ago I <em>did</em> build another site for Inline based on the <a href="http://www.etomite.com/">Etomite Content Management System</a>.  Then I started a new job and the project took a back seat.</p>
<p>When I was thinking about picking it back up again earlier this year, the Etomite project was going through some rough times.  The lead (only) deveoper left the project with another designer to start building a commercial content management system.  They left the project in some - in my opinion - inexperienced hands.  Though it still seems be a pretty active project, nothing too great has come out of it in the last year or so and the new developer(s)? tend to take a while to even come out with bug fixes these days.</p>
<p>To me, this is one of the few downfalls of adopting an open source project to solve a business solution.  If the major player(s) of a project leaves, what will happen?</p>
<p>This doesn&#8217;t really effect the super huge projects such as Linux because there&#8217;s thousands of incredible developers ready to jump at the bit to join a project of that magnitude.  But what about a smaller project like Etomite?  Unlike commercial projects, the leaders have <strong>no</strong> obligations and there may not be suitable replacements in the open source community willing to take over the project.</p>
<p>What do you think?
</p>
<p class="tags">Tags: <a href="http://technorati.com/tag/etomite" title="See the Technorati tag page for 'etomite'." rel="tag">etomite</a>, <a href="http://technorati.com/tag/open+source" title="See the Technorati tag page for 'open source'." rel="tag">open source</a>, <a href="http://technorati.com/tag/veterans+day" title="See the Technorati tag page for 'veterans day'." rel="tag">veterans day</a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/exit404?a=c2KFVU4GLLw:xCA18aWEh5g:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/exit404?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/exit404?a=c2KFVU4GLLw:xCA18aWEh5g:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/exit404?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/exit404?a=c2KFVU4GLLw:xCA18aWEh5g:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/exit404?i=c2KFVU4GLLw:xCA18aWEh5g:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRSS>http://www.exit404.com/2005/76/its-good-to-be-a-banker/feed/</wfw:commentRSS>
		<feedburner:origLink>http://www.exit404.com/2005/76/its-good-to-be-a-banker</feedburner:origLink></item>
		<item>
		<title>Treat Your Mother Right</title>
		<link>http://feedproxy.google.com/~r/exit404/~3/n9CsRnfGAa8/treat-your-mother-right</link>
		<comments>http://www.exit404.com/2005/75/treat-your-mother-right#comments</comments>
		<pubDate>Thu, 10 Nov 2005 01:17:59 +0000</pubDate>
		<dc:creator>Tony Summerville</dc:creator>
		
	<category>Miscellany</category>
		<guid isPermaLink="false">http://www.exit404.com/?p=75</guid>
		<description><![CDATA[Why? Because Mr. T says to.
http://www.devilducky.com/media/26951/

]]></description>
			<content:encoded><![CDATA[<p><img src="/wp-content/images/treatyourmother.jpg" width="174" height="133" alt="Mr T" />Why? Because Mr. T says to.</p>
<p><a rel="external" href="http://www.devilducky.com/media/26951/">http://www.devilducky.com/media/26951/</a>
</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/exit404?a=n9CsRnfGAa8:7g-j0WrEJGc:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/exit404?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/exit404?a=n9CsRnfGAa8:7g-j0WrEJGc:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/exit404?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/exit404?a=n9CsRnfGAa8:7g-j0WrEJGc:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/exit404?i=n9CsRnfGAa8:7g-j0WrEJGc:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRSS>http://www.exit404.com/2005/75/treat-your-mother-right/feed/</wfw:commentRSS>
		<feedburner:origLink>http://www.exit404.com/2005/75/treat-your-mother-right</feedburner:origLink></item>
		<item>
		<title>MSN</title>
		<link>http://feedproxy.google.com/~r/exit404/~3/R8jai2hh6nk/msn</link>
		<comments>http://www.exit404.com/2005/74/msn#comments</comments>
		<pubDate>Tue, 08 Nov 2005 19:54:59 +0000</pubDate>
		<dc:creator>Tony Summerville</dc:creator>
		
	<category>Surfin' the Web</category>
		<guid isPermaLink="false">http://www.exit404.com/?p=74</guid>
		<description><![CDATA[MSN.com went down for a little while today.  No big deal really, but I bet someone&#8217;s getting their ass chewed&#8230;

]]></description>
			<content:encoded><![CDATA[<p>MSN.com went down for a little while today.  No big deal really, but I bet someone&#8217;s getting their ass chewed&#8230;</p>
<p class="nofloat center"><a href="/wp-content/images/msn.jpg" title="MSN.com"><img src="/wp-content/images/thumb-msn.jpg" width="400" height="290" alt="MSN.com" /></a></p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/exit404?a=R8jai2hh6nk:KEhnOpaJRf0:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/exit404?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/exit404?a=R8jai2hh6nk:KEhnOpaJRf0:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/exit404?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/exit404?a=R8jai2hh6nk:KEhnOpaJRf0:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/exit404?i=R8jai2hh6nk:KEhnOpaJRf0:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRSS>http://www.exit404.com/2005/74/msn/feed/</wfw:commentRSS>
		<feedburner:origLink>http://www.exit404.com/2005/74/msn</feedburner:origLink></item>
		<item>
		<title>Doggystyle</title>
		<link>http://feedproxy.google.com/~r/exit404/~3/1tOyt_uWkRQ/doggystyle</link>
		<comments>http://www.exit404.com/2005/73/doggystyle#comments</comments>
		<pubDate>Thu, 03 Nov 2005 15:37:08 +0000</pubDate>
		<dc:creator>Tony Summerville</dc:creator>
		
	<category>Miscellany</category>
		<guid isPermaLink="false">http://www.exit404.com/?p=73</guid>
		<description><![CDATA[Wow.
News from Yorskhire
Extract from the Yorkshire Evening Post:
&#8220;A drunk who claimed he had been raped by a dog was yesterday jailed for 12 months by a judge. Martin Hoyle, 45, was arrested by police after a passing motorist and his girlfriend found a Staffordshire bull terrier, called Badger, having sex with him at the side [...]]]></description>
			<content:encoded><![CDATA[<p>Wow.</p>
<blockquote><p>News from Yorskhire<br />
Extract from the Yorkshire Evening Post:</p>
<p>&#8220;A drunk who claimed he had been raped by a dog was yesterday jailed for 12 months by a judge. Martin Hoyle, 45, was arrested by police after a passing motorist and his girlfriend found a Staffordshire bull terrier, called Badger, having sex with him at the side of a road in Huddersfield, West Yorkshire.</p>
<p>Prosecutor Ben Crosland said the couple had stopped to help because they thought Hoyle was being attacked by the animal. But when they got closer they saw that he had his trousers round his ankles, was down on all fours and the dog was straddling him from behind.</p>
<p>&#8220;The defendant mumbled something about the dog having taken a liking to him,&#8221; said Mr Crosland. &#8220;The couple were extremely offended and sickened by what they saw.&#8221; Another passing motorist contacted the police and Hoyle was arrested as he walked with the dog down the road.</p>
<p>Hoyle, of East view, Marsh, Huddersfield, told police &#8220;I can&#8217;t help it if the dog took a liking to me. He tried to rape me.&#8221;</p>
<p>He repeated the rape allegation at the police station and added &#8220;The dog pulled my trousers down.&#8221; Hoyle, who has had a long-standing alcohol problem, was jailed for 12 months after he admitted committing an act which outraged public decency.</p>
<p>His barrister said Hoyle had no memory of the incident because of his drunken state, but was now very remorseful and incredibly embarrassed.</p>
<p>Jailing him, Judge Alistair McCallum told Hoyle &#8220;Never before in my time at the bar or on the bench have I ever had to deal with somebody who voluntarily allowed himself to be buggered by a dog on the public highway. Frankly it is beyond most of our comprehension. It is an absolutely disgusting thing for members of the public to have to witness.</p></blockquote>
<p><a href="http://www.imdb.com/title/tt0215129/quotes#qt0096660">It&#8217;s okay because it&#8217;s YOUR dog, get it?</a></p>
<p>A buddy of mine somehow found this story <a href="http://www.bbc.co.uk/dna/mb606/F2241577?thread=1247780&#038;skip=40&#038;show=20#p15529302">here</a> by the way.</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/exit404?a=1tOyt_uWkRQ:QydLnm_aM8s:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/exit404?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/exit404?a=1tOyt_uWkRQ:QydLnm_aM8s:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/exit404?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/exit404?a=1tOyt_uWkRQ:QydLnm_aM8s:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/exit404?i=1tOyt_uWkRQ:QydLnm_aM8s:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRSS>http://www.exit404.com/2005/73/doggystyle/feed/</wfw:commentRSS>
		<feedburner:origLink>http://www.exit404.com/2005/73/doggystyle</feedburner:origLink></item>
		<item>
		<title>Unobtrusive &amp; Persistant Script.aculo.us Effects</title>
		<link>http://feedproxy.google.com/~r/exit404/~3/2Fihfbkmp3o/unobtrusive-persistant-scriptaculous-effects</link>
		<comments>http://www.exit404.com/2005/57/unobtrusive-persistant-scriptaculous-effects#comments</comments>
		<pubDate>Wed, 02 Nov 2005 03:07:01 +0000</pubDate>
		<dc:creator>Tony Summerville</dc:creator>
		
	<category>Code</category>
		<guid isPermaLink="false">http://www.exit404.com/?p=57</guid>
		<description><![CDATA[
Update
Thanks to some pointers from Kyle, I've updated the code to use some of the functions built into Prototype (such as '$" (Dollar), addClassName, &#038; removeClassName) and to use Behaviour's addLoadEvent. I also created a more generic example that isn't quite as specific to this site.

As part of the design of this site, I'm using [...]]]></description>
			<content:encoded><![CDATA[<div class="update">
<h3>Update</h3>
<p>Thanks to some pointers from <a href="http://warpspire.com/">Kyle</a>, I've updated the code to use some of the functions built into Prototype (such as '$" (Dollar), addClassName, &#038; removeClassName) and to use Behaviour's addLoadEvent. I also created a more generic <a href="/lab/unobtrusive-persistent-scriptaculous/">example</a> that isn't quite as specific to this site.</p>
</div>
<p>As part of the design of this site, I'm using the <a href="http://script.aculo.us/">script.aculo.us</a> library to make the boxes in the sidebar expand and contract when you click them.  The important part to me was to make the effect <strong>unobtrusive</strong> (no extra markup in the HTML) <em>and</em> keep the position of each box persistant from page to page.</p>
<p><a id="more-57"></a></p>
<p>This turned into quite a long post that can really be divided into two sections:</p>
<ol>
<li><a href="#the-box">The Box creation and markup.</a></li>
<li><a href="#makin-magic">Makin' the script.aculo.us magic.</a></li>
</ol>
<h2 id="the-box">The Box</h2>
<p>First let's take a look at some example HTML markup.</p>
<div class="syntax_hilite">
<div id="html-12">
<div class="html">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;div</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"recent"</span><span style="color: #000000; font-weight: bold;">&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;h3&gt;</span></span>Recently<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/h3&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;ul</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"recent-body"</span><span style="color: #000000; font-weight: bold;">&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;li&gt;</span></span>Recent Post 1<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/li&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;li&gt;</span></span>Recent Post 2<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/li&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/ul&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div&gt;</span></span> </div>
</li>
</ol>
</div>
</div>
</div>
<p>A <code>div</code> with an id, a header, and an unordered list with an id - that's it for each box!</p>
<p>Now think of the box in 3 sections: the top (the header of each section), the middle (content), and the bottom.</p>
<p><strong>Top:</strong><br />
The header background actually contains 2 box tops for the different positions, one with a minus (-) and one with a plus (+).<br />
<img class="nofloat" src="/wp-content/images/sidebarh3bg.jpg" width="325" height="21" alt="H3 Background" /></p>
<p>Look at the measurements for CSS purposes. The width of each box is 160px and height is 21px.</p>
<p><img class="nofloat" src="/wp-content/images/sidebarh3bgmeasurements.jpg" width="300" height="39" alt="H3 Background with measurements" /></p>
<p>Notice in the CSS that the <code>height</code> + <code>padding-top</code> should equal 21px and the <code>width</code> + <code>padding-left</code> should equal 160px. Also, set the <code>cursor</code> to a pointer so the user knows it is clickable.</p>
<div class="syntax_hilite">
<div id="css-13">
<div class="css">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">#sidebar h3 <span style="color:#006600; font-weight:bold;">&#123;</span>&nbsp; &nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #000000; font-weight: bold;">background</span>: <span style="color: #993333;">url</span><span style="color:#006600; font-weight:bold;">&#40;</span>i/sidebar-h3-bg.jpg<span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color: #993333;">no-repeat</span> <span style="color:#800000;">0</span> <span style="color:#800000;">0</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #000000; font-weight: bold;">margin</span>: <span style="color:#800000;">0</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #000000; font-weight: bold;">cursor</span>: <span style="color: #993333;">pointer</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #808080; font-style: italic;">/* height + padding-top = 21px */</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #000000; font-weight: bold;">height</span>: 14px;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #000000; font-weight: bold;">padding-top</span>: 7px;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #808080; font-style: italic;">/* width + padding-left = 160px */</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #000000; font-weight: bold;">width</span>: 153px;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; padding-<span style="color: #000000; font-weight: bold;">left</span>: 7px;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#006600; font-weight:bold;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p>Create a CSS class to use for when the box is contracted and you need to show the other box top (the one with the plus). I use <code>.invisible</code>. Measure how many pixels it is the the beginning of the second box.  In my example, it's 165 pixels.</p>
<div class="syntax_hilite">
<div id="css-14">
<div class="css">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">#sidebar h3<span style="color: #6666ff;">.invisible </span><span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #000000; font-weight: bold;">background</span>: <span style="color: #993333;">url</span><span style="color:#006600; font-weight:bold;">&#40;</span>i/sidebar-h3-bg.jpg<span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color: #993333;">no-repeat</span> -165px <span style="color:#800000;">0</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#006600; font-weight:bold;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p><strong>Middle:</strong><br />
The content needs to have a border on each side with a little padding to seperate the text.  I threw in a little gradient background for kicks as well. I use unordered lists for all the content in my sidebar, but with a few changes you can make the middle section whatever you like.</p>
<div class="syntax_hilite">
<div id="css-15">
<div class="css">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">#sidebar ul <span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #000000; font-weight: bold;">background</span>: <span style="color: #993333;">url</span><span style="color:#006600; font-weight:bold;">&#40;</span>i/sidebar-ul-bg.jpg<span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color: #993333;">no-repeat</span> <span style="color:#800000;">0</span> <span style="color:#800000;">0</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #000000; font-weight: bold;">border-left</span>: 1px <span style="color: #993333;">solid</span> #A6B6C3;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #000000; font-weight: bold;">border-right</span>: 1px <span style="color: #993333;">solid</span> #A6B6C3;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #000000; font-weight: bold;">padding</span>: 4px 2px <span style="color:#800000;">0</span> 2px;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#006600; font-weight:bold;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p><strong>Bottom:</strong><br />
I designed the bottom of the box to "fit in" with the top when it's contracted.<br />
<img class="nofloat" src="/wp-content/images/sidebardivbg.jpg" width="160" height="5" alt="Sidebar div background" /></p>
<p>Position the bottom of the box at the bottom of the surrounding div.  Set the <code>padding-bottom</code> equal to the height of the box bottom image.</p>
<div class="syntax_hilite">
<div id="css-16">
<div class="css">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">#sidebar div <span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #000000; font-weight: bold;">background</span>: <span style="color: #993333;">url</span><span style="color:#006600; font-weight:bold;">&#40;</span>i/sidebar-div-bg.jpg<span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color: #993333;">no-repeat</span> <span style="color: #000000; font-weight: bold;">bottom</span> <span style="color: #000000; font-weight: bold;">left</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #000000; font-weight: bold;">margin</span>: 2px <span style="color:#800000;">0</span> 10px <span style="color:#800000;">0</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #000000; font-weight: bold;">padding-bottom</span>: 5px;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #000000; font-weight: bold;">border</span>: <span style="color: #993333;">none</span>;&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#006600; font-weight:bold;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<h2 id="makin-magic">Files you'll need</h2>
<p>Download the following and extract all the JavaScript files into a folder on your webserver. I like to keep all of my JavaScript files in a folder called "js."  </p>
<ol>
<li><a href="http://script.aculo.us/downloads">Scriptaculous Library</a></li>
<li><a href="http://prototype.conio.net/">Prototype JavaScript Framework</a></li>
<li><a href="http://bennolan.com/behaviour/">Behaviour</a></li>
</ol>
<h2>Makin' the magic</h2>
<p>Look again at the HTML for the "Recent Posts" box:</p>
<div class="syntax_hilite">
<div id="html-17">
<div class="html">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;div</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"recent"</span><span style="color: #000000; font-weight: bold;">&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;h3&gt;</span></span>Recently<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/h3&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;ul</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"recent-body"</span><span style="color: #000000; font-weight: bold;">&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;li&gt;</span></span>Recent Post 1<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/li&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;li&gt;</span></span>Recent Post 2<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/li&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/ul&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div&gt;</span></span> </div>
</li>
</ol>
</div>
</div>
</div>
<p>Think about it logically. We need to listen to each h3 element in the sidebar for the <em>onclick</em> event. Then when one is clicked, see if that h3 element has a class name of "invisible."  If it does, then we'll run the scriptaculous effect <a href="http://wiki.script.aculo.us/scriptaculous/show/Effect.BlindDown">"BlindDown"</a> to bring it back into view and set the class to empty; if the class is already empty, we'll run the <a href="http://wiki.script.aculo.us/scriptaculous/show/Effect.BlindUp">"BlindUp"</a> effect to hide it, then set the class to "invisible."  Easy enough right?</p>
<p>You can read the <a href="http://bennolan.com/behaviour/">Behaviour</a> instructions, but basically it allows you to create "rules" that specify elements to add JavaScript events to. This means that we don't have any JavaScript code in our HTML markup - totally unobtrusive baby! So whip out your favorite JavaScript editor and let's get to work!</p>
<p>Here's what the JavaScript "rule" looks like:</p>
<div class="syntax_hilite">
<div id="javascript-18">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #3366CC;">'#recent h3'</span> : <span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span>el<span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; el.<span style="color: #006600;">onclick</span> = <span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span> <span style="color:#006600; font-weight:bold;">&#40;</span>Element.<span style="color: #006600;">hasClassName</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>, <span style="color: #3366CC;">'invisible'</span><span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">new</span> Effect.<span style="color: #006600;">BlindDown</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">'recent-body'</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; Element.<span style="color: #006600;">removeClassName</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>, <span style="color: #3366CC;">'invisible'</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; setCookie<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">parentNode</span>.<span style="color: #006600;">id</span>, <span style="color: #3366CC;">''</span>, <span style="color:#800000;">365</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">new</span> Effect.<span style="color: #006600;">BlindUp</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">'recent-body'</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; Element.<span style="color: #006600;">addClassName</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>, <span style="color: #3366CC;">'invisible'</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; setCookie<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">parentNode</span>.<span style="color: #006600;">id</span>, <span style="color: #3366CC;">'invisible'</span>, <span style="color:#800000;">365</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#006600; font-weight:bold;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p>We're setting the onclick event for <code>#recent h3</code> unobtusively.  If it has the class name invisible, run the BlindDown effect; if it doesn't then run the BlindUp effect.  Notice the <code>Element.hasClassName</code>, <code>Element.removeClassName</code>, and <code>Element.addClassName</code>.  These are custom Prototype functions that'll work with multiple class names.</p>
<p>Create a new JavaScript file to store the code for your rules. Here's an example with two "boxes":</p>
<div class="syntax_hilite">
<div id="javascript-19">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">var</span> theRules = <span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #3366CC;">'#box1 h3'</span> : <span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span>el<span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; el.<span style="color: #006600;">onclick</span> = <span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span> <span style="color:#006600; font-weight:bold;">&#40;</span>Element.<span style="color: #006600;">hasClassName</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>, <span style="color: #3366CC;">'invisible'</span><span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">new</span> Effect.<span style="color: #006600;">BlindDown</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">'box1-body'</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; Element.<span style="color: #006600;">removeClassName</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>, <span style="color: #3366CC;">'invisible'</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; setCookie<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">parentNode</span>.<span style="color: #006600;">id</span>, <span style="color: #3366CC;">''</span>, <span style="color:#800000;">365</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">new</span> Effect.<span style="color: #006600;">BlindUp</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">'box1-body'</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; Element.<span style="color: #006600;">addClassName</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>, <span style="color: #3366CC;">'invisible'</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; setCookie<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">parentNode</span>.<span style="color: #006600;">id</span>, <span style="color: #3366CC;">'invisible'</span>, <span style="color:#800000;">365</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span>&nbsp; &nbsp;&nbsp; &nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span>,</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #3366CC;">'#box2 h3'</span> : <span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span>el<span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; el.<span style="color: #006600;">onclick</span> = <span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span> <span style="color:#006600; font-weight:bold;">&#40;</span>Element.<span style="color: #006600;">hasClassName</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>, <span style="color: #3366CC;">'invisible'</span><span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">new</span> Effect.<span style="color: #006600;">BlindDown</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">'box2-body'</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; Element.<span style="color: #006600;">removeClassName</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>, <span style="color: #3366CC;">'invisible'</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; setCookie<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">parentNode</span>.<span style="color: #006600;">id</span>, <span style="color: #3366CC;">''</span>, <span style="color:#800000;">365</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">new</span> Effect.<span style="color: #006600;">BlindUp</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">'box2-body'</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; Element.<span style="color: #006600;">addClassName</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>, <span style="color: #3366CC;">'invisible'</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; setCookie<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">parentNode</span>.<span style="color: #006600;">id</span>, <span style="color: #3366CC;">'invisible'</span>, <span style="color:#800000;">365</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span>&nbsp; &nbsp;&nbsp; &nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#006600; font-weight:bold;">&#125;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">Behaviour.<span style="color: #006600;">register</span><span style="color:#006600; font-weight:bold;">&#40;</span>theRules<span style="color:#006600; font-weight:bold;">&#41;</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p>Simply create all the rules you need based on your HTML markup, then call <code>Behaviour.register(Your Rules Variable)</code> at then end.</p>
<h3>Bakin' Cookies</h3>
<p>Notice the <strong>setCookie</strong> function in there? We need to be able to read and set a cookie to store the each box's status (expanded or contracted) from page to page so add the following functions under your rules.  Code adopted from <a href="http://www.digital-web.com/articles/strategies_for_css_switching/">here</a>:</p>
<div class="syntax_hilite">
<div id="javascript-20">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">function</span> setCookie<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #000066;">name</span>,value,days<span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;<span style="color: #000066; font-weight: bold;">if</span> <span style="color:#006600; font-weight:bold;">&#40;</span>days<span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp;<span style="color: #003366; font-weight: bold;">var</span> date = <span style="color: #003366; font-weight: bold;">new</span> Date<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp;date.<span style="color: #006600;">setTime</span><span style="color:#006600; font-weight:bold;">&#40;</span>date.<span style="color: #006600;">getTime</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span>+<span style="color:#006600; font-weight:bold;">&#40;</span>days*<span style="color:#800000;">24</span>*<span style="color:#800000;">60</span>*<span style="color:#800000;">60</span>*<span style="color:#800000;">1000</span><span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp;<span style="color: #003366; font-weight: bold;">var</span> expires = <span style="color: #3366CC;">";expires="</span>+date.<span style="color: #006600;">toGMTString</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;<span style="color:#006600; font-weight:bold;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp;expires = <span style="color: #3366CC;">""</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;<span style="color:#006600; font-weight:bold;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;document.<span style="color: #006600;">cookie</span> = <span style="color: #000066;">name</span>+<span style="color: #3366CC;">"="</span>+value+expires+<span style="color: #3366CC;">";path=/"</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#006600; font-weight:bold;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">function</span> readCookie<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #000066;">name</span><span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;<span style="color: #003366; font-weight: bold;">var</span> needle = <span style="color: #000066;">name</span> + <span style="color: #3366CC;">"="</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;<span style="color: #003366; font-weight: bold;">var</span> cookieArray = document.<span style="color: #006600;">cookie</span>.<span style="color: #006600;">split</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">';'</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;<span style="color: #000066; font-weight: bold;">for</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i=<span style="color:#800000;">0</span>;i &lt;cookieArray.<span style="color: #006600;">length</span>;i++<span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp;<span style="color: #003366; font-weight: bold;">var</span> pair = cookieArray<span style="color:#006600; font-weight:bold;">&#91;</span>i<span style="color:#006600; font-weight:bold;">&#93;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp;<span style="color: #000066; font-weight: bold;">while</span> <span style="color:#006600; font-weight:bold;">&#40;</span>pair.<span style="color: #006600;">charAt</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#800000;">0</span><span style="color:#006600; font-weight:bold;">&#41;</span>==<span style="color: #3366CC;">' '</span><span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;pair = pair.<span style="color: #006600;">substring</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#800000;">1</span>, pair.<span style="color: #006600;">length</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp;<span style="color:#006600; font-weight:bold;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp;<span style="color: #000066; font-weight: bold;">if</span> <span style="color:#006600; font-weight:bold;">&#40;</span>pair.<span style="color: #006600;">indexOf</span><span style="color:#006600; font-weight:bold;">&#40;</span>needle<span style="color:#006600; font-weight:bold;">&#41;</span> == <span style="color:#800000;">0</span><span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;<span style="color: #000066; font-weight: bold;">return</span> pair.<span style="color: #006600;">substring</span><span style="color:#006600; font-weight:bold;">&#40;</span>needle.<span style="color: #006600;">length</span>, pair.<span style="color: #006600;">length</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp;<span style="color:#006600; font-weight:bold;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;<span style="color:#006600; font-weight:bold;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">null</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#006600; font-weight:bold;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
</h3>
<h3>Persistance Is Key</h3>
<p>Now that we're storing the position in a cookie everytime the user clicks a box, we need to <strong>read</strong> those values <em>when each page is generated</em> in order to maintain each box's status as the user browses the site.</p>
<p>Create a variable <code>boxIds</code> that uses the <a href="http://wiki.script.aculo.us/scriptaculous/show/DollarFunction">$ (dollar) function</a> with the id name of each div (box) that needs to be checked.  The <code>hideBoxes()</code> function will check each cookie and "position" the boxes accordingly.</p>
<div class="syntax_hilite">
<div id="javascript-21">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">function</span> hideBoxes<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #009900; font-style: italic;">// Id names of all the &quot;boxes&quot;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; boxIds = $<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"box1"</span>,<span style="color: #3366CC;">"box2"</span><span style="color:#006600; font-weight:bold;">&#41;</span>;&nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #000066; font-weight: bold;">for</span> <span style="color:#006600; font-weight:bold;">&#40;</span>i = <span style="color:#800000;">0</span>; i &lt;boxIds.<span style="color: #006600;">length</span>; i++<span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span> <span style="color:#006600; font-weight:bold;">&#40;</span>boxIds<span style="color:#006600; font-weight:bold;">&#91;</span>i<span style="color:#006600; font-weight:bold;">&#93;</span><span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; cookieValue = readCookie<span style="color:#006600; font-weight:bold;">&#40;</span>boxIds<span style="color:#006600; font-weight:bold;">&#91;</span>i<span style="color:#006600; font-weight:bold;">&#93;</span>.<span style="color: #006600;">id</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span> <span style="color:#006600; font-weight:bold;">&#40;</span>cookieValue == <span style="color: #3366CC;">'invisible'</span><span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">var</span> h3 = boxIds<span style="color:#006600; font-weight:bold;">&#91;</span>i<span style="color:#006600; font-weight:bold;">&#93;</span>.<span style="color: #006600;">getElementsByTagName</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">'h3'</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; Element.<span style="color: #006600;">addClassName</span><span style="color:#006600; font-weight:bold;">&#40;</span>h3<span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#800000;">0</span><span style="color:#006600; font-weight:bold;">&#93;</span>, <span style="color: #3366CC;">'invisible'</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">var</span> kids = boxIds<span style="color:#006600; font-weight:bold;">&#91;</span>i<span style="color:#006600; font-weight:bold;">&#93;</span>.<span style="color: #006600;">childNodes</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">for</span> <span style="color:#006600; font-weight:bold;">&#40;</span>j = <span style="color:#800000;">1</span>; j &lt;kids.<span style="color: #006600;">length</span>; j++<span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;<span style="color: #000066; font-weight: bold;">if</span> <span style="color:#006600; font-weight:bold;">&#40;</span>kids<span style="color:#006600; font-weight:bold;">&#91;</span>j<span style="color:#006600; font-weight:bold;">&#93;</span>.<span style="color: #006600;">id</span><span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;Element.<span style="color: #006600;">hide</span><span style="color:#006600; font-weight:bold;">&#40;</span>kids<span style="color:#006600; font-weight:bold;">&#91;</span>j<span style="color:#006600; font-weight:bold;">&#93;</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;<span style="color:#006600; font-weight:bold;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span>&nbsp; &nbsp;&nbsp; &nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span>&nbsp; &nbsp; &nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#006600; font-weight:bold;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></code><br />
Last but not least, make sure the <code>hideBoxes()</code> function runs when the browser window loads.  Behaviour includes a load event already, so you can just use that.</p>
<div class="syntax_hilite">
<div id="javascript-22">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#8C8C8C; font-weight:bold;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">Behaviour.<span style="color: #006600;">addLoadEvent</span><span style="color:#006600; font-weight:bold;">&#40;</span>hideBoxes<span style="color:#006600; font-weight:bold;">&#41;</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<h3>Final Thoughts</h3>
<p>A lot of the code in this example is specific to this site, but the idea and framework is universal and easily adaptable to any site.  There's a <a href="/lab/unobtrusive-persistent-scriptaculous/">more generic example</a> which you can view the source of to see how it works.</p>
<p>I really just wanted to show that it's pretty easy to add cool JavaScript effects from the script.aculo.us library to your site without mucking up all your HTML code.
</p>
<p class="tags">Tags: <a href="http://technorati.com/tag/scriptaculous" title="See the Technorati tag page for 'scriptaculous'." rel="tag">scriptaculous</a>, <a href="http://technorati.com/tag/javascript" title="See the Technorati tag page for 'javascript'." rel="tag">javascript</a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/exit404?a=2Fihfbkmp3o:22xmBjzOmts:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/exit404?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/exit404?a=2Fihfbkmp3o:22xmBjzOmts:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/exit404?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/exit404?a=2Fihfbkmp3o:22xmBjzOmts:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/exit404?i=2Fihfbkmp3o:22xmBjzOmts:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRSS>http://www.exit404.com/2005/57/unobtrusive-persistant-scriptaculous-effects/feed/</wfw:commentRSS>
		<feedburner:origLink>http://www.exit404.com/2005/57/unobtrusive-persistant-scriptaculous-effects</feedburner:origLink></item>
		<item>
		<title>Calendar apps</title>
		<link>http://feedproxy.google.com/~r/exit404/~3/CGPTHegOgGQ/calendar-apps</link>
		<comments>http://www.exit404.com/2005/72/calendar-apps#comments</comments>
		<pubDate>Tue, 01 Nov 2005 16:06:14 +0000</pubDate>
		<dc:creator>Tony Summerville</dc:creator>
		
	<category>Surfin' the Web</category>
		<guid isPermaLink="false">http://www.exit404.com/?p=72</guid>
		<description><![CDATA[I've been messing around with a couple of different online calendar/organization applications for the past couple of days.
AirSet is solid. Why? I can sync everything between Microsoft Outlook and AirSet.  That's awesome.  I can't say that about the interface though.  Compared to others, it's sorely lacking in design.
On the other hand, MyPIMP [...]]]></description>
			<content:encoded><![CDATA[<p>I've been messing around with a couple of different online calendar/organization applications for the past couple of days.</p>
<p><a href="https://www.airset.com/">AirSet</a> is solid. Why? I can sync everything between <a href="http://www.microsoft.com/outlook">Microsoft Outlook</a> and AirSet.  That's awesome.  I can't say that about the interface though.  Compared to others, it's sorely lacking in design.</p>
<p>On the other hand, <a href="http://www.mypimp.com/">MyPIMP</a> (Personal Information Management Portal) has a <strong>gorgeous</strong> interface, but is lacking in some the features AirSet has; namely Outlook synchronization and RSS feeds.  They say they'll be adding these features soon.  I love the name though.</p>
<p>Both of these applications have a lot of potential, and they're free.  I'm loving all the new "online organization" apps, as they can really help bridge the gap between work and personal schedules.
</p>
<p class="tags">Tags: <a href="http://technorati.com/tag/mypimp" title="See the Technorati tag page for 'mypimp'." rel="tag">mypimp</a>, <a href="http://technorati.com/tag/airset" title="See the Technorati tag page for 'airset'." rel="tag">airset</a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/exit404?a=CGPTHegOgGQ:wV-4YR6nlYk:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/exit404?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/exit404?a=CGPTHegOgGQ:wV-4YR6nlYk:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/exit404?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/exit404?a=CGPTHegOgGQ:wV-4YR6nlYk:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/exit404?i=CGPTHegOgGQ:wV-4YR6nlYk:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRSS>http://www.exit404.com/2005/72/calendar-apps/feed/</wfw:commentRSS>
		<feedburner:origLink>http://www.exit404.com/2005/72/calendar-apps</feedburner:origLink></item>
		<item>
		<title>Beatdown</title>
		<link>http://feedproxy.google.com/~r/exit404/~3/NL_9BcNpa8g/beatdown</link>
		<comments>http://www.exit404.com/2005/71/beatdown#comments</comments>
		<pubDate>Fri, 28 Oct 2005 21:23:40 +0000</pubDate>
		<dc:creator>Tony Summerville</dc:creator>
		
	<category>Miscellany</category>
		<guid isPermaLink="false">http://www.exit404.com/2005/71/beatdown</guid>
		<description><![CDATA[
Tags: auburn, john vaughn]]></description>
			<content:encoded><![CDATA[<p class="center nofloat"><a href="/wp-content/images/johnvaughnbeatdown.jpg" title="John Vaughn beatdown"><img src="/wp-content/images/thumb-johnvaughnbeatdown.jpg" width="400" height="266" alt="John Vaughn beatdown" /></a></p>
<p class="tags">Tags: <a href="http://technorati.com/tag/auburn" title="See the Technorati tag page for 'auburn'." rel="tag">auburn</a>, <a href="http://technorati.com/tag/john+vaughn" title="See the Technorati tag page for 'john vaughn'." rel="tag">john vaughn</a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/exit404?a=NL_9BcNpa8g:r49Xvzp0ljU:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/exit404?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/exit404?a=NL_9BcNpa8g:r49Xvzp0ljU:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/exit404?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/exit404?a=NL_9BcNpa8g:r49Xvzp0ljU:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/exit404?i=NL_9BcNpa8g:r49Xvzp0ljU:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRSS>http://www.exit404.com/2005/71/beatdown/feed/</wfw:commentRSS>
		<feedburner:origLink>http://www.exit404.com/2005/71/beatdown</feedburner:origLink></item>
	</channel>
</rss>
