<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	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:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Andrew Burgess</title>
	<atom:link href="http://deceptacle.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://deceptacle.com</link>
	<description>The various things from inside my brain</description>
	<lastBuildDate>Fri, 27 Aug 2010 18:05:26 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>jQuery Masked Input</title>
		<link>http://deceptacle.com/2010/08/jquery-masked-input/</link>
		<comments>http://deceptacle.com/2010/08/jquery-masked-input/#comments</comments>
		<pubDate>Wed, 25 Aug 2010 20:42:52 +0000</pubDate>
		<dc:creator>Andrew Burgess</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[input]]></category>
		<category><![CDATA[plugins]]></category>

		<guid isPermaLink="false">http://deceptacle.com/?p=71</guid>
		<description><![CDATA[Found this plugin for jQuery for masking input boxes to restrict input to a specific format. http://digitalbush.com/projects/masked-input-plugin/ Definitely pleased with this plugin. Very easy to use, and the format for specifying masks is easy as well. 1$&#40;&#34;#CellPhone&#34;&#41;.mask&#40;&#34;(999) 999-9999&#34;&#41;; That&#8217;s how easy it is to set up a mask. I do have one problem with it [...]]]></description>
			<content:encoded><![CDATA[<p>Found this plugin for <a href="http://jquery.com">jQuery</a> for masking input boxes to restrict input to a specific format.</p>
<p><a href="http://digitalbush.com/projects/masked-input-plugin/">http://digitalbush.com/projects/masked-input-plugin/</a></p>
<p>Definitely pleased with this plugin. Very easy to use, and the format for specifying masks is easy as well.</p>
<div class="codecolorer-container javascript dawn" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br /></div></td><td><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#CellPhone&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">mask</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;(999) 999-9999&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></div></td></tr></tbody></table></div>
<p>That&#8217;s how easy it is to set up a mask.</p>
<p>I do have one problem with it though. It&#8217;s basically a one to one mapping for characters (you can specify optional sections on the end) but it doesn&#8217;t allow something more regex based. For instance: at least one but up to three letters, followed by 6 numbers (a135923 and ab473922). I will probably try to extend it if I ever run across this situation though.</p>
<p>Give it a look if you need to restrict input on textboxes.</p>
]]></content:encoded>
			<wfw:commentRss>http://deceptacle.com/2010/08/jquery-masked-input/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>MP3 Folder Cleaner</title>
		<link>http://deceptacle.com/2010/08/mp3-folder-cleaner/</link>
		<comments>http://deceptacle.com/2010/08/mp3-folder-cleaner/#comments</comments>
		<pubDate>Thu, 19 Aug 2010 23:18:10 +0000</pubDate>
		<dc:creator>Andrew Burgess</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Python]]></category>
		<category><![CDATA[collection]]></category>
		<category><![CDATA[music]]></category>
		<category><![CDATA[organizing]]></category>

		<guid isPermaLink="false">http://deceptacle.com/?p=62</guid>
		<description><![CDATA[This is just a quick Python script that I put together to help sort through my music collection. I have a pretty large one, around 24,000 tracks, and I&#8217;m trying to consolidate all of them into a more standardized bitrate of 192kbps.  Since they&#8217;re all over the map, I figured I would put them into [...]]]></description>
			<content:encoded><![CDATA[<p>This is just a quick Python script that I put together to help sort through my music collection. I have a pretty large one, around 24,000 tracks, and I&#8217;m trying to consolidate all of them into a more standardized bitrate of 192kbps.  Since they&#8217;re all over the map, I figured I would put them into correct bitrate, over, and under folders, so that the ones that are correct can be tagged with MusicBrainz Picard, and the rest can be down converted or reacquired in order to get that consistency.</p>
<p><strong>Requirements:</strong></p>
<ul>
<li>Python 2.5.2 or greater (older versions may work, but you should have at least this)</li>
<li>Mutagen (<a href="http://code.google.com/p/mutagen/">http://code.google.com/p/mutagen/</a>) &#8211; you can install it using easy_install</li>
</ul>
<p><strong>Usage:</strong></p>
<p>Just run the script in a command prompt, and it will ask you which directories to use.</p>
<p><strong>Updates</strong></p>
<ul>
<li>August 19, 2010 &#8211; 11:17 PM
<ul>
<li>Moves files based on their metadata instead of just file name</li>
<li>Fixed some character handling (removing invalid filepath characters</li>
<li>Handles situations where a track may not have tags</li>
</ul>
</li>
</ul>
<p><strong>Source:</strong></p>
<div class="codecolorer-container python dawn" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />31<br />32<br />33<br />34<br />35<br />36<br />37<br />38<br />39<br />40<br />41<br />42<br />43<br />44<br />45<br />46<br />47<br />48<br />49<br />50<br />51<br />52<br />53<br />54<br />55<br />56<br />57<br />58<br />59<br />60<br />61<br />62<br />63<br />64<br />65<br />66<br />67<br />68<br />69<br /></div></td><td><div class="python codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #ff7700;font-weight:bold;">import</span> <span style="color: #dc143c;">os</span>, <span style="color: #dc143c;">sys</span>, <span style="color: #dc143c;">shutil</span><br />
<span style="color: #ff7700;font-weight:bold;">from</span> mutagen.<span style="color: black;">easyid3</span> <span style="color: #ff7700;font-weight:bold;">import</span> EasyID3<br />
<span style="color: #ff7700;font-weight:bold;">from</span> mutagen.<span style="color: black;">mp3</span> <span style="color: #ff7700;font-weight:bold;">import</span> MP3<br />
<br />
<span style="color: #008000;">dir</span> = <span style="color: #008000;">raw_input</span><span style="color: black;">&#40;</span><span style="color: #483d8b;">&quot;Enter the directory to work in: &quot;</span><span style="color: black;">&#41;</span><br />
move192 = <span style="color: #008000;">raw_input</span><span style="color: black;">&#40;</span><span style="color: #483d8b;">&quot;Where should 192kbps files go?: &quot;</span><span style="color: black;">&#41;</span><br />
moveOver = <span style="color: #008000;">raw_input</span><span style="color: black;">&#40;</span><span style="color: #483d8b;">&quot;Where should files over 192kbps go?: &quot;</span><span style="color: black;">&#41;</span><br />
moveUnder = <span style="color: #008000;">raw_input</span><span style="color: black;">&#40;</span><span style="color: #483d8b;">&quot;Where should files under 192kbps go?: &quot;</span><span style="color: black;">&#41;</span><br />
<br />
<span style="color: #ff7700;font-weight:bold;">if</span> <span style="color: #ff7700;font-weight:bold;">not</span> <span style="color: #dc143c;">os</span>.<span style="color: black;">path</span>.<span style="color: black;">isdir</span><span style="color: black;">&#40;</span><span style="color: #008000;">dir</span><span style="color: black;">&#41;</span>:<br />
&nbsp; &nbsp; <span style="color: #ff7700;font-weight:bold;">print</span> <span style="color: #483d8b;">&quot;Start directory must be valid directory&quot;</span><br />
&nbsp; &nbsp; <span style="color: #dc143c;">sys</span>.<span style="color: black;">exit</span><span style="color: black;">&#40;</span><span style="color: black;">&#41;</span><br />
&nbsp; &nbsp; <br />
<span style="color: #ff7700;font-weight:bold;">if</span> <span style="color: #ff7700;font-weight:bold;">not</span> <span style="color: #dc143c;">os</span>.<span style="color: black;">path</span>.<span style="color: black;">isdir</span><span style="color: black;">&#40;</span>move192<span style="color: black;">&#41;</span>:<br />
&nbsp; &nbsp; <span style="color: #ff7700;font-weight:bold;">print</span> <span style="color: #483d8b;">&quot;192kbps path is not a directory&quot;</span><br />
&nbsp; &nbsp; <span style="color: #dc143c;">sys</span>.<span style="color: black;">exit</span><span style="color: black;">&#40;</span><span style="color: black;">&#41;</span><br />
&nbsp; &nbsp; <br />
<span style="color: #ff7700;font-weight:bold;">if</span> <span style="color: #ff7700;font-weight:bold;">not</span> <span style="color: #dc143c;">os</span>.<span style="color: black;">path</span>.<span style="color: black;">isdir</span><span style="color: black;">&#40;</span>moveOver<span style="color: black;">&#41;</span>:<br />
&nbsp; &nbsp; <span style="color: #ff7700;font-weight:bold;">print</span> <span style="color: #483d8b;">&quot;Over 192kbps path is not a directory&quot;</span><br />
&nbsp; &nbsp; <span style="color: #dc143c;">sys</span>.<span style="color: black;">exit</span><span style="color: black;">&#40;</span><span style="color: black;">&#41;</span><br />
&nbsp; &nbsp; <br />
<span style="color: #ff7700;font-weight:bold;">if</span> <span style="color: #ff7700;font-weight:bold;">not</span> <span style="color: #dc143c;">os</span>.<span style="color: black;">path</span>.<span style="color: black;">isdir</span><span style="color: black;">&#40;</span>moveUnder<span style="color: black;">&#41;</span>:<br />
&nbsp; &nbsp; <span style="color: #ff7700;font-weight:bold;">print</span> <span style="color: #483d8b;">&quot;Under 192kbps path is not a directory&quot;</span><br />
&nbsp; &nbsp; <span style="color: #dc143c;">sys</span>.<span style="color: black;">exit</span><span style="color: black;">&#40;</span><span style="color: black;">&#41;</span><br />
&nbsp; &nbsp; <br />
<span style="color: #ff7700;font-weight:bold;">def</span> cleanPath<span style="color: black;">&#40;</span>value<span style="color: black;">&#41;</span>:<br />
&nbsp; &nbsp; value = value.<span style="color: black;">encode</span><span style="color: black;">&#40;</span><span style="color: #483d8b;">&quot;ascii&quot;</span>, <span style="color: #483d8b;">&quot;replace&quot;</span><span style="color: black;">&#41;</span><br />
&nbsp; &nbsp; deletechars = <span style="color: #483d8b;">'<span style="color: #000099; font-weight: bold;">\/</span>:*?&quot;&lt;&gt;|'</span><br />
&nbsp; &nbsp; <span style="color: #ff7700;font-weight:bold;">for</span> c <span style="color: #ff7700;font-weight:bold;">in</span> deletechars:<br />
&nbsp; &nbsp; &nbsp; &nbsp; value = value.<span style="color: black;">replace</span><span style="color: black;">&#40;</span>c,<span style="color: #483d8b;">''</span><span style="color: black;">&#41;</span><br />
&nbsp; &nbsp; <span style="color: #ff7700;font-weight:bold;">return</span> value<span style="color: #66cc66;">;</span><br />
&nbsp; &nbsp; <br />
<span style="color: #ff7700;font-weight:bold;">def</span> deleteError<span style="color: black;">&#40;</span>function, path, excinfo<span style="color: black;">&#41;</span>:<br />
&nbsp; &nbsp; <span style="color: #ff7700;font-weight:bold;">print</span> <span style="color: #483d8b;">&quot;ERROR: Could not delete &quot;</span> + path<br />
&nbsp; &nbsp; again = <span style="color: #008000;">raw_input</span><span style="color: black;">&#40;</span><span style="color: #483d8b;">&quot;Try again? (Enter 'y' for yes, otherwise press Enter): &quot;</span><span style="color: black;">&#41;</span><br />
&nbsp; &nbsp; <span style="color: #ff7700;font-weight:bold;">if</span> <span style="color: black;">&#40;</span>again == <span style="color: #483d8b;">&quot;y&quot;</span><span style="color: black;">&#41;</span>:<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #dc143c;">shutil</span>.<span style="color: black;">rmtree</span><span style="color: black;">&#40;</span>path, <span style="color: #008000;">False</span>, deleteError<span style="color: black;">&#41;</span><br />
<br />
<span style="color: #ff7700;font-weight:bold;">def</span> processMP3<span style="color: black;">&#40;</span>filepath, <span style="color: #008000;">file</span><span style="color: black;">&#41;</span>:<br />
&nbsp; &nbsp; audio = MP3<span style="color: black;">&#40;</span>filepath, ID3=EasyID3<span style="color: black;">&#41;</span><br />
&nbsp; &nbsp; name = <span style="color: #483d8b;">&quot;&quot;</span><br />
&nbsp; &nbsp; <span style="color: #ff7700;font-weight:bold;">if</span> <span style="color: black;">&#40;</span><span style="color: #483d8b;">&quot;artist&quot;</span> <span style="color: #ff7700;font-weight:bold;">in</span> audio <span style="color: #ff7700;font-weight:bold;">and</span> <span style="color: #483d8b;">&quot;title&quot;</span> <span style="color: #ff7700;font-weight:bold;">in</span> audio <span style="color: #ff7700;font-weight:bold;">and</span> <span style="color: #483d8b;">&quot;album&quot;</span> <span style="color: #ff7700;font-weight:bold;">in</span> audio<span style="color: black;">&#41;</span>:<br />
&nbsp; &nbsp; &nbsp; &nbsp; name = cleanPath<span style="color: black;">&#40;</span>audio<span style="color: black;">&#91;</span><span style="color: #483d8b;">&quot;artist&quot;</span><span style="color: black;">&#93;</span><span style="color: black;">&#91;</span><span style="color: #ff4500;">0</span><span style="color: black;">&#93;</span> + <span style="color: #483d8b;">&quot; - &quot;</span> + audio<span style="color: black;">&#91;</span><span style="color: #483d8b;">&quot;title&quot;</span><span style="color: black;">&#93;</span><span style="color: black;">&#91;</span><span style="color: #ff4500;">0</span><span style="color: black;">&#93;</span> + <span style="color: #483d8b;">&quot; (&quot;</span> + audio<span style="color: black;">&#91;</span><span style="color: #483d8b;">&quot;album&quot;</span><span style="color: black;">&#93;</span><span style="color: black;">&#91;</span><span style="color: #ff4500;">0</span><span style="color: black;">&#93;</span> + <span style="color: #483d8b;">&quot;).mp3&quot;</span><span style="color: black;">&#41;</span><br />
&nbsp; &nbsp; <span style="color: #ff7700;font-weight:bold;">else</span>:<br />
&nbsp; &nbsp; &nbsp; &nbsp; name = <span style="color: #008000;">file</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span style="color: #ff7700;font-weight:bold;">if</span> audio.<span style="color: black;">info</span>.<span style="color: black;">bitrate</span> == <span style="color: #ff4500;">192000</span>:<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #ff7700;font-weight:bold;">print</span> <span style="color: #483d8b;">&quot;Moving &quot;</span> + <span style="color: #008000;">file</span> + <span style="color: #483d8b;">&quot; to &quot;</span> + <span style="color: #dc143c;">os</span>.<span style="color: black;">path</span>.<span style="color: black;">join</span><span style="color: black;">&#40;</span>move192, name<span style="color: black;">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #dc143c;">shutil</span>.<span style="color: black;">move</span><span style="color: black;">&#40;</span>filepath, <span style="color: #dc143c;">os</span>.<span style="color: black;">path</span>.<span style="color: black;">join</span><span style="color: black;">&#40;</span>move192, name<span style="color: black;">&#41;</span><span style="color: black;">&#41;</span><br />
&nbsp; &nbsp; <span style="color: #ff7700;font-weight:bold;">elif</span> audio.<span style="color: black;">info</span>.<span style="color: black;">bitrate</span> <span style="color: #66cc66;">&lt;</span> <span style="color: #ff4500;">192000</span>:<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #ff7700;font-weight:bold;">print</span> <span style="color: #483d8b;">&quot;Moving &quot;</span> + <span style="color: #008000;">file</span> + <span style="color: #483d8b;">&quot; to &quot;</span> + <span style="color: #dc143c;">os</span>.<span style="color: black;">path</span>.<span style="color: black;">join</span><span style="color: black;">&#40;</span>moveUnder, name<span style="color: black;">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #dc143c;">shutil</span>.<span style="color: black;">move</span><span style="color: black;">&#40;</span>filepath, <span style="color: #dc143c;">os</span>.<span style="color: black;">path</span>.<span style="color: black;">join</span><span style="color: black;">&#40;</span>moveUnder, name<span style="color: black;">&#41;</span><span style="color: black;">&#41;</span><br />
&nbsp; &nbsp; <span style="color: #ff7700;font-weight:bold;">elif</span> audio.<span style="color: black;">info</span>.<span style="color: black;">bitrate</span> <span style="color: #66cc66;">&gt;</span> <span style="color: #ff4500;">192000</span>:<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #ff7700;font-weight:bold;">print</span> <span style="color: #483d8b;">&quot;Moving &quot;</span> + <span style="color: #008000;">file</span> + <span style="color: #483d8b;">&quot; to &quot;</span> + <span style="color: #dc143c;">os</span>.<span style="color: black;">path</span>.<span style="color: black;">join</span><span style="color: black;">&#40;</span>move192, name<span style="color: black;">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #dc143c;">shutil</span>.<span style="color: black;">move</span><span style="color: black;">&#40;</span>filepath, <span style="color: #dc143c;">os</span>.<span style="color: black;">path</span>.<span style="color: black;">join</span><span style="color: black;">&#40;</span>move192, name<span style="color: black;">&#41;</span><span style="color: black;">&#41;</span><br />
<br />
<span style="color: #ff7700;font-weight:bold;">def</span> process<span style="color: black;">&#40;</span>directory<span style="color: black;">&#41;</span>:<br />
&nbsp; &nbsp; <span style="color: #ff7700;font-weight:bold;">for</span> f <span style="color: #ff7700;font-weight:bold;">in</span> <span style="color: #dc143c;">os</span>.<span style="color: black;">listdir</span><span style="color: black;">&#40;</span>directory<span style="color: black;">&#41;</span>:<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #ff7700;font-weight:bold;">if</span> <span style="color: #ff7700;font-weight:bold;">not</span> <span style="color: #dc143c;">os</span>.<span style="color: black;">path</span>.<span style="color: black;">isfile</span><span style="color: black;">&#40;</span><span style="color: #dc143c;">os</span>.<span style="color: black;">path</span>.<span style="color: black;">join</span><span style="color: black;">&#40;</span>directory, f<span style="color: black;">&#41;</span><span style="color: black;">&#41;</span>:<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; process<span style="color: black;">&#40;</span><span style="color: #dc143c;">os</span>.<span style="color: black;">path</span>.<span style="color: black;">join</span><span style="color: black;">&#40;</span>directory, f<span style="color: black;">&#41;</span><span style="color: black;">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #ff7700;font-weight:bold;">else</span>:<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: black;">&#40;</span>name, ext<span style="color: black;">&#41;</span> = <span style="color: #dc143c;">os</span>.<span style="color: black;">path</span>.<span style="color: black;">splitext</span><span style="color: black;">&#40;</span>f<span style="color: black;">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #ff7700;font-weight:bold;">if</span> ext == <span style="color: #483d8b;">&quot;.mp3&quot;</span>:<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; processMP3<span style="color: black;">&#40;</span><span style="color: #dc143c;">os</span>.<span style="color: black;">path</span>.<span style="color: black;">join</span><span style="color: black;">&#40;</span>directory, f<span style="color: black;">&#41;</span>, f<span style="color: black;">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; <span style="color: #ff7700;font-weight:bold;">print</span> <span style="color: #483d8b;">&quot;Deleting &quot;</span> + directory<br />
&nbsp; &nbsp; <span style="color: #dc143c;">shutil</span>.<span style="color: black;">rmtree</span><span style="color: black;">&#40;</span>directory, <span style="color: #008000;">False</span>, deleteError<span style="color: black;">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
process<span style="color: black;">&#40;</span><span style="color: #008000;">dir</span><span style="color: black;">&#41;</span></div></td></tr></tbody></table></div>
]]></content:encoded>
			<wfw:commentRss>http://deceptacle.com/2010/08/mp3-folder-cleaner/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Oregon Trail: The Movie</title>
		<link>http://deceptacle.com/2010/08/oregon-trail-the-movie/</link>
		<comments>http://deceptacle.com/2010/08/oregon-trail-the-movie/#comments</comments>
		<pubDate>Wed, 04 Aug 2010 04:11:31 +0000</pubDate>
		<dc:creator>Andrew Burgess</dc:creator>
				<category><![CDATA[Humor]]></category>
		<category><![CDATA[Videos]]></category>
		<category><![CDATA[classic]]></category>
		<category><![CDATA[trailer]]></category>
		<category><![CDATA[video games]]></category>

		<guid isPermaLink="false">http://deceptacle.com/?p=42</guid>
		<description><![CDATA[www.youtube.com/watch?v=CHps2SecuDk]]></description>
			<content:encoded><![CDATA[<p><span class="youtube">
<object width="480" height="385">
<param name="movie" value="http://www.youtube.com/v/CHps2SecuDk&amp;color1=d6d6d6&amp;color2=f0f0f0&amp;border=0&amp;fs=1&amp;hl=en&amp;autoplay=0&amp;showinfo=0&amp;iv_load_policy=3&amp;showsearch=0?rel=1" />
<param name="allowFullScreen" value="true" />
<embed wmode="transparent" src="http://www.youtube.com/v/CHps2SecuDk&amp;color1=d6d6d6&amp;color2=f0f0f0&amp;border=0&amp;fs=1&amp;hl=en&amp;autoplay=0&amp;showinfo=0&amp;iv_load_policy=3&amp;showsearch=0?rel=1" type="application/x-shockwave-flash" allowfullscreen="true" width="480" height="385"></embed>
<param name="wmode" value="transparent" />
</object>
</span><p><a href="http://www.youtube.com/watch?v=CHps2SecuDk">www.youtube.com/watch?v=CHps2SecuDk</a></p></p>
]]></content:encoded>
			<wfw:commentRss>http://deceptacle.com/2010/08/oregon-trail-the-movie/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Creating a Vertically Oriented Table</title>
		<link>http://deceptacle.com/2010/08/creating-a-vertically-oriented-table/</link>
		<comments>http://deceptacle.com/2010/08/creating-a-vertically-oriented-table/#comments</comments>
		<pubDate>Tue, 03 Aug 2010 16:24:25 +0000</pubDate>
		<dc:creator>Andrew Burgess</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Code]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[work]]></category>

		<guid isPermaLink="false">http://deceptacle.com/?p=28</guid>
		<description><![CDATA[For the project that I&#8217;m working on at my company, one of the pages required developing a table that was vertically oriented (first cell in each row is a header, each data item takes a column). It also had to be editable in place, which means that using a traditional table would be extremely difficult [...]]]></description>
			<content:encoded><![CDATA[<p>For the project that I&#8217;m working on at my company, one of the pages required developing a table that was vertically oriented (first cell in each row is a header, each data item takes a column). It also had to be editable in place, which means that using a traditional table would be extremely difficult and hackish.</p>
<p>I settled on using unordered lists and some jQuery to give the appearance of a table, and it seems to have worked out splendidly.</p>
<p>CSS Styles</p>
<div class="codecolorer-container css dawn" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br /></div></td><td><div class="css codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #6666ff;">.table-container</span> <span style="color: #00AA00;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#AAAAAA</span><span style="color: #00AA00;">;</span><br />
<span style="color: #00AA00;">&#125;</span><br />
<span style="color: #6666ff;">.vertical-list-container</span> <span style="color: #00AA00;">&#123;</span><br />
&nbsp; &nbsp; overflow-x<span style="color: #00AA00;">:</span><span style="color: #993333;">scroll</span><span style="color: #00AA00;">;</span> <br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span> <span style="color: #933;">600px</span><span style="color: #00AA00;">;</span> <br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">border-left</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#AAAAAA</span><span style="color: #00AA00;">;</span><br />
<span style="color: #00AA00;">&#125;</span><br />
<span style="color: #6666ff;">.vertical-list</span> <span style="color: #00AA00;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span> <span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span> <span style="color: #933;">230px</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">padding-bottom</span><span style="color: #00AA00;">:</span><span style="color: #933;">10px</span><span style="color: #00AA00;">;</span><br />
<span style="color: #00AA00;">&#125;</span><br />
<span style="color: #6666ff;">.vertical-list</span> <span style="color: #6666ff;">.label</span> <span style="color: #00AA00;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">padding-right</span><span style="color: #00AA00;">:</span> <span style="color: #933;">14px</span><span style="color: #00AA00;">;</span> <br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">left</span> !important<span style="color: #00AA00;">;</span> <br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">font-weight</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">bold</span><span style="color: #00AA00;">;</span><br />
<span style="color: #00AA00;">&#125;</span><br />
<span style="color: #6666ff;">.vertical-list</span> li <span style="color: #00AA00;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">vertical-align</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">middle</span><span style="color: #00AA00;">;</span> <br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">center</span><span style="color: #00AA00;">;</span> <br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">margin-top</span><span style="color: #00AA00;">:</span> <span style="color: #933;">5px</span><span style="color: #00AA00;">;</span> <br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #933;">5px</span> <span style="color: #933;">10px</span><span style="color: #00AA00;">;</span> <br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">min-height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">15px</span><span style="color: #00AA00;">;</span> <br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">border-bottom</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span> <span style="color: #993333;">dotted</span> <span style="color: #cc00cc;">#E0E0E0</span><span style="color: #00AA00;">;</span> <br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">border-right</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span> <span style="color: #993333;">dotted</span> <span style="color: #cc00cc;">#E0E0E0</span><span style="color: #00AA00;">;</span><br />
<span style="color: #00AA00;">&#125;</span></div></td></tr></tbody></table></div>
<p>jQuery magic to make it more table-y. This code basically extends the inner section (id = &#8220;scroller&#8221;) to the maximum width of the table columns (based on how many there are).  It then stretches the container to fit within the whole parent container that the scroll bar will go all the way across.  Finally, it loops through each column, and then uses a custom selector to find any cell heights that are above the minimum amount, and then updates all of the heights for those rows</p>
<p><strong>Edit:</strong> I made a change to how the heights are calculated. I realized that a taller height in a later row wouldn&#8217;t have it&#8217;s original height recognized. I replaced it with a dictionary based approach, where each row index stores the maximum height it encounters before applying the final row heights</p>
<div class="codecolorer-container javascript dawn" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />31<br />32<br />33<br />34<br />35<br />36<br />37<br />38<br />39<br /></div></td><td><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">$.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span>$.<span style="color: #660066;">expr</span><span style="color: #009900;">&#91;</span><span style="color: #3366CC;">':'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; height<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>a<span style="color: #339933;">,</span> i<span style="color: #339933;">,</span> m<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #006600; font-style: italic;">//Check to make sure it's :height(&gt;##) or :height(&lt;##)</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>m<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">3</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">||</span> <span style="color: #339933;">!</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/^(&lt;|&gt;)\d+$/</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span>m<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">3</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span> &nbsp;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">return</span> m<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">3</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">substr</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">===</span> <span style="color: #3366CC;">&quot;&gt;&quot;</span> <span style="color: #339933;">?</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $<span style="color: #009900;">&#40;</span>a<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">height</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&gt;</span> m<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">3</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">substr</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> $<span style="color: #009900;">&#40;</span>a<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">height</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&lt;</span> m<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">3</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">substr</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&#125;</span><br />
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<br />
$<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">var</span> scrollWidth <span style="color: #339933;">=</span> <span style="color: #CC0000;">230</span> <span style="color: #339933;">*</span> <span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.vertical-list-container&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">find</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.vertical-list&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">length</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#scroller&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">width</span><span style="color: #009900;">&#40;</span>scrollWidth<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<br />
&nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">var</span> tableContainerWidth <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.table-container&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">width</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.vertical-list-container&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">width</span><span style="color: #009900;">&#40;</span>tableContainerWidth <span style="color: #339933;">-</span> <span style="color: #CC0000;">232</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<br />
&nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">var</span> heights <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.vertical-list&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>x<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">find</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;li:height(&gt;15)&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>index<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">var</span> z <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">index</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">var</span> height <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">height</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>heights<span style="color: #009900;">&#91;</span>z<span style="color: #009900;">&#93;</span> <span style="color: #339933;">===</span> undefined<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; heights<span style="color: #009900;">&#91;</span>z<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> height<span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>heights<span style="color: #009900;">&#91;</span>z<span style="color: #009900;">&#93;</span> <span style="color: #339933;">&lt;</span> height<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; heights<span style="color: #009900;">&#91;</span>z<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> height<span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<br />
&nbsp; &nbsp; $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.vertical-list&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>y<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> key <span style="color: #000066; font-weight: bold;">in</span> heights<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>heights.<span style="color: #660066;">hasOwnProperty</span><span style="color: #009900;">&#40;</span>key<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">find</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;li:eq(&quot;</span> <span style="color: #339933;">+</span> key <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;)&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">height</span><span style="color: #009900;">&#40;</span>heights<span style="color: #009900;">&#91;</span>key<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></div></td></tr></tbody></table></div>
<p>Then finally, here&#8217;s the structure for the HTML code that displays the data</p>
<div class="codecolorer-container html4strict dawn" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br /></div></td><td><div class="html4strict codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;table-container&quot;</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/ul.html"><span style="color: #000000; font-weight: bold;">ul</span></a> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;vertical-list float-left&quot;</span>&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>&gt;</span>Row Header<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>&gt;</span>Row Header<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/ul.html"><span style="color: #000000; font-weight: bold;">ul</span></a>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;vertical-list-container&quot;</span>&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;scroller&quot;</span>&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/ul.html"><span style="color: #000000; font-weight: bold;">ul</span></a> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;vertical-list&quot;</span>&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>&gt;</span>Item 1, Field 1<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>&gt;</span>Item 1, Field 2<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/ul.html"><span style="color: #000000; font-weight: bold;">ul</span></a>&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/ul.html"><span style="color: #000000; font-weight: bold;">ul</span></a> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;vertical-list&quot;</span>&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>&gt;</span>Item 2, Field 1<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>&gt;</span>Item 2, Field 2<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/ul.html"><span style="color: #000000; font-weight: bold;">ul</span></a>&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a>&gt;</span></div></td></tr></tbody></table></div>
]]></content:encoded>
			<wfw:commentRss>http://deceptacle.com/2010/08/creating-a-vertically-oriented-table/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Double Rainbow Guy in Real Life</title>
		<link>http://deceptacle.com/2010/07/double-rainbow-guy-in-real-life/</link>
		<comments>http://deceptacle.com/2010/07/double-rainbow-guy-in-real-life/#comments</comments>
		<pubDate>Wed, 21 Jul 2010 16:36:34 +0000</pubDate>
		<dc:creator>Andrew Burgess</dc:creator>
				<category><![CDATA[Humor]]></category>
		<category><![CDATA[Videos]]></category>
		<category><![CDATA[college humor]]></category>
		<category><![CDATA[parody]]></category>

		<guid isPermaLink="false">http://208.43.81.117/~deceptac/?p=5</guid>
		<description><![CDATA[See more funny videos and funny pictures at CollegeHumor.]]></description>
			<content:encoded><![CDATA[<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="640" height="360" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="data" value="http://www.collegehumor.com/moogaloop/moogaloop.swf?clip_id=1938849&amp;fullscreen=1" /><param name="allowfullscreen" value="true" /><param name="wmode" value="transparent" /><param name="allowScriptAccess" value="always" /><param name="src" value="http://www.collegehumor.com/moogaloop/moogaloop.swf?clip_id=1938849&amp;fullscreen=1" /><embed type="application/x-shockwave-flash" width="640" height="360" src="http://www.collegehumor.com/moogaloop/moogaloop.swf?clip_id=1938849&amp;fullscreen=1" allowscriptaccess="always" wmode="transparent" allowfullscreen="true" data="http://www.collegehumor.com/moogaloop/moogaloop.swf?clip_id=1938849&amp;fullscreen=1"></embed></object></p>
<div style="padding: 5px 0; text-align: center; width: 640px;">See more <a href="http://www.collegehumor.com/videos">funny videos</a> and <a href="http://www.collegehumor.com/pictures">funny pictures</a> at <a href="http://www.collegehumor.com/">CollegeHumor</a>.</div>
]]></content:encoded>
			<wfw:commentRss>http://deceptacle.com/2010/07/double-rainbow-guy-in-real-life/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>BIG BANG BIG BOOM</title>
		<link>http://deceptacle.com/2010/07/big-bang-big-boom/</link>
		<comments>http://deceptacle.com/2010/07/big-bang-big-boom/#comments</comments>
		<pubDate>Mon, 12 Jul 2010 17:15:10 +0000</pubDate>
		<dc:creator>Andrew Burgess</dc:creator>
				<category><![CDATA[Videos]]></category>
		<category><![CDATA[animation]]></category>
		<category><![CDATA[stop motion]]></category>

		<guid isPermaLink="false">http://208.43.81.117/~deceptac/?p=10</guid>
		<description><![CDATA[This video is absolutely mind boggling. I&#8217;m sure you will enjoy this BIG BANG BIG BOOM &#8211; the new wall-painted animation by BLU from blu on Vimeo.]]></description>
			<content:encoded><![CDATA[<p>This video is absolutely mind boggling. I&#8217;m sure you will enjoy this</p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="600" height="450" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://vimeo.com/moogaloop.swf?clip_id=13085676&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" /><embed type="application/x-shockwave-flash" width="600" height="450" src="http://vimeo.com/moogaloop.swf?clip_id=13085676&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" allowscriptaccess="always" allowfullscreen="true"></embed></object></p>
<p><a href="http://vimeo.com/13085676">BIG BANG BIG BOOM &#8211; the new wall-painted animation by BLU</a> from <a href="http://vimeo.com/blu">blu</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://deceptacle.com/2010/07/big-bang-big-boom/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Concealed Weapons</title>
		<link>http://deceptacle.com/2010/07/concealed-weapons/</link>
		<comments>http://deceptacle.com/2010/07/concealed-weapons/#comments</comments>
		<pubDate>Mon, 12 Jul 2010 14:05:41 +0000</pubDate>
		<dc:creator>Andrew Burgess</dc:creator>
				<category><![CDATA[Humor]]></category>
		<category><![CDATA[Images]]></category>
		<category><![CDATA[clever]]></category>
		<category><![CDATA[trolling]]></category>
		<category><![CDATA[weapons]]></category>

		<guid isPermaLink="false">http://208.43.81.117/~deceptac/?p=14</guid>
		<description><![CDATA[]]></description>
			<content:encoded><![CDATA[<div id="attachment_15" class="wp-caption alignnone" style="width: 550px"><a rel="attachment wp-att-15" href="http://208.43.81.117/~deceptac/2010/07/concealed-weapons/doodle/"><img class="size-full wp-image-15" title="Conceal Weapons" src="http://208.43.81.117/~deceptac/wp-content/uploads/2010/08/doodle.png" alt="" width="540" height="2468" /></a><p class="wp-caption-text">Trying to sell some cleverly concealed weapons</p></div>
]]></content:encoded>
			<wfw:commentRss>http://deceptacle.com/2010/07/concealed-weapons/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Becoming an Adult</title>
		<link>http://deceptacle.com/2010/07/becoming-an-adult/</link>
		<comments>http://deceptacle.com/2010/07/becoming-an-adult/#comments</comments>
		<pubDate>Sat, 10 Jul 2010 19:12:17 +0000</pubDate>
		<dc:creator>Andrew Burgess</dc:creator>
				<category><![CDATA[Humor]]></category>
		<category><![CDATA[Images]]></category>

		<guid isPermaLink="false">http://208.43.81.117/~deceptac/?p=20</guid>
		<description><![CDATA[]]></description>
			<content:encoded><![CDATA[<div class="wp-caption alignnone" style="width: 560px"><a href="http://www.amazingsuperpowers.com/comics/2010-07-08-Have-a-Cigar.png"><img class="  " title="Becoming an Adult" src="http://www.amazingsuperpowers.com/comics/2010-07-08-Have-a-Cigar.png" alt="" width="550" height="223" /></a><p class="wp-caption-text">Have a cigar</p></div>
]]></content:encoded>
			<wfw:commentRss>http://deceptacle.com/2010/07/becoming-an-adult/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>BP Spills Coffee</title>
		<link>http://deceptacle.com/2010/06/bp-spills-coffee/</link>
		<comments>http://deceptacle.com/2010/06/bp-spills-coffee/#comments</comments>
		<pubDate>Thu, 10 Jun 2010 18:55:22 +0000</pubDate>
		<dc:creator>Andrew Burgess</dc:creator>
				<category><![CDATA[Humor]]></category>
		<category><![CDATA[Videos]]></category>
		<category><![CDATA[parody]]></category>

		<guid isPermaLink="false">http://208.43.81.117/~deceptac/?p=24</guid>
		<description><![CDATA[Jay shared this, and I thought it was amazing. Check it out]]></description>
			<content:encoded><![CDATA[<p>Jay shared this, and I thought it was amazing. Check it out</p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="640" height="385" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/2AAa0gd7ClM&amp;hl=en_US&amp;fs=1&amp;" /><param name="allowfullscreen" value="true" /><embed type="application/x-shockwave-flash" width="640" height="385" src="http://www.youtube.com/v/2AAa0gd7ClM&amp;hl=en_US&amp;fs=1&amp;" allowscriptaccess="always" allowfullscreen="true"></embed></object></p>
]]></content:encoded>
			<wfw:commentRss>http://deceptacle.com/2010/06/bp-spills-coffee/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
