<?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"
	>

<channel>
	<title>boedesign - ottawa based web developer and designer</title>
	<atom:link href="http://boedesign.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://boedesign.com</link>
	<description>Just another WordPress weblog</description>
	<pubDate>Sun, 24 Aug 2008 15:25:34 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.5.1</generator>
	<language>en</language>
			<item>
		<title>Presenting: My Saturday Afternoon</title>
		<link>http://boedesign.com/2008/08/24/presenting-my-saturday-afternoon/</link>
		<comments>http://boedesign.com/2008/08/24/presenting-my-saturday-afternoon/#comments</comments>
		<pubDate>Sun, 24 Aug 2008 15:23:20 +0000</pubDate>
		<dc:creator>Jordan Boesch</dc:creator>
		
		<category><![CDATA[index]]></category>

		<guid isPermaLink="false">http://boedesign.com/?p=36</guid>
		<description><![CDATA[I wasn&#8217;t doing very much yesterday afternoon - went to the gym - that&#8217;s about it. After I came home I remembered I had this idea a little while back to do a small widget for estimating taxi cab fares. 

&#160;
So I threw some images together, got the google map integrated, bought the domain and [...]]]></description>
			<content:encoded><![CDATA[<p>
I wasn&#8217;t doing very much yesterday afternoon - went to the gym - that&#8217;s about it. After I came home I remembered I had this idea a little while back to do a small widget for estimating taxi cab fares. </p>
<p><span id="more-36"></span></p>
<p>&nbsp;</p>
<p>So I threw some images together, got the google map integrated, bought the domain and voila! <a href="http://taxime.ca">taxime.ca</a> was born.
</p>
<p>&nbsp;</p>
<p>
Go and give it a shot.  Just enter your address in the following format <em>123 Fake St, Ottawa, ON</em> and you should be fine.  I have a few things that I still want to do with it: make it work with the iPhone/mobile devices and have a printable stylesheet.
</p>
<p>&nbsp;</p>
]]></content:encoded>
			<wfw:commentRss>http://boedesign.com/2008/08/24/presenting-my-saturday-afternoon/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Missed flight. Boingo WiFi hack saved the day.</title>
		<link>http://boedesign.com/2008/07/18/missed-flight-boingo-wifi-hack-saved-the-day/</link>
		<comments>http://boedesign.com/2008/07/18/missed-flight-boingo-wifi-hack-saved-the-day/#comments</comments>
		<pubDate>Fri, 18 Jul 2008 21:06:33 +0000</pubDate>
		<dc:creator>Jordan Boesch</dc:creator>
		
		<category><![CDATA[index]]></category>

		<guid isPermaLink="false">http://boedesign.com/?p=35</guid>
		<description><![CDATA[I&#8217;m flying home today to Regina, SK for a family reunion and what not.  I caught the bus to the airport this morning and arrived 25 minues before my flight was leaving.  I went to check in and the robotic man said &#8220;We&#8217;re sorry sir, you cannot get on that flight anymore.  [...]]]></description>
			<content:encoded><![CDATA[<p>I&#8217;m flying home today to Regina, SK for a family reunion and what not.  I caught the bus to the airport this morning and arrived 25 minues before my flight was leaving.  I went to check in and the robotic man said &#8220;We&#8217;re sorry sir, you cannot get on that flight anymore.  You&#8217;ll have to find a different one&#8221;. <span id="more-35"></span> I was in shock.  I quickly said &#8220;We&#8217;ll can&#8217;t I just get on? I don&#8217;t have any baggage to check.&#8221;  He replied with more &#8220;Sir&#8217;s&#8221; and big words like &#8220;system lockdown&#8221; and&#8230; &#8220;airplane&#8221;.  I then had to re-schedule my flight.  Fuck.</p>
<p>&nbsp;</p>
<p>
I had to talk to the ticket lady and she said the best way for me to get home was to take a flight from Ottawa to Toronto, Toronto to Winnipeg then Winnipeg to Regina.  So there I am sitting in Ottawa airport bored out of my mind.  I decided to pay for some interwebs and surf the digg waves.  I got on there and just as my time was running out I decided to search how I can get on a Boingo network for free.
</p>
<p>&nbsp;</p>
<p>
I found <a href="http://www.airportwifiguide.com/for-free-airport-wifisee-this-boingoiphone-free-wifi-hack-for-laptop-users/">this site</a> that talked about switching the user agent to make Boingo think you&#8217;re using an iPhone.  iPhone users get a 15 minute free trial.  So I did that and got my free 15 minute trial but being the webby addict that I am, I needed to shoot up with more - I needed more of a fix.
</p>
<p>&nbsp;</p>
<p>
Here&#8217;s what you do to get unlimited interwebs:</p>
<ul>
<li>Go through the steps <a href="http://www.airportwifiguide.com/for-free-airport-wifisee-this-boingoiphone-free-wifi-hack-for-laptop-users/" target="_blank">here</a> to get the user agent switcher for firefox.</li>
<li>When your trial is up clear your cookies</li>
<li>Go to Start > Run and type &#8220;cmd&#8221;.  This will bring up the command prompt.</li>
<li>Type ipconfig /release</li>
<li>Now type ipconfig /renew</li>
<li>Get back into your firefox browser with the user agent set to an iPhone and browse away!</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://boedesign.com/2008/07/18/missed-flight-boingo-wifi-hack-saved-the-day/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Thickbox 3.0 Image Gallery - Duplication Fix</title>
		<link>http://boedesign.com/2008/07/08/thickbox-30-image-gallery-duplication-fix/</link>
		<comments>http://boedesign.com/2008/07/08/thickbox-30-image-gallery-duplication-fix/#comments</comments>
		<pubDate>Wed, 09 Jul 2008 02:27:34 +0000</pubDate>
		<dc:creator>Jordan Boesch</dc:creator>
		
		<category><![CDATA[index]]></category>

		<guid isPermaLink="false">http://boedesign.com/?p=34</guid>
		<description><![CDATA[At work today we had an issue with Thickbox for jQuery displaying "Image 2 of 3" when it was actually "Image 1 of 3".  Let me describe the scenario we had it set up in.

&#160;

We had a thumbnail with a thickbox link on it with a hyperlink below it linking to the same image. [...]]]></description>
			<content:encoded><![CDATA[<p>At work today we had an issue with <a href="http://jquery.com/demo/thickbox/" target="_blank">Thickbox for jQuery</a> displaying "Image 2 of 3" when it was actually "Image 1 of 3".  Let me describe the scenario we had it set up in.</p>
<p><span id="more-34"></span></p>
<p>&nbsp;</p>
<p>
We had a thumbnail with a thickbox link on it with a hyperlink below it linking to the same image.  So you could click either the thumbnail or the text to open that image.  The problem was that Thickbox didn't recognize those same links as the same image, so it stored it twice and uses the image number of the last object stored in the array - so if you had 3 of the same links to one image, it would say "Image 3 of X" when you would click on the first image.  I thought about it a little bit when I got home and within about 3.2234234 seconds, I figured it out.
</p>
<p>&nbsp;</p>
<p>
Here is the fix for it. Open up thickbox.js or and go to line 79 where you will see
</p>
<p>&nbsp;</p>
<p><div class="igBar"><span id="ljavascript-3"><a href="#" onclick="javascript:showPlainTxt('javascript-3'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">JAVASCRIPT:</span>
<div id="javascript-3">
<div class="javascript">TB_TempArray = $<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">"a[@rel="</span>+imageGroup+<span style="color: #3366CC;">"]"</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">get</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;</div>
</div>
</div>
<p>
</p>
<p>&nbsp;</p>
<p>
Immediately after that add
</p>
<p>&nbsp;</p>
<p><div class="igBar"><span id="ljavascript-4"><a href="#" onclick="javascript:showPlainTxt('javascript-4'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">JAVASCRIPT:</span>
<div id="javascript-4">
<div class="javascript"><span style="color: #00ff00; font-weight: bold;">var</span> TB_HrefArray = <span style="color: #00ff00; font-weight: bold;">new</span> Array<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;<br />
<span style="color: #00ff00; font-weight: bold;">var</span> TB_ObjArray = <span style="color: #00ff00; font-weight: bold;">new</span> Array<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
$<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">"a[@rel="</span>+imageGroup+<span style="color: #3366CC;">"]"</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">each</span><span style="color: #66cc66;">&#40;</span><span style="color: #00ff00; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>i<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #000099; font-weight: bold;">if</span><span style="color: #66cc66;">&#40;</span>jQuery.<span style="color: #006600;">inArray</span><span style="color: #66cc66;">&#40;</span>TB_TempArray<span style="color: #66cc66;">&#91;</span>i<span style="color: #66cc66;">&#93;</span>.<span style="color: #006600;">href</span>,TB_HrefArray<span style="color: #66cc66;">&#41;</span> == -<span style="color: #CC0000;">1</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; TB_ObjArray.<span style="color: #006600;">push</span><span style="color: #66cc66;">&#40;</span>TB_TempArray<span style="color: #66cc66;">&#91;</span>i<span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#41;</span>;<br />
&nbsp; &nbsp; &nbsp; &nbsp; TB_HrefArray.<span style="color: #006600;">push</span><span style="color: #66cc66;">&#40;</span>TB_TempArray<span style="color: #66cc66;">&#91;</span>i<span style="color: #66cc66;">&#93;</span>.<span style="color: #006600;">href</span><span style="color: #66cc66;">&#41;</span>;<br />
&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span><br />
<span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;</p>
<p>TB_TempArray = TB_ObjArray;</p></div>
</div>
</div>
<p></p>
]]></content:encoded>
			<wfw:commentRss>http://boedesign.com/2008/07/08/thickbox-30-image-gallery-duplication-fix/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Database CSV Class</title>
		<link>http://boedesign.com/2008/07/02/database-csv/</link>
		<comments>http://boedesign.com/2008/07/02/database-csv/#comments</comments>
		<pubDate>Thu, 03 Jul 2008 01:24:00 +0000</pubDate>
		<dc:creator>Jordan Boesch</dc:creator>
		
		<category><![CDATA[index]]></category>

		<category><![CDATA[lab]]></category>

		<guid isPermaLink="false">http://boedesign.com/?p=33</guid>
		<description><![CDATA[I was getting kind of frustrated with some of the lack of Database CSV scripts I was finding.  None of them really did what I wanted - of course not every script out there is suited for your own personal needs.  I thought I would whip something up that's pretty flexible when thrown [...]]]></description>
			<content:encoded><![CDATA[<p>I was getting kind of frustrated with some of the lack of Database CSV scripts I was finding.  None of them really did what I wanted - of course not every script out there is suited for your own personal needs.  I thought I would whip something up that's pretty flexible when thrown into various situations.</p>
<p><span id="more-33"></span></p>
<p>&nbsp;</p>
<p>
This class is meant to extract data from a database and put it into a .csv document.  With this class you can set to be prompted to download the csv, write the csv to a folder on your server or both.  With different options and settings to choose from, this is a recipe for one happy export.
</p>
<p>&nbsp;</p>
<p>Any suggestions/comments/improvements are welcome. </p>
<p>&nbsp;</p>
<p><a class="linkbutton" href="/download.php?file=database_csv">Download It! (v1.0)</a> </p>
<p>&nbsp;</p>
<h3>Usage:</h3>
<h4>Example 1</h4>
<p>&nbsp;</p>
<div class="igBar"><span id="lphp-9"><a href="#" onclick="javascript:showPlainTxt('php-9'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">PHP:</span>
<div id="php-9">
<div class="php"><span style="color:#fff;">require</span><span style="color:#009900; font-weight:bold;">&#40;</span><span style="color:#FF0000;">'database_csv.class.php'</span><span style="color:#009900; font-weight:bold;">&#41;</span>;<br />
<span style="color:#00ccFF;">$c</span> = <span style="color:#ffff66; font-weight:bold;">new</span> Database_CSV<span style="color:#009900; font-weight:bold;">&#40;</span><span style="color:#009900; font-weight:bold;">&#41;</span>;<br />
<span style="color:#00ccFF;">$c</span>-&gt;<span style="color:#009900;">sqlTable</span><span style="color:#009900; font-weight:bold;">&#40;</span><span style="color:#FF0000;">'articles'</span><span style="color:#009900; font-weight:bold;">&#41;</span>;<br />
<span style="color:#00ccFF;">$c</span>-&gt;<span style="color:#009900;">fileName</span><span style="color:#009900; font-weight:bold;">&#40;</span><span style="color:#FF0000;">'articles.csv'</span><span style="color:#009900; font-weight:bold;">&#41;</span>;<br />
<span style="color:#00ccFF;">$c</span>-&gt;<span style="color:#009900;">export</span><span style="color:#009900; font-weight:bold;">&#40;</span><span style="color:#009900; font-weight:bold;">&#41;</span>; <span style="color:#FF9933; font-style:italic;">// accepts 'both', 'server' and 'download' (defaults to download) </span></div>
</div>
</div>
<p></p>
<p>&nbsp;</p>
<h4>Example 2</h4>
<p>&nbsp;</p>
<div class="igBar"><span id="lphp-10"><a href="#" onclick="javascript:showPlainTxt('php-10'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">PHP:</span>
<div id="php-10">
<div class="php"><span style="color:#fff;">require</span><span style="color:#009900; font-weight:bold;">&#40;</span><span style="color:#FF0000;">'database_csv.class.php'</span><span style="color:#009900; font-weight:bold;">&#41;</span>;<br />
<span style="color:#00ccFF;">$c</span> = <span style="color:#ffff66; font-weight:bold;">new</span> Database_CSV<span style="color:#009900; font-weight:bold;">&#40;</span><span style="color:#009900; font-weight:bold;">&#41;</span>;<br />
<span style="color:#00ccFF;">$c</span>-&gt;<span style="color:#009900;">sqlTable</span><span style="color:#009900; font-weight:bold;">&#40;</span><span style="color:#FF0000;">'articles'</span><span style="color:#009900; font-weight:bold;">&#41;</span>; <span style="color:#FF9933; font-style:italic;">// the table name OR select sql statement</span><br />
<span style="color:#00ccFF;">$c</span>-&gt;<span style="color:#009900;">fileName</span><span style="color:#009900; font-weight:bold;">&#40;</span><span style="color:#FF0000;">'myfile.csv'</span><span style="color:#009900; font-weight:bold;">&#41;</span>;<br />
<span style="color:#00ccFF;">$c</span>-&gt;<span style="color:#009900;">humanizeFields</span><span style="color:#009900; font-weight:bold;">&#40;</span><span style="color:#ffff66; font-weight:bold;">true</span><span style="color:#009900; font-weight:bold;">&#41;</span>; <span style="color:#FF9933; font-style:italic;">// optional (defaults to false)</span><br />
<span style="color:#00ccFF;">$c</span>-&gt;<span style="color:#009900;">export</span><span style="color:#009900; font-weight:bold;">&#40;</span><span style="color:#FF0000;">'both'</span><span style="color:#009900; font-weight:bold;">&#41;</span>; <span style="color:#FF9933; font-style:italic;">// accepts 'both', 'server' and 'download' (defaults to download) </span></div>
</div>
</div>
<p></p>
<p>&nbsp;</p>
<h4>Example 3</h4>
<p>&nbsp;</p>
<div class="igBar"><span id="lphp-11"><a href="#" onclick="javascript:showPlainTxt('php-11'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">PHP:</span>
<div id="php-11">
<div class="php"><span style="color:#fff;">require</span><span style="color:#009900; font-weight:bold;">&#40;</span><span style="color:#FF0000;">'database_csv.class.php'</span><span style="color:#009900; font-weight:bold;">&#41;</span>;<br />
<span style="color:#00ccFF;">$c</span> = <span style="color:#ffff66; font-weight:bold;">new</span> Database_CSV<span style="color:#009900; font-weight:bold;">&#40;</span><span style="color:#009900; font-weight:bold;">&#41;</span>;<br />
<span style="color:#00ccFF;">$c</span>-&gt;<span style="color:#009900;">sqlTable</span><span style="color:#009900; font-weight:bold;">&#40;</span><span style="color:#FF0000;">'articles'</span><span style="color:#009900; font-weight:bold;">&#41;</span>; <span style="color:#FF9933; font-style:italic;">// the table name OR select sql statement</span><br />
<span style="color:#00ccFF;">$c</span>-&gt;<span style="color:#009900;">fileName</span><span style="color:#009900; font-weight:bold;">&#40;</span><span style="color:#FF0000;">'myfile.csv'</span><span style="color:#009900; font-weight:bold;">&#41;</span>;<br />
<span style="color:#00ccFF;">$c</span>-&gt;<span style="color:#009900;">saveTo</span><span style="color:#009900; font-weight:bold;">&#40;</span><span style="color:#FF0000;">'backups/test/another/teasd'</span><span style="color:#009900; font-weight:bold;">&#41;</span>; <span style="color:#FF9933; font-style:italic;">// optional (where you want the .csv to be put on your server)</span><br />
<span style="color:#00ccFF;">$c</span>-&gt;<span style="color:#009900;">export</span><span style="color:#009900; font-weight:bold;">&#40;</span><span style="color:#FF0000;">'server'</span><span style="color:#009900; font-weight:bold;">&#41;</span>; <span style="color:#FF9933; font-style:italic;">// accepts 'both', 'server' and 'download' (defaults to download) </span></div>
</div>
</div>
<p></p>
<p>&nbsp;</p>
<h4>Example 4</h4>
<p>&nbsp;</p>
<div class="igBar"><span id="lphp-12"><a href="#" onclick="javascript:showPlainTxt('php-12'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">PHP:</span>
<div id="php-12">
<div class="php"><span style="color:#fff;">require</span><span style="color:#009900; font-weight:bold;">&#40;</span><span style="color:#FF0000;">'database_csv.class.php'</span><span style="color:#009900; font-weight:bold;">&#41;</span>;<br />
<span style="color:#00ccFF;">$c</span> = <span style="color:#ffff66; font-weight:bold;">new</span> Database_CSV<span style="color:#009900; font-weight:bold;">&#40;</span><span style="color:#009900; font-weight:bold;">&#41;</span>;<br />
<span style="color:#00ccFF;">$c</span>-&gt;<span style="color:#009900;">sqlTable</span><span style="color:#009900; font-weight:bold;">&#40;</span><span style="color:#FF0000;">'SELECT * FROM articles LEFT JOIN article_tags ON article.id = article_tags.art_id'</span><span style="color:#009900; font-weight:bold;">&#41;</span>; <span style="color:#FF9933; font-style:italic;">// the table name OR select sql statement</span><br />
<span style="color:#00ccFF;">$c</span>-&gt;<span style="color:#009900;">fileName</span><span style="color:#009900; font-weight:bold;">&#40;</span><span style="color:#FF0000;">'myfile.csv'</span><span style="color:#009900; font-weight:bold;">&#41;</span>;<br />
<span style="color:#00ccFF;">$c</span>-&gt;<span style="color:#009900;">ignoreFields</span><span style="color:#009900; font-weight:bold;">&#40;</span><a href="http://www.php.net/array"><span style="color:#006699;">array</span></a><span style="color:#009900; font-weight:bold;">&#40;</span><span style="color:#FF0000;">'id'</span><span style="color:#009900; font-weight:bold;">&#41;</span><span style="color:#009900; font-weight:bold;">&#41;</span>; <span style="color:#FF9933; font-style:italic;">// optional</span><br />
<span style="color:#00ccFF;">$c</span>-&gt;<span style="color:#009900;">renameFields</span><span style="color:#009900; font-weight:bold;">&#40;</span><a href="http://www.php.net/array"><span style="color:#006699;">array</span></a><span style="color:#009900; font-weight:bold;">&#40;</span><span style="color:#FF0000;">'title'</span> =&gt; <span style="color:#FF0000;">'The Title'</span><span style="color:#009900; font-weight:bold;">&#41;</span><span style="color:#009900; font-weight:bold;">&#41;</span>; <span style="color:#FF9933; font-style:italic;">// optional</span><br />
<span style="color:#00ccFF;">$c</span>-&gt;<span style="color:#009900;">humanizeFields</span><span style="color:#009900; font-weight:bold;">&#40;</span><span style="color:#ffff66; font-weight:bold;">true</span><span style="color:#009900; font-weight:bold;">&#41;</span>; <span style="color:#FF9933; font-style:italic;">// optional (defaults to false)</span><br />
<span style="color:#00ccFF;">$c</span>-&gt;<span style="color:#009900;">errors</span><span style="color:#009900; font-weight:bold;">&#40;</span><span style="color:#ffff66; font-weight:bold;">true</span><span style="color:#009900; font-weight:bold;">&#41;</span>; <span style="color:#FF9933; font-style:italic;">// optional (defaults to false)</span><br />
<span style="color:#00ccFF;">$c</span>-&gt;<span style="color:#009900;">export</span><span style="color:#009900; font-weight:bold;">&#40;</span><span style="color:#009900; font-weight:bold;">&#41;</span>; <span style="color:#FF9933; font-style:italic;">// accepts 'both', 'server' and 'download' (defaults to download) </span></div>
</div>
</div>
<p></p>
<p>&nbsp;</p>
<h3>Descriptions</h3>
<ul>
<li><strong>sqlTable</strong>: (String) Accepts an SQL SELECT statement or a table name. This is how we get the results for the .csv file. [required]</li>
<li><strong>fileName</strong>: (String) Specify what you want the output .csv to be named.  If this is not set, it will default to "export.csv". [optional]</li>
<li><strong>ignoreFields</strong>: (Array) If you don't want certain fields to show up the .csv document you can set them to be ignored. Example array('id','another_field') [optional]</li>
<li><strong>renameFields</strong>: (Array) If you would like to not have the column's show up as their field name in the database you can change it to show up as something else. Example array('recipe_name' => 'Super Special Recipe Names') [optional]</li>
<li><strong>humanizeFields</strong>: (Bool) If you have this set to true, fields like "recipe_name" will show up as "Recipe Name" and "grocery_list" will show up as "Grocery List".  If you have specified fields to be renamed with the renameFields function they will not be over-ridden. Defaults to false. [optional]</li>
<li><strong>errors</strong>: (Bool) If set to true and you made a boo boo, it will abort the .csv file creation and tell you the exact errors. Defaults to false. [optional]</li>
<li><strong>saveTo</strong>: (String) If you have export('server') or export('both') set, then you can specify where you want the .csv file to go on the server. If the folder is not there, it will attempt to create it. By default it will put the .csv in the same directory the script is run in. [optional]</li>
<li><strong>export</strong>: (String) This function has 3 different options: 'download', 'server' and 'both'.  Setting it to 'download' will prompt you to download the .csv file.  Setting it to 'server' will just write the .csv to a place on the server.  Setting it to 'both' will do exactly that. Defaults to 'download'. [required]</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://boedesign.com/2008/07/02/database-csv/feed/</wfw:commentRss>
		</item>
		<item>
		<title>imageTick for jQuery</title>
		<link>http://boedesign.com/2008/06/08/imagetick-for-jquery/</link>
		<comments>http://boedesign.com/2008/06/08/imagetick-for-jquery/#comments</comments>
		<pubDate>Mon, 09 Jun 2008 01:07:49 +0000</pubDate>
		<dc:creator>Jordan Boesch</dc:creator>
		
		<category><![CDATA[index]]></category>

		<category><![CDATA[lab]]></category>

		<guid isPermaLink="false">http://boedesign.com/?p=31</guid>
		<description><![CDATA[It's Sunday afternoon and it is probably the hottest day Ottawa has been hit with so far. So I went out to The Bay, bought an air conditioner, sat on my computer and hacked away. I decided to make a small jQuery plugin that provides  an unobtrusive approach to using images as checkboxes and [...]]]></description>
			<content:encoded><![CDATA[<p>It's Sunday afternoon and it is probably the hottest day Ottawa has been hit with so far. So I went out to The Bay, bought an air conditioner, sat on my computer and hacked away. I decided to make a small jQuery plugin that provides  an unobtrusive approach to using images as checkboxes and radio buttons.  I had seen a few out there that just take care of the checkboxes and that don't work at all with labels. I figured that I can whip something up that might help a lot of people out.  The script figures out whether it's a checkbox or a radio button - you just have to provide some styling info. </p>
<p><span id="more-31"></span><br/></p>
<p>
If the user has Javascript turned off a 100 gig virus will be uploaded to their network, their cars gas tank will fill up with salt and the sky will fall on them... Ok not really, it will just show the regular inputs.
</p>
<p>&nbsp;</p>
<p><a class="linkbutton" href="/download.php?file=imagetick">Download It! (v1.0)</a> </p>
<p><a class="demobutton" href="/demos/imagetick/">Demo It!</a></p>
<p>&nbsp;</p>
<p><strong>Usage</strong></p>
<p>&nbsp;</p>
<p>The chunk of javascript below goes in the head of your document. </p>
<p>&nbsp;</p>
<div class="igBar"><span id="ljavascript-15"><a href="#" onclick="javascript:showPlainTxt('javascript-15'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">JAVASCRIPT:</span>
<div id="javascript-15">
<div class="javascript">&lt;script type=<span style="color: #3366CC;">"text/javascript"</span> src=<span style="color: #3366CC;">"js/jquery.js"</span>&gt;&lt;/script&gt; <br />
&lt;script type=<span style="color: #3366CC;">"text/javascript"</span> src=<span style="color: #3366CC;">"js/imagetick.js"</span>&gt;&lt;/script&gt;<br />
&lt;script type=<span style="color: #3366CC;">"text/javascript"</span>&gt;<br />
$<span style="color: #66cc66;">&#40;</span>document<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">ready</span><span style="color: #66cc66;">&#40;</span><span style="color: #00ff00; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; $<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">"input[name='favlang']"</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">imageTick</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#123;</span> <span style="color: #009900; font-style: italic;">// the selector can be a class as well, target your radios or checkboxes</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; tick_image_path: <span style="color: #3366CC;">"images/radio.gif"</span>,&nbsp; <span style="color: #009900; font-style: italic;">// the image you want to use as a selected state of the radio/checkbox</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; no_tick_image_path: <span style="color: #3366CC;">"images/no_radio.gif"</span>, <span style="color: #009900; font-style: italic;">// image you want to use as a non selected state</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; image_tick_class: <span style="color: #3366CC;">"radios"</span> <span style="color: #009900; font-style: italic;">// the class you want to apply to all images that are dynamically created</span><br />
&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;<br />
<span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;<br />
&lt;/script&gt;</div>
</div>
</div>
<p>
<br/></p>
<h2>HTML</h2>
<p>Here's some HTML that goes with the example</p>
<p><br/></p>
<div class="igBar"><span id="lhtml-16"><a href="#" onclick="javascript:showPlainTxt('html-16'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">HTML:</span>
<div id="html-16">
<div class="html"><span style="color: #009900;"><a href="http://december.com/html/4/element/h2.html"><span style="color: #fff; font-weight: bold;">&lt;h2&gt;</span></a></span>Radio Buttons<span style="color: #009900;"><span style="color: #fff; font-weight: bold;">&lt;/h2&gt;</span></span><br />
<span style="color: #009900;"><a href="http://december.com/html/4/element/h4.html"><span style="color: #fff; font-weight: bold;">&lt;h4&gt;</span></a></span>Pick a language<span style="color: #009900;"><span style="color: #fff; font-weight: bold;">&lt;/h4&gt;</span></span><br />
<span style="color: #009900;"><a href="http://december.com/html/4/element/ul.html"><span style="color: #fff; font-weight: bold;">&lt;ul&gt;</span></a></span><br />
&nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/li.html"><span style="color: #fff; font-weight: bold;">&lt;li&gt;</span></a></span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/input.html"><span style="color: #fff; font-weight: bold;">&lt;input</span></a> <span style="color: #006699;">type</span>=<span style="color: #ff0000;">"radio"</span> <span style="color: #006699;">value</span>=<span style="color: #ff0000;">"php"</span> <span style="color: #006699;">id</span>=<span style="color: #ff0000;">"php"</span> <span style="color: #006699;">name</span>=<span style="color: #ff0000;">"favlang"</span> /<span style="color: #fff; font-weight: bold;">&gt;</span></a></span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/label.html"><span style="color: #fff; font-weight: bold;">&lt;label</span></a> <span style="color: #006699;">for</span>=<span style="color: #ff0000;">"php"</span><span style="color: #fff; font-weight: bold;">&gt;</span></a></span>PHP<span style="color: #009900;"><span style="color: #fff; font-weight: bold;">&lt;/label&gt;</span></span><br />
&nbsp; &nbsp; <span style="color: #009900;"><span style="color: #fff; font-weight: bold;">&lt;/li&gt;</span></span><br />
&nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/li.html"><span style="color: #fff; font-weight: bold;">&lt;li&gt;</span></a></span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/input.html"><span style="color: #fff; font-weight: bold;">&lt;input</span></a> <span style="color: #006699;">type</span>=<span style="color: #ff0000;">"radio"</span> <span style="color: #006699;">id</span>=<span style="color: #ff0000;">"javascript"</span> <span style="color: #006699;">value</span>=<span style="color: #ff0000;">"javascript"</span> <span style="color: #006699;">name</span>=<span style="color: #ff0000;">"favlang"</span> <span style="color: #006699;">checked</span>=<span style="color: #ff0000;">"checked"</span> /<span style="color: #fff; font-weight: bold;">&gt;</span></a></span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/label.html"><span style="color: #fff; font-weight: bold;">&lt;label</span></a> <span style="color: #006699;">for</span>=<span style="color: #ff0000;">"javascript"</span><span style="color: #fff; font-weight: bold;">&gt;</span></a></span>Javascript<span style="color: #009900;"><span style="color: #fff; font-weight: bold;">&lt;/label&gt;</span></span><br />
&nbsp; &nbsp; <span style="color: #009900;"><span style="color: #fff; font-weight: bold;">&lt;/li&gt;</span></span><br />
&nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/li.html"><span style="color: #fff; font-weight: bold;">&lt;li&gt;</span></a></span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/input.html"><span style="color: #fff; font-weight: bold;">&lt;input</span></a> <span style="color: #006699;">type</span>=<span style="color: #ff0000;">"radio"</span> <span style="color: #006699;">id</span>=<span style="color: #ff0000;">"html"</span> <span style="color: #006699;">value</span>=<span style="color: #ff0000;">"html"</span> <span style="color: #006699;">name</span>=<span style="color: #ff0000;">"favlang"</span> /<span style="color: #fff; font-weight: bold;">&gt;</span></a></span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/label.html"><span style="color: #fff; font-weight: bold;">&lt;label</span></a> <span style="color: #006699;">for</span>=<span style="color: #ff0000;">"html"</span><span style="color: #fff; font-weight: bold;">&gt;</span></a></span>HTML<span style="color: #009900;"><span style="color: #fff; font-weight: bold;">&lt;/label&gt;</span></span><br />
&nbsp; &nbsp; <span style="color: #009900;"><span style="color: #fff; font-weight: bold;">&lt;/li&gt;</span></span><br />
&nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/li.html"><span style="color: #fff; font-weight: bold;">&lt;li&gt;</span></a></span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/input.html"><span style="color: #fff; font-weight: bold;">&lt;input</span></a> <span style="color: #006699;">type</span>=<span style="color: #ff0000;">"radio"</span> <span style="color: #006699;">id</span>=<span style="color: #ff0000;">"sql"</span> <span style="color: #006699;">value</span>=<span style="color: #ff0000;">"sql"</span> <span style="color: #006699;">name</span>=<span style="color: #ff0000;">"favlang"</span> /<span style="color: #fff; font-weight: bold;">&gt;</span></a></span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/label.html"><span style="color: #fff; font-weight: bold;">&lt;label</span></a> <span style="color: #006699;">for</span>=<span style="color: #ff0000;">"sql"</span><span style="color: #fff; font-weight: bold;">&gt;</span></a></span>SQL<span style="color: #009900;"><span style="color: #fff; font-weight: bold;">&lt;/label&gt;</span></span><br />
&nbsp; &nbsp; <span style="color: #009900;"><span style="color: #fff; font-weight: bold;">&lt;/li&gt;</span></span><br />
&nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/li.html"><span style="color: #fff; font-weight: bold;">&lt;li&gt;</span></a></span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/input.html"><span style="color: #fff; font-weight: bold;">&lt;input</span></a> <span style="color: #006699;">type</span>=<span style="color: #ff0000;">"radio"</span> <span style="color: #006699;">id</span>=<span style="color: #ff0000;">"japanese"</span> <span style="color: #006699;">value</span>=<span style="color: #ff0000;">"japanese"</span> <span style="color: #006699;">name</span>=<span style="color: #ff0000;">"favlang"</span> /<span style="color: #fff; font-weight: bold;">&gt;</span></a></span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/label.html"><span style="color: #fff; font-weight: bold;">&lt;label</span></a> <span style="color: #006699;">for</span>=<span style="color: #ff0000;">"japanese"</span><span style="color: #fff; font-weight: bold;">&gt;</span></a></span>Japanese<span style="color: #009900;"><span style="color: #fff; font-weight: bold;">&lt;/label&gt;</span></span><br />
&nbsp; &nbsp; <span style="color: #009900;"><span style="color: #fff; font-weight: bold;">&lt;/li&gt;</span></span><br />
<span style="color: #009900;"><span style="color: #fff; font-weight: bold;">&lt;/ul&gt;</span></span></div>
</div>
</div>
<p></p>
<p>&nbsp;</p>
]]></content:encoded>
			<wfw:commentRss>http://boedesign.com/2008/06/08/imagetick-for-jquery/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Universal Energy:  Scammers?</title>
		<link>http://boedesign.com/2008/05/31/universal-energy-scammers/</link>
		<comments>http://boedesign.com/2008/05/31/universal-energy-scammers/#comments</comments>
		<pubDate>Sat, 31 May 2008 21:09:51 +0000</pubDate>
		<dc:creator>Jordan Boesch</dc:creator>
		
		<category><![CDATA[index]]></category>

		<guid isPermaLink="false">http://boedesign.com/?p=29</guid>
		<description><![CDATA[I moved into my new apartment downtown March 30.  After a few days of settling in, a man who could barely speak English came to my door.  He wanted to see my hydro bill to see if I could get a discount.  I told him I just moved in and that I [...]]]></description>
			<content:encoded><![CDATA[<p>I moved into my new apartment downtown March 30.  After a few days of settling in, a man who could barely speak English came to my door.  He wanted to see my hydro bill to see if I could get a discount.  I told him I just moved in and that I hadn't received my hydro bill yet.  The man said he would call me later. No big deal, right?</p>
<p> <span id="more-29"></span></p>
<p>&nbsp;</p>
<p>
This afternoon, my phone rang. <em>"Hello, Is this Jordan?  Can I come and look at your hydro?"</em>.  I said sure, that's fine - whatever "look at your hydro" means, I don't know anything about that stuff.  He made his way into my place with a clipboard and some papers to sign.  He asked to see my hydro receipt so I gave it to him. He immediately started writing information down on this paper titled "APPLICATION FORM".  He didn't tell me who he worked for, he just said it was free to sign up and that you get better rates for your upcoming hydro bills.  He then turned to me and said <em>"Sign here"</em>.  I said <em>"Uhmmm, I want to look things over first before I sign anything. Can I read the pamphlet?"</em>.
</p>
<p>&nbsp;</p>
<p>
He gave me a pamphlet and said <em>"You just need to sign here, nothing is confirmed until we call you later and ask if you want to still go with us"</em>.  In my mind, when you sign something, it's a done deal.  So I told him that it was strange that he wanted me to sign something but that I still had to get confirmed. I asked him what the confirmation process is all about and what are the things they look for when confirming with consumers?  He answered me with some non-relevant statement and then emphasized again how it was free to sign up.  I told him AGAIN I wanted to look things over before signing a document.  He just kept saying how it was free and how I should trust him - this sounds like desperation to me. I told him my answer was no and that I want to look further into this but he was so persistent to get this application signed that it was like with every <em>no</em> I told him, it went in one ear and out the other.
</p>
<p>&nbsp;</p>
<p>
Andr&eacute;e (my girlfriend) was sitting on the couch and I looked over at her, she had a look of suspicion on her face.  She came up and stood beside me while he talked and said <em>"Right now, we feel pressured to sign something and we feel uncomfortable, this feels like a scam"</em>.  The man laughed hysterically. Once again, I told him I was feeling the pressure, which is definitely not a good thing when you're trying to sell someone something.
</p>
<p>&nbsp;</p>
<p>
I asked him <em>"Why is it such a big deal for me to sign this right this instant?  Why can't I have time to think about it?"</em>.  He replied with <em>"Well, it's not really convenient for me to come back out here again"</em>.  I then said abruptly, <em>"It's not about you, you are trying to sell something to me, the consumer.  You should be happy I'm even considering this, with all the pressure you've put on us within the past minutes. All I want to do is look over this for myself"</em>.
</p>
<p>&nbsp;</p>
<p>
Andr&eacute;e then asked to have my hydro bill back and to see the application form.  Good thing she took both of those back, because I googled <em>"Universal Energy"</em> and the second result was titled <a href="http://www.google.ca/search?hl=en&#038;q=universal+energy&#038;btnG=Google+Search&#038;meta=" target="_blank">"Universal Energy SCAM"</a>.  I started reading some of the things people were posting <a href="http://www.discovervancouver.com/forum/Universal-Energy-SCAM-t143460.html">here</a> about how they were scammed.  Even though this one guy didn't sign the application form, Universal Energy still enrolled him in their "partnership" with the other hydro company he was with. He had to fight to get out of the contract he didn't sign.  If you want to get out of their contract, they expect you pay a $500+ fee. Watch out.</p>
]]></content:encoded>
			<wfw:commentRss>http://boedesign.com/2008/05/31/universal-energy-scammers/feed/</wfw:commentRss>
		</item>
		<item>
		<title>How to sell in 2008 with Ray Fisher</title>
		<link>http://boedesign.com/2008/05/17/how-to-sell-in-2008-with-ray-fisher/</link>
		<comments>http://boedesign.com/2008/05/17/how-to-sell-in-2008-with-ray-fisher/#comments</comments>
		<pubDate>Sat, 17 May 2008 17:22:59 +0000</pubDate>
		<dc:creator>Jordan Boesch</dc:creator>
		
		<category><![CDATA[index]]></category>

		<guid isPermaLink="false">http://boedesign.com/?p=28</guid>
		<description><![CDATA[After work on Wednesday I made my way down to the Nepean Sailing Club to gain some insight into marketing and selling from a sales guru named Ray Fisher.  Andrew Moizer had emailed me about the event, which is organized by The Ottawa Network - in efforts to bring together people from all over [...]]]></description>
			<content:encoded><![CDATA[<p>After work on Wednesday I made my way down to the Nepean Sailing Club to gain some insight into marketing and selling from a sales guru named Ray Fisher.  <a href="http://www.embarrassmenttest.ca/">Andrew Moizer</a> had emailed me about the event, which is organized by <a href="http://www.theottawanetwork.com">The Ottawa Network</a> - in efforts to bring together people from all over Ottawa to do some networking and to listen to some valuable words of wisdom.  <span id="more-28"></span> To my surprise, the people that attended were not all marketers. There was a good mix of marketers, salesmen, software engineers and others.</p>
<p><br/></p>
<p>
Ray Fisher is the Director of Business Development for Semiconductor Insights in Europe, Middle East and the Eastern US.  He talked about various practices and sales approaches that dramatically changed the way he sells today.</p>
<p><br/></p>
<p>
Ray covered a lot of interesting points but the one that was more so the topic of discussion was how to make a sale not sound like a sale.  How certain things salesmen say scare people away, things such as sending an email to a potential client then ending it with "I will follow up with you later on this week".  Ray pointed out that things like that put a lot of unwanted pressure on people, which of course makes sense - who wants to be pressured or feel like they have a deadline when they haven't even agreed to anything?  Ray said that even though the competition continues to do this, he rises above by letting the client contact you.  If they want something, they'll come to you after you've made the first move, no point on pressuring.  This may be a risky move at first but wait awhile until you start to see results.</p>
<p><br/></p>
<p>
He talked about how people only want something if they get something out of it.  Sounds pretty straight forward, if the whole idea of your pitch is just about benefiting you or your company, your potential client won't want anything to do with it.  People like to feel like they're talking to another person, not a salesman. It's important to break the barrier of the "salesman" title, you have to earn trust.  This can be done by asking simple questions because you seem like you care about what the person might need to improve a part of their life.</p>
<p><br/></p>
<p>
Ray also mentioned how, the odd time, he will send out hand written letters to people.  With how the world is today, people really value hand written letters as opposed to an email that just gets lost in the clutter of your inbox.</p>
<p><br/></p>
<p>
Overall it was an incredible presentation - I only wish I would have brought a pen and paper to take down some more notes.  <a href="http://www.theottawanetwork.com">The Ottawa Network</a> does this every week so check their site to see where and when the next event is going to be held.</p>
]]></content:encoded>
			<wfw:commentRss>http://boedesign.com/2008/05/17/how-to-sell-in-2008-with-ray-fisher/feed/</wfw:commentRss>
		</item>
		<item>
		<title>And we call it. 7shifts.</title>
		<link>http://boedesign.com/2008/05/04/and-we-call-it-7shifts/</link>
		<comments>http://boedesign.com/2008/05/04/and-we-call-it-7shifts/#comments</comments>
		<pubDate>Sun, 04 May 2008 20:50:16 +0000</pubDate>
		<dc:creator>Jordan Boesch</dc:creator>
		
		<category><![CDATA[index]]></category>

		<guid isPermaLink="false">http://boedesign.com/index/and-we-call-it-7shifts/</guid>
		<description><![CDATA[For awhile now, Ben Watts (or one word.. benwatts) and I have been working on a super secret web app.  If you want to know when it's going to be released, sign up at http://www.7shifts.com.   
]]></description>
			<content:encoded><![CDATA[<p>For awhile now, <a href="http://www.benwatts.ca">Ben Watts</a> (or one word.. benwatts) and I have been working on a super secret web app.  If you want to know when it's going to be released, sign up at <a href="http://7shifts.com">http://www.7shifts.com</a>.   </p>
]]></content:encoded>
			<wfw:commentRss>http://boedesign.com/2008/05/04/and-we-call-it-7shifts/feed/</wfw:commentRss>
		</item>
		<item>
		<title>What&#8217;s happenin&#8217; right now?</title>
		<link>http://boedesign.com/2008/03/24/whats-happenin-right-now/</link>
		<comments>http://boedesign.com/2008/03/24/whats-happenin-right-now/#comments</comments>
		<pubDate>Tue, 25 Mar 2008 03:02:32 +0000</pubDate>
		<dc:creator>Jordan Boesch</dc:creator>
		
		<category><![CDATA[index]]></category>

		<guid isPermaLink="false">http://boedesign.com/index/whats-happenin-right-now/</guid>
		<description><![CDATA[It's been awhile since I've made a post that doesn't include a script or goodie to download.  I felt the need to share with everyone what's happening in my life.  I got a cold sore, my dog ran away and I just ate my last granola bar - but really - I am [...]]]></description>
			<content:encoded><![CDATA[<p>
It's been awhile since I've made a post that doesn't include a script or goodie to download.  I felt the need to share with everyone what's happening in my life.  I got a cold sore, my dog ran away and I just ate my last granola bar - but really - I am in the process of building a web application with <a href="http://www.benwatts.ca">Ben Watts</a>.  He's a superb designer and programmer and also a good friend of mine ever since we started college together. <span id="more-24"></span></p>
<p>&nbsp;</p>
<p>
We're building a hip and cool web app using <a href="http://www.cakephp.org">CakePHP</a>, with Ben doing most of the design work and me programming it.  We're not going to reveal what exactly <em>it is</em> that we're building - we'll leave that to the imagination. I'll rule out the following: It's not another project management (basecamp) clone.  It's not something that has a "ckr" at the end - like "flickr" or "snappr" or "piece of crappr" and it's not something that's X rated (although that would probably make us a lot of cash).
</p>
<p>&nbsp;</p>
<p>
Check back here in about 2 months and we should be ready to beta the app.  Come back... Oh please... come.. back..</p>
]]></content:encoded>
			<wfw:commentRss>http://boedesign.com/2008/03/24/whats-happenin-right-now/feed/</wfw:commentRss>
		</item>
		<item>
		<title>wiggleSlide for jQuery</title>
		<link>http://boedesign.com/2008/03/05/wiggleslide-for-jquery/</link>
		<comments>http://boedesign.com/2008/03/05/wiggleslide-for-jquery/#comments</comments>
		<pubDate>Thu, 06 Mar 2008 02:19:12 +0000</pubDate>
		<dc:creator>Jordan Boesch</dc:creator>
		
		<category><![CDATA[lab]]></category>

		<guid isPermaLink="false">http://boedesign.com/lab/wiggleslide-for-jquery/</guid>
		<description><![CDATA[I know what you're thinking - How could I not click on something called &#34;wiggleSlide&#34;?  
Well as awesome as it sounds, it's pretty cool how it works.  It's a sliding menu built with jQuery that allows you to achieve a &#34;flash&#34; kind of horizontal content scroll. I know you may have seen it [...]]]></description>
			<content:encoded><![CDATA[<p>I know what you're thinking - How could I not click on something called &quot;wiggleSlide&quot;?  </p>
<p>Well as awesome as it sounds, it's pretty cool how it works.  It's a sliding menu built with jQuery that allows you to achieve a &quot;flash&quot; kind of horizontal content scroll. I know you may have seen it before, but do the other ones bounce and ease when you click them? Hopefully not! <span id="more-22"></span> </p>
<p>&nbsp;</p>
<p><a class="linkbutton" href="/download.php?file=wiggleslide">Download It! (v1.0)</a> </p>
<p><a class="demobutton" href="/demos/wiggleslide/">Demo It!</a></p>
<p>&nbsp;</p>
<p><strong>Usage</strong></p>
<p>&nbsp;</p>
<p>The chunk of javascript below goes in the head of your document. </p>
<p>&nbsp;</p>
<div class="igBar"><span id="ljavascript-20"><a href="#" onclick="javascript:showPlainTxt('javascript-20'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">JAVASCRIPT:</span>
<div id="javascript-20">
<div class="javascript">&lt;script type=<span style="color: #3366CC;">"text/javascript"</span> src=<span style="color: #3366CC;">"js/jquery.js"</span>&gt;&lt;/script&gt; <br />
&lt;script type=<span style="color: #3366CC;">"text/javascript"</span> src=<span style="color: #3366CC;">"js/wiggleslide.js"</span>&gt;&lt;/script&gt;<br />
&lt;script type=<span style="color: #3366CC;">"text/javascript"</span>&gt;<br />
$<span style="color: #66cc66;">&#40;</span>document<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">ready</span><span style="color: #66cc66;">&#40;</span><span style="color: #00ff00; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span><br />
&nbsp;$.<span style="color: #006600;">wiggleSlide</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sliderNav: <span style="color: #3366CC;">'#slider-nav'</span>, <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sliderClickLink: <span style="color: #3366CC;">'a'</span>,<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; hiddenContainer: <span style="color: #3366CC;">'#invis-cont'</span>, <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sliderItemClassName: <span style="color: #3366CC;">'slider-item'</span>,<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; swingSpeed: <span style="color: #3366CC;">"medium"</span>,<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; permalinking: <span style="color: #00ff00; font-weight: bold;">false</span>,<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; wiggle: <span style="color: #00ff00; font-weight: bold;">true</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;<br />
<span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;<br />
&lt;/script&gt;</div>
</div>
</div>
<h2>Parameters</h2>
<p></p>
<p><strong>sliderNav: </strong>Accepts any html element with an id or class. "div" is recommended.</p>
<p>&nbsp;</p>
<p><strong>sliderClickLink: </strong>Accepts &quot;a&quot;, &quot;li&quot;, or &quot;div&quot; elements. This must be inside the element that you have declared in &quot;sliderNav&quot; above.</p>
<p>&nbsp;</p>
<p><strong>hiddenContainer:</strong> Accepts any html element with an id or class. &quot;div&quot; is recommended. <strong>The width of this does not need to be declared in your CSS! - </strong>It is automatically calculated through javascript.</p>
<p>&nbsp;</p>
<p><strong>sliderItemClassName:<br />
</strong> This element is a forced class - meaning it can only be a class and does not require the dot infront of the target.</p>
<p>&nbsp;</p>
<p><strong>swingSpeed: </strong>Accepts &quot;slow&quot;, &quot;medium&quot;, &quot;fast&quot; or an integer like 900.  This calculates how fast it scrolls through your slides.</p>
<p>&nbsp;</p>
<p><strong>permalinking:</strong> Accepts true or false. This only works with sliderClickLink set to &quot;a&quot;. If you want to have the slides display an anchor when you click them you would set this to true. Example: If you had a slide named &quot;barbie&quot; and someone clicked the link to get to that slide, you would see a page.html#barbie in your address bar. If someone typed that in their address bar, it would start on that slide.</p>
<p>&nbsp;</p>
<p><strong>wiggle:</strong> Accepts true or false. This is pretty self explanatory. If you want the slides to bounce and ease a little bit once they finish. </p>
<p>&nbsp;</p>
<p>The way that the slider links talk to the slides are through id's.  Notice in the example the anchors have an id="thing" inside the "sliderNav".  Now for that anchor to connect with that slide, you need to give your slide an id of "slide-thing".  See the connection?  Good.</p>
<p>&nbsp;</p>
<p><strong>Example of the CSS</strong></p>
<p>&nbsp;</p>
<div class="igBar"><span id="lcss-21"><a href="#" onclick="javascript:showPlainTxt('css-21'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">CSS:</span>
<div id="css-21">
<div class="css"><span style="color: #6666ff;">.cont </span><span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #ffff99; font-weight: bold;">width</span>:520px;<br />
&nbsp; &nbsp; <span style="color: #ffff99; font-weight: bold;">overflow</span>:<span style="color: #993333;">hidden</span>;<br />
&nbsp; &nbsp; <span style="color: #ffff99; font-weight: bold;">height</span>:170px; <span style="color: #808080; font-style: italic;">/* you need to set a height */</span><br />
&nbsp; &nbsp; border<span style="color: #3333ff;">:1px </span>solid #666;<br />
&nbsp; &nbsp; <span style="color: #ffff99; font-weight: bold;">z-index</span>:<span style="color: #cc66cc;">1000</span>;<br />
&nbsp; &nbsp; <span style="color: #ffff99; font-weight: bold;">position</span>:<span style="color: #993333;">relative</span>;<br />
&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span><br />
<span style="color: #6666ff;">.invis </span><span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #ffff99; font-weight: bold;">position</span>:<span style="color: #993333;">absolute</span>;<br />
&nbsp; &nbsp; <span style="color: #ffff99; font-weight: bold;">left</span>:<span style="color: #cc66cc;">0</span>;<br />
&nbsp; &nbsp; <span style="color: #808080; font-style: italic;">/* width is set through java */</span><br />
&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span><br />
.slider-item,.slider-item2,<span style="color: #6666ff;">.slider-item3 </span><span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #ffff99; font-weight: bold;">float</span>:<span style="color: #ffff99; font-weight: bold;">left</span>;<br />
&nbsp; &nbsp; <span style="color: #ffff99; font-weight: bold;">display</span>:<span style="color: #993333;">block</span>;<br />
&nbsp; &nbsp; <span style="color: #ffff99; font-weight: bold;">width</span>:500px;<br />
&nbsp; &nbsp; <span style="color: #ffff99; font-weight: bold;">padding</span>:10px;<br />
&nbsp; &nbsp; <span style="color: #ffff99; font-weight: bold;">height</span>:150px;<br />
&nbsp; &nbsp; <span style="color: #ffff99; font-weight: bold;">background</span>:#eee;<br />
&nbsp; &nbsp; <span style="color: #ffff99; font-weight: bold;">overflow</span>:<span style="color: #993333;">hidden</span>;<br />
&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span><br />
<span style="color: #6666ff;">.nav </span>a, <span style="color: #6666ff;">.nav </span>a:active, <span style="color: #6666ff;">.nav </span>a<span style="color: #3333ff;">:visited </span><span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #ffff99; font-weight: bold;">display</span>:<span style="color: #993333;">block</span>;<br />
&nbsp; &nbsp; <span style="color: #ffff99; font-weight: bold;">float</span>:<span style="color: #ffff99; font-weight: bold;">left</span>;<br />
&nbsp; &nbsp; <span style="color: #ffff99; font-weight: bold;">padding</span>:5px;<br />
&nbsp; &nbsp; <span style="color: #ffff99; font-weight: bold;">background</span>:#666;<br />
&nbsp; &nbsp; <span style="color: #ffff99; font-weight: bold;">color</span>:#33CCFF;<br />
&nbsp; &nbsp; <span style="color: #ffff99; font-weight: bold;">font-family</span>:Verdana, Arial, Helvetica, <span style="color: #993333;">sans-serif</span>;<br />
&nbsp; &nbsp; <span style="color: #ffff99; font-weight: bold;">font-size</span>:12px;<br />
&nbsp; &nbsp; <span style="color: #ffff99; font-weight: bold;">margin-right</span>:5px;<br />
&nbsp; &nbsp; <span style="color: #ffff99; font-weight: bold;">text-decoration</span>:<span style="color: #993333;">none</span>;<br />
&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span><br />
<span style="color: #6666ff;">.nav </span>li <span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #ffff99; font-weight: bold;">cursor</span>:<span style="color: #993333;">pointer</span>;<br />
<span style="color: #66cc66;">&#125;</span><br />
&nbsp; &nbsp; <br />
<span style="color: #808080; font-style: italic;">/* END EXAMPLE 1 */</span><br />
<span style="color: #6666ff;">.desc </span><span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; margin<span style="color: #3333ff;">:12px </span><span style="color: #cc66cc;">0</span>;<br />
&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span><br />
<span style="color: #6666ff;">.<span style="color: #ffff99; font-weight: bold;">clear</span> </span><span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #ffff99; font-weight: bold;">clear</span>:<span style="color: #993333;">both</span>;<br />
&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</div>
</div>
<p></p>
<p>&nbsp;</p>
<p><strong>Example of the HTML</strong></p>
<p>&nbsp;</p>
<div class="igBar"><span id="lhtml-22"><a href="#" onclick="javascript:showPlainTxt('html-22'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">HTML:</span>
<div id="html-22">
<div class="html"><span style="color: #009900;"><a href="http://december.com/html/4/element/h1.html"><span style="color: #fff; font-weight: bold;">&lt;h1&gt;</span></a></span>Example 1: Using anchors (without permalinking)<span style="color: #009900;"><span style="color: #fff; font-weight: bold;">&lt;/h1&gt;</span></span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #fff; font-weight: bold;">&lt;div</span></a> <span style="color: #006699;">id</span>=<span style="color: #ff0000;">"slider-nav"</span> <span style="color: #006699;">class</span>=<span style="color: #ff0000;">"nav"</span><span style="color: #fff; font-weight: bold;">&gt;</span></a></span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/a.html"><span style="color: #fff; font-weight: bold;">&lt;a</span></a> <span style="color: #006699;">href</span>=<span style="color: #ff0000;">"#"</span> <span style="color: #006699;">id</span>=<span style="color: #ff0000;">"box"</span><span style="color: #fff; font-weight: bold;">&gt;</span></a></span>BOX<span style="color: #009900;"><span style="color: #fff; font-weight: bold;">&lt;/a&gt;</span></span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/a.html"><span style="color: #fff; font-weight: bold;">&lt;a</span></a> <span style="color: #006699;">href</span>=<span style="color: #ff0000;">"#"</span> <span style="color: #006699;">id</span>=<span style="color: #ff0000;">"stuff"</span><span style="color: #fff; font-weight: bold;">&gt;</span></a></span>STUFF<span style="color: #009900;"><span style="color: #fff; font-weight: bold;">&lt;/a&gt;</span></span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/a.html"><span style="color: #fff; font-weight: bold;">&lt;a</span></a> <span style="color: #006699;">href</span>=<span style="color: #ff0000;">"#"</span> <span style="color: #006699;">id</span>=<span style="color: #ff0000;">"things"</span><span style="color: #fff; font-weight: bold;">&gt;</span></a></span>THINGS<span style="color: #009900;"><span style="color: #fff; font-weight: bold;">&lt;/a&gt;</span></span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/a.html"><span style="color: #fff; font-weight: bold;">&lt;a</span></a> <span style="color: #006699;">href</span>=<span style="color: #ff0000;">"#"</span> <span style="color: #006699;">id</span>=<span style="color: #ff0000;">"google"</span><span style="color: #fff; font-weight: bold;">&gt;</span></a></span>GOOGLE<span style="color: #009900;"><span style="color: #fff; font-weight: bold;">&lt;/a&gt;</span></span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/a.html"><span style="color: #fff; font-weight: bold;">&lt;a</span></a> <span style="color: #006699;">href</span>=<span style="color: #ff0000;">"#"</span> <span style="color: #006699;">id</span>=<span style="color: #ff0000;">"girl"</span><span style="color: #fff; font-weight: bold;">&gt;</span></a></span>GIRL<span style="color: #009900;"><span style="color: #fff; font-weight: bold;">&lt;/a&gt;</span></span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/a.html"><span style="color: #fff; font-weight: bold;">&lt;a</span></a> <span style="color: #006699;">href</span>=<span style="color: #ff0000;">"#"</span> <span style="color: #006699;">id</span>=<span style="color: #ff0000;">"6"</span><span style="color: #fff; font-weight: bold;">&gt;</span></a></span>NUMBER SIX<span style="color: #009900;"><span style="color: #fff; font-weight: bold;">&lt;/a&gt;</span></span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #fff; font-weight: bold;">&lt;div</span></a> <span style="color: #006699;">class</span>=<span style="color: #ff0000;">"clear"</span><span style="color: #fff; font-weight: bold;">&gt;</span></a></span><span style="color: #009900;"><span style="color: #fff; font-weight: bold;">&lt;/div&gt;</span></span><br />
&nbsp; &nbsp; <span style="color: #009900;"><span style="color: #fff; font-weight: bold;">&lt;/div&gt;</span></span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #fff; font-weight: bold;">&lt;div</span></a> <span style="color: #006699;">class</span>=<span style="color: #ff0000;">"cont"</span><span style="color: #fff; font-weight: bold;">&gt;</span></a></span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #fff; font-weight: bold;">&lt;div</span></a> <span style="color: #006699;">id</span>=<span style="color: #ff0000;">"invis-cont"</span> <span style="color: #006699;">class</span>=<span style="color: #ff0000;">"invis"</span><span style="color: #fff; font-weight: bold;">&gt;</span></a></span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #fff; font-weight: bold;">&lt;div</span></a> <span style="color: #006699;">class</span>=<span style="color: #ff0000;">"slider-item"</span> <span style="color: #006699;">id</span>=<span style="color: #ff0000;">"slider-box"</span><span style="color: #fff; font-weight: bold;">&gt;</span></a></span>slider number 1<span style="color: #009900;"><span style="color: #fff; font-weight: bold;">&lt;/div&gt;</span></span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #fff; font-weight: bold;">&lt;div</span></a> <span style="color: #006699;">class</span>=<span style="color: #ff0000;">"slider-item"</span> <span style="color: #006699;">id</span>=<span style="color: #ff0000;">"slider-stuff"</span><span style="color: #fff; font-weight: bold;">&gt;</span></a></span>this is slide numbah 2<span style="color: #009900;"><span style="color: #fff; font-weight: bold;">&lt;/div&gt;</span></span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #fff; font-weight: bold;">&lt;div</span></a> <span style="color: #006699;">class</span>=<span style="color: #ff0000;">"slider-item"</span> <span style="color: #006699;">id</span>=<span style="color: #ff0000;">"slider-things"</span><span style="color: #fff; font-weight: bold;">&gt;</span></a></span><span style="color: #009900;"><a href="http://december.com/html/4/element/img.html"><span style="color: #fff; font-weight: bold;">&lt;img</span></a> <span style="color: #006699;">src</span>=<span style="color: #ff0000;">"http://blog.wired.com/photos/uncategorized/2007/06/05/yahoo_logo.jpg"</span> /<span style="color: #fff; font-weight: bold;">&gt;</span></a></span><span style="color: #009900;"><span style="color: #fff; font-weight: bold;">&lt;/div&gt;</span></span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #fff; font-weight: bold;">&lt;div</span></a> <span style="color: #006699;">class</span>=<span style="color: #ff0000;">"slider-item"</span> <span style="color: #006699;">id</span>=<span style="color: #ff0000;">"slider-girl"</span><span style="color: #fff; font-weight: bold;">&gt;</span></a></span><span style="color: #009900;"><a href="http://december.com/html/4/element/img.html"><span style="color: #fff; font-weight: bold;">&lt;img</span></a> <span style="color: #006699;">src</span>=<span style="color: #ff0000;">"http://www.carnegiemellontoday.com/images/news_images/Girl-Scout.jpg"</span> /<span style="color: #fff; font-weight: bold;">&gt;</span></a></span><span style="color: #009900;"><span style="color: #fff; font-weight: bold;">&lt;/div&gt;</span></span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #fff; font-weight: bold;">&lt;div</span></a> <span style="color: #006699;">class</span>=<span style="color: #ff0000;">"slider-item"</span> <span style="color: #006699;">id</span>=<span style="color: #ff0000;">"slider-6"</span><span style="color: #fff; font-weight: bold;">&gt;</span></a></span>sixsixsix<span style="color: #009900;"><span style="color: #fff; font-weight: bold;">&lt;/div&gt;</span></span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #fff; font-weight: bold;">&lt;div</span></a> <span style="color: #006699;">class</span>=<span style="color: #ff0000;">"slider-item"</span> <span style="color: #006699;">id</span>=<span style="color: #ff0000;">"slider-google"</span><span style="color: #fff; font-weight: bold;">&gt;</span></a></span><span style="color: #009900;"><a href="http://december.com/html/4/element/img.html"><span style="color: #fff; font-weight: bold;">&lt;img</span></a> <span style="color: #006699;">src</span>=<span style="color: #ff0000;">"http://www.google.ca/intl/en_ca/images/logo.gif"</span> /<span style="color: #fff; font-weight: bold;">&gt;</span></a></span><span style="color: #009900;"><span style="color: #fff; font-weight: bold;">&lt;/div&gt;</span></span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #fff; font-weight: bold;">&lt;div</span></a> <span style="color: #006699;">class</span>=<span style="color: #ff0000;">"clear"</span><span style="color: #fff; font-weight: bold;">&gt;</span></a></span><span style="color: #009900;"><span style="color: #fff; font-weight: bold;">&lt;/div&gt;</span></span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><span style="color: #fff; font-weight: bold;">&lt;/div&gt;</span></span><br />
&nbsp; &nbsp; <span style="color: #009900;"><span style="color: #fff; font-weight: bold;">&lt;/div&gt;</span></span></div>
</div>
</div>
<p></p>
<p>&nbsp;</p>
]]></content:encoded>
			<wfw:commentRss>http://boedesign.com/2008/03/05/wiggleslide-for-jquery/feed/</wfw:commentRss>
		</item>
	</channel>
</rss>
