<?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>Dotflow</title>
	<atom:link href="http://www.dotflow.nl/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.dotflow.nl</link>
	<description>Online Tips, Tricks &#38; Fun</description>
	<lastBuildDate>Thu, 12 May 2011 14:01:43 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Fun after Tomas</title>
		<link>http://www.dotflow.nl/fun-after-tomas/</link>
		<comments>http://www.dotflow.nl/fun-after-tomas/#comments</comments>
		<pubDate>Thu, 04 Nov 2010 14:19:30 +0000</pubDate>
		<dc:creator>Wouter Meeuwisse</dc:creator>
				<category><![CDATA[Fun]]></category>
		<category><![CDATA[Local news]]></category>
		<category><![CDATA[News]]></category>

		<guid isPermaLink="false">http://www.dotflow.nl/?p=431</guid>
		<description><![CDATA[These guys sure know how to take advantage of the bad weather here on Curacao! Wakeboarding on the streets of Zeelandia!!!!

]]></description>
			<content:encoded><![CDATA[<p>These guys sure know how to take advantage of the bad weather here on Curacao! Wakeboarding on the streets of Zeelandia!!!!</p>
<p><object style="width: 400px; height: 300px;" classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="400" height="300" codebase="http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0"><param name="src" value="http://www.dotflow.nl/wp-content/uploads/2010/11/446038638234_17789.mp4" /><embed style="width: 400px; height: 300px;" type="video/quicktime" width="400" height="300" src="http://www.dotflow.nl/wp-content/uploads/2010/11/446038638234_17789.mp4"></embed></object></p>
]]></content:encoded>
			<wfw:commentRss>http://www.dotflow.nl/fun-after-tomas/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Tail of Tomas strikes harder than expected on Curacao</title>
		<link>http://www.dotflow.nl/tail-of-tomas-strikes-harder-than-expected-on-curacao/</link>
		<comments>http://www.dotflow.nl/tail-of-tomas-strikes-harder-than-expected-on-curacao/#comments</comments>
		<pubDate>Tue, 02 Nov 2010 15:08:30 +0000</pubDate>
		<dc:creator>Wouter Meeuwisse</dc:creator>
				<category><![CDATA[Local news]]></category>
		<category><![CDATA[News]]></category>
		<category><![CDATA[hurricane]]></category>
		<category><![CDATA[tomas]]></category>
		<category><![CDATA[tomas curacao]]></category>
		<category><![CDATA[tropical storm]]></category>

		<guid isPermaLink="false">http://www.dotflow.nl/?p=408</guid>
		<description><![CDATA[Last night was dramatic on Curacao. The tail of hurricane Tomas stroke hard. Heavy rain, wind and thunder. Cars where floating, people couldn&#8217;t get home etc. Rumors say it will be heavier between 3 and 6 this afternoon (local time) and the bad weather will continue for days.
Quick update (at 16.45u local time):

Supermarkets are closed [...]]]></description>
			<content:encoded><![CDATA[<p>Last night was dramatic on Curacao. The tail of hurricane Tomas stroke hard. Heavy rain, wind and thunder. Cars where floating, people couldn&#8217;t get home etc. Rumors say it will be heavier between 3 and 6 this afternoon (local time) and the bad weather will continue for days.</p>
<p>Quick update (at 16.45u local time):</p>
<ul>
<li>Supermarkets are closed because of the water.</li>
<li>Woman died in her car</li>
<li>It&#8217;s quit now..</li>
<li>Salina, Zeelandia, Suijkertuintje and Pennstraat are closed for traffic</li>
<li>Keeping our fingers crossed for this weekend (famous Amstel Bright Race)</li>
</ul>
<h2><strong>Impression:</strong></h2>
<p><strong>Cars completely under water</strong></p>
<p><img class="alignnone size-full wp-image-409" title="tomas curacao" src="http://www.dotflow.nl/wp-content/uploads/2010/11/149483_1696394332747_1324518287_1846474_992646_n.jpg" alt="tomas curacao" width="300" height="300" /></p>
<p><strong>Nice to have a hummer..</strong></p>
<p><img class="alignnone size-medium wp-image-421" title="tomas curacao - hummer" src="http://www.dotflow.nl/wp-content/uploads/2010/11/hummer-300x225.jpg" alt="tomas curacao - hummer" width="300" height="225" /></p>
<p><img class="alignnone size-medium wp-image-426" title="tomas-curacao-1" src="http://www.dotflow.nl/wp-content/uploads/2010/11/tomas-curacao-1-300x190.jpg" alt="tomas-curacao-1" width="300" height="190" /></p>
<p><img class="alignnone size-medium wp-image-427" title="tomas-curacao-2" src="http://www.dotflow.nl/wp-content/uploads/2010/11/tomas-curacao-2-300x190.jpg" alt="tomas-curacao-2" width="300" height="190" /></p>
<p><img class="alignnone size-medium wp-image-428" title="tomas-curacao-3" src="http://www.dotflow.nl/wp-content/uploads/2010/11/tomas-curacao-3-300x190.jpg" alt="tomas-curacao-3" width="300" height="190" /></p>
<p><strong>Zeelandia Curacao</strong></p>
<p><img class="alignnone size-medium wp-image-410" title="tomas curacao" src="http://www.dotflow.nl/wp-content/uploads/2010/11/148751_174726779208318_100000129924901_641033_6058769_n-300x225.jpg" alt="tomas curacao" width="300" height="225" /></p>
<p><strong>Zuijkertuintje</strong></p>
<p><img class="alignnone size-medium wp-image-411" title="tomas curacao - zuijkertuintje" src="http://www.dotflow.nl/wp-content/uploads/2010/11/tomas-300x168.jpg" alt="tomas curacao - zuijkertuintje" width="300" height="168" /></p>
<p><strong>Zuijkertuintje 2</strong></p>
<p><img class="alignnone size-medium wp-image-412" title="tomas curacao - zuijkertuintje" src="http://www.dotflow.nl/wp-content/uploads/2010/11/tomas1-300x168.jpg" alt="tomas curacao - zuijkertuintje" width="300" height="168" /></p>
<p><strong>Bottelier</strong></p>
<p><img class="alignnone size-medium wp-image-413" title="tomas curacao bottelier " src="http://www.dotflow.nl/wp-content/uploads/2010/11/tomas-bottelier-300x168.jpg" alt="tomas curacao bottelier " width="300" height="168" /></p>
<p><strong>Salina</strong></p>
<p><img class="alignnone size-medium wp-image-414" title="tomas curacao - salina" src="http://www.dotflow.nl/wp-content/uploads/2010/11/salina-300x168.jpg" alt="tomas curacao - salina" width="300" height="168" /></p>
<p><strong>Salina 2</strong></p>
<p><a href="http://www.dotflow.nl/wp-content/uploads/2010/11/salina1.jpg"><img class="alignnone size-medium wp-image-415" title="tomas curacao" src="http://www.dotflow.nl/wp-content/uploads/2010/11/salina1-300x168.jpg" alt="tomas curacao" width="300" height="168" /></a></p>
<p><img class="alignnone size-medium wp-image-416" title="tomas curacao" src="http://www.dotflow.nl/wp-content/uploads/2010/11/algemeen-300x168.jpg" alt="tomas curacao" width="300" height="168" /></p>
<p><strong>Video:</strong></p>
<p><a href="http://www.facebook.com/video/video.php?v=453701131730" target="_blank">http://www.facebook.com/video/video.php?v=453701131730</a></p>
<p><a href="http://www.facebook.com/#!/video/video.php?v=457971044590" target="_blank">http://www.facebook.com/#!/video/video.php?v=457971044590</a></p>
<p><a rel="nofollow" href="http://www.youtube.com/watch?v=u7rl-PiDp9A&amp;feature=player_embedded" target="_blank">http://www.youtube.com/watch?v=u7rl-PiDp9A&amp;</a></p>
<p><strong>Sources:</strong></p>
<p>www.versgeperst.com</p>
<p>www.facebook.com</p>
]]></content:encoded>
			<wfw:commentRss>http://www.dotflow.nl/tail-of-tomas-strikes-harder-than-expected-on-curacao/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Hurricane Curacao 2010</title>
		<link>http://www.dotflow.nl/hurricane-curacao-2010/</link>
		<comments>http://www.dotflow.nl/hurricane-curacao-2010/#comments</comments>
		<pubDate>Fri, 29 Oct 2010 20:11:57 +0000</pubDate>
		<dc:creator>Wouter Meeuwisse</dc:creator>
				<category><![CDATA[Local news]]></category>
		<category><![CDATA[News]]></category>
		<category><![CDATA[curacao]]></category>
		<category><![CDATA[hurricana]]></category>
		<category><![CDATA[storm]]></category>
		<category><![CDATA[tropical wave]]></category>
		<category><![CDATA[wave]]></category>

		<guid isPermaLink="false">http://www.dotflow.nl/?p=400</guid>
		<description><![CDATA[
A strong tropical wave accompanied by a developing low pressure system is located about 225 miles southeast of barbados. Data from an airforce reserve reconnaissance aircraft investigating the system this afternoon indicates a closed surface circulation with winds to tropical-storm is forming. If this development trend continues then advisories will be initiated on tropical storm [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.dotflow.nl/wp-content/uploads/2010/10/two_atl.gif"><img class="alignnone size-medium wp-image-401" title="two_atl" src="http://www.dotflow.nl/wp-content/uploads/2010/10/two_atl-300x244.gif" alt="" width="300" height="244" /></a></p>
<p>A strong tropical wave accompanied by a developing low pressure system is located about 225 miles southeast of barbados. Data from an airforce reserve reconnaissance aircraft investigating the system this afternoon indicates a closed surface circulation with winds to tropical-storm is forming. If this development trend continues then advisories will be initiated on tropical storm tomas at 5 pm ast.</p>
<p>Tropical storm warnings would also then be required for portions of the WINDWARD ISLANDS. There is a high chance, near 100% of this system becoming a tropical cyclone during the next 48 hours as it moves west-nothwestwards at 15 to 20mph.</p>
<p>Here at <a title="cross media design curacao" href="http://www.mediafive99.com" target="_blank">Media Five99</a>, we&#8217;re always very happy with our office at sea. We hope this will not change after this weekend. We&#8217;re moving our computers, just to be sure..</p>
<p>Keep your fingers crossed, updates soon! Please reply if you have more info!</p>
<p>Update 29/10 at 16.15u (local time):<br />
Moving image here: <a title="curricane watch" href="http://www.ssd.noaa.gov/goes/east/carb/flash-avn.html" target="_blank">http://www.ssd.noaa.gov/goes/east/carb/flash-avn.html</a></p>
<p>Update 01/11 at 10.15u (local time):<br />
Thank god, no crazy weather this weekend, Thomas is acting normal <img src='http://www.dotflow.nl/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> . But it&#8217;s still not completely over if you have to believe this picture below:<br />
<a href="http://www.dotflow.nl/wp-content/uploads/2010/10/74824_450191950941_731475941_5991326_145633_n.jpg"><img class="alignnone size-medium wp-image-405" title="hurricane curacao" src="http://www.dotflow.nl/wp-content/uploads/2010/10/74824_450191950941_731475941_5991326_145633_n-300x225.jpg" alt="" width="300" height="225" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.dotflow.nl/hurricane-curacao-2010/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Handy wordpress plugins when using wp as CMS</title>
		<link>http://www.dotflow.nl/handy-wordpress-plugins-when-using-wp-as-cms/</link>
		<comments>http://www.dotflow.nl/handy-wordpress-plugins-when-using-wp-as-cms/#comments</comments>
		<pubDate>Wed, 12 May 2010 15:16:11 +0000</pubDate>
		<dc:creator>Wouter Meeuwisse</dc:creator>
				<category><![CDATA[Tips]]></category>
		<category><![CDATA[cms]]></category>
		<category><![CDATA[plugin]]></category>
		<category><![CDATA[plugins]]></category>

		<guid isPermaLink="false">http://www.dotflow.nl/?p=391</guid>
		<description><![CDATA[I put together a list of wordpress plugins that are really handy to use when using wordpress as a cms.
1. custom fields template
The Custom Field Template plugin adds the default custom fields on the Write Post/Page. You can add a WYSIWYG editor, dropdown list, checkboxes, file upload, and more to your custom fields to use [...]]]></description>
			<content:encoded><![CDATA[<p>I put together a list of wordpress plugins that are really handy to use when using wordpress as a cms.</p>
<h3>1. custom fields template</h3>
<p>The Custom Field Template plugin adds the default custom fields on the Write Post/Page. You can add a WYSIWYG editor, dropdown list, checkboxes, file upload, and more to your custom fields to use in your template.</p>
<p>Link: <a href="http://wordpress.org/extend/plugins/custom-field-template/" target="_blank">http://wordpress.org/extend/plugins/custom-field-template/</a></p>
<p>Support: <a href="http://wordpress.org/tags/custom-field-template" target="_blank">http://wordpress.org/tags/custom-field-template</a></p>
<h3>2. get the image</h3>
<p><em>Get the Image</em> is a plugin that grabs images for you.  It was  designed to make the process of things such as adding thumbnails,  feature images, and/or other images to your blog much easier, but it&#8217;s  so much more than that.  It is an image-based representation of your  WordPress posts.</p>
<p>Link: <a href="http://wordpress.org/extend/plugins/get-the-image/" target="_blank">http://wordpress.org/extend/plugins/get-the-image/</a></p>
<h3>3. pods</h3>
<p>Pods is a Wordpress CMS <em>framework</em> that lets you add and display your own  content types.<br />
Unlike WP custom post types, each content type  gets its own table.</p>
<p>Link: <a href="http://podscms.org/" target="_blank">http://podscms.org/</a></p>
<h3>4. cleaner gallery</h3>
<p><em>Cleaner Gallery</em> was written to take care of the invalid  XHTML that WordPress produces when using the <code></code> shortcode.</p>
<p>It does a bit more than that though.  It will integrate with many  Lightbox-type scripts and allow you to do much cooler things with your  galleries.  Plus, it has a couple of extra options that you can play  around with.</p>
<p>Link: <a href="http://wordpress.org/extend/plugins/cleaner-gallery/" target="_blank">http://wordpress.org/extend/plugins/cleaner-gallery/</a></p>
<h3>5. langswitch</h3>
<p>The Language Switcher WordPress plugin allows you to create a bilingual  or multi-lingual blog or site, using WordPress. The way it works is that  you write the content for your site in multiple languages, using special tags to tell the plugin which text goes with which language.  You&#8217;ll also install &#8220;gettext&#8221; language files to translate the text  generated by your theme, other plugins, and WordPress itself into your target languages. The Language  Switcher plugin will then let your site viewers choose a language for viewing your site, and put  all the text on the screen into the right language.</p>
<p>Link &amp; support: <a href="http://www.poplarware.com/downloads/language_switcher" target="_blank">http://www.poplarware.com/downloads/language_switcher</a></p>
<h3>6. Contact form 7</h3>
<p>Contact Form 7 can manage multiple contact forms, plus you can customize  the form and the mail contents flexibly with simple markup. The form  supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so  on.</p>
<p>Link: <a href="http://wordpress.org/extend/plugins/contact-form-7/" target="_blank">http://wordpress.org/extend/plugins/contact-form-7/</a></p>
<h3>7. Wordpress breadcrumbs</h3>
<p>This plugin allows the use of breadcrumbs in your Wordpress  installation. Please refer to the installation instructions for  instructions on how to configure your theme to allow for breadcrumbs.</p>
<p>Link: <a href="http://wordpress.org/extend/plugins/wordpress-breadcrumbs/" target="_blank">http://wordpress.org/extend/plugins/wordpress-breadcrumbs/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.dotflow.nl/handy-wordpress-plugins-when-using-wp-as-cms/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>IE Tester for Vista and Windows7</title>
		<link>http://www.dotflow.nl/ie-tester-for-vista-and-windows7/</link>
		<comments>http://www.dotflow.nl/ie-tester-for-vista-and-windows7/#comments</comments>
		<pubDate>Fri, 05 Mar 2010 16:13:53 +0000</pubDate>
		<dc:creator>Wouter Meeuwisse</dc:creator>
				<category><![CDATA[Tips]]></category>
		<category><![CDATA[browser]]></category>
		<category><![CDATA[browsers]]></category>
		<category><![CDATA[ie]]></category>
		<category><![CDATA[IE6]]></category>
		<category><![CDATA[ietester]]></category>
		<category><![CDATA[multi browser]]></category>

		<guid isPermaLink="false">http://www.dotflow.nl/?p=388</guid>
		<description><![CDATA[
IETester is a free WebBrowser that allows you to have the rendering and javascript engines of IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP, as well as the installed IE in the same process.
It&#8217;s still in &#8216;Alpha&#8217; but it is working! Take a look at the website and download it for [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.dotflow.nl/wp-content/uploads/2010/03/ietester.jpg"><img class="size-full wp-image-389 alignnone" title="ietester" src="http://www.dotflow.nl/wp-content/uploads/2010/03/ietester.jpg" alt="" width="457" height="298" /></a></p>
<p>IETester is a free WebBrowser that allows you to have the rendering and javascript engines of <strong>IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP</strong>, as well as the installed IE in the same process.</p>
<p>It&#8217;s still in &#8216;Alpha&#8217; but it is working! <a href="http://www.my-debugbar.com/wiki/IETester/HomePage" target="_blank">Take a look at the website and download it for free!</a></p>
<h3>Known &#8216;Alpha&#8217; problems and limitations :</h3>
<ul>
<li>The Previous/Next buttons are not working properly</li>
<li>Focus is not working properly</li>
<li>Java applets are not working</li>
<li>Flash is not working on IE6 instance in user mode : A solution is to launch IETester as admin user and Flash will work.</li>
<li>CSS Filters are not working correctly in user mode : A solution is to launch IETester as admin user and CSS Filters will work.</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.dotflow.nl/ie-tester-for-vista-and-windows7/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Build your own simple CMS</title>
		<link>http://www.dotflow.nl/build-your-own-simple-cms/</link>
		<comments>http://www.dotflow.nl/build-your-own-simple-cms/#comments</comments>
		<pubDate>Mon, 11 Jan 2010 19:48:59 +0000</pubDate>
		<dc:creator>Wouter Meeuwisse</dc:creator>
				<category><![CDATA[Tips]]></category>
		<category><![CDATA[Tricks]]></category>
		<category><![CDATA[cms]]></category>
		<category><![CDATA[css tricks]]></category>
		<category><![CDATA[simple cms]]></category>
		<category><![CDATA[tut]]></category>

		<guid isPermaLink="false">http://www.dotflow.nl/?p=385</guid>
		<description><![CDATA[I just ran into a great tutorial for php beginners (like me):
The Magic of PHP + MySQL

It’s safe to say that nearly every website that’s up-to-date these days is using some form of content management system (CMS). While there are a ton of great free options that provide us with a CMS to power a [...]]]></description>
			<content:encoded><![CDATA[<p>I just ran into a great tutorial for php beginners (like me):</p>
<h3>The Magic of PHP + MySQL</h3>
<p><img src="http://css-tricks.com/wp-content/csstricks-uploads/phpmysql-1.jpg" alt="" width="570" height="200" /><br />
It’s safe to say that nearly every website that’s up-to-date these days is using some form of content management system (CMS). While there are a ton of great free options that provide us with a CMS to power a website (Wordpress, Drupal, etc.), it doesn’t hurt to peek under the hood and get a feel for how these systems work.</p>
<p>To get our feet wet as back-end developers, we’ll be creating a simple PHP class that will:</p>
<ul>
<li>Create a database</li>
<li>Connect to a database</li>
<li>Display a form with two fields</li>
<li>Save the form data in the database</li>
<li>Display the saved data from the database</li>
</ul>
<div><a href="http://css-tricks.com/examples/SimpleCMS.zip">Download Files</a></div>
<p>This class is intended to give you a feel for how PHP and MySQL interact together, and to show the basics of a CMS. I’ll be skipping explanations of some of the very basic programming stuff, so if at any point you feel lost, head on over to <a href="http://w3schools.com/php/default.asp">w3schools.com</a> and give yourself a crash-course in PHP. I’ll try not to lose anyone, though, I promise.</p>
<h3>Building the Class</h3>
<p><img src="http://css-tricks.com/wp-content/csstricks-uploads/phpmysql-2.jpg" alt="" width="570" height="162" /><br />
Our first step is to simply lay out the class in a file named ’simpleCMS.php’ so we have a road map to work with.</p>
<pre><code>&lt;?php

class simpleCMS {
  var $host;
  var $username;
  var $password;
  var $table;

  public function display_public() {

  }

  public function display_admin() {

  }

  public function write() {

  }

  public function connect() {

  }

  private function buildDB() {

  }
}

?&gt;</code></pre>
<p>As you can see, we’re creating one class with four variables and five methods. I’ve opted to use PHP’s <a href="http://en.wikipedia.org/wiki/Object_oriented">object-oriented approach</a> because it makes for cleaner code in large projects, and, in my opinion, it’s just good practice.</p>
<h3>The Variables</h3>
<p>In this case, all four variables are for connecting to the database: <tt>$host</tt>, <tt>$username</tt>, <tt>$password</tt>, and <tt>$table</tt> provide a path and access to our database on the server. For now, we’ll leave those empty and move on to our database, which is constructed by the method <tt>buildDB()</tt>.</p>
<h3>Build the Database</h3>
<pre><code>private function buildDB() {
    $sql = &lt;&lt;&lt;MySQL_QUERY
        CREATE TABLE IF NOT EXISTS testDB (
            title	VARCHAR(150),
            bodytext	TEXT,
            created	VARCHAR(100)
    )
    MySQL_QUERY;

    return mysql_query($sql);
}</code></pre>
<p>This function runs a MySQL command that checks the database to see if <tt>testDB</tt> exists. If so, it simply passes along a notification of success; if not, it creates our table and assigns three columns to hold data.</p>
<h3>Connect to the Database</h3>
<p><img src="http://css-tricks.com/wp-content/csstricks-uploads/phpmysql-3.jpg" alt="" width="570" height="136" /><br />
Now that we have a function to build our table, let’s create the function that will connect to our database.</p>
<pre><code>public function connect() {
    mysql_connect($this-&gt;host,$this-&gt;username,$this-&gt;password) or die("Could not connect. " . mysql_error());
    mysql_select_db($this-&gt;table) or die("Could not select database. " . mysql_error());

    return $this-&gt;buildDB();
}</code></pre>
<p>We call <a href="http://us2.php.net/manual/en/function.mysql-connect.php"><tt>mysql_connect()</tt></a> to hook into our database, and then <a href="http://us2.php.net/manual/en/function.mysql-select-db.php"><tt>mysql_select_db()</tt></a> to make sure we save our data in the right place. Both of these functions are accompanied by the <tt>die()</tt> command, which essentially says, “in the event that this function fails, stop execution of this script and display a message.”</p>
<p>Our <tt>connect()</tt> function connects to the database and gets us pointed in the right direction, then runs our <tt>buildDB()</tt> function. Remember the grammatically awkward “IF NOT EXISTS” part of our MySQL command? Because we’re going to run this function every time the page is loaded, we have to make sure we’re not overwriting our database with every function call, and that’s exactly what that phrase requires.</p>
<h3>Build the Form</h3>
<p>So, we’ve got a database. Now we just need to <a href="http://www.youtube.com/watch?v=g6dtWbgDc4Q">put stuff in it</a>!</p>
<pre><code>public function display_admin() {
    return &lt;&lt;&lt;ADMIN_FORM

    &lt;form action="{$_SERVER['PHP_SELF']}" method="post"&gt;
      &lt;label for="title"&gt;Title:&lt;/label&gt;
      &lt;input name="title" id="title" type="text" maxlength="150" /&gt;
      &lt;label for="bodytext"&gt;Body Text:&lt;/label&gt;
      &lt;textarea name="bodytext" id="bodytext"&gt;&lt;/textarea&gt;
      &lt;input type="submit" value="Create This Entry!" /&gt;
    &lt;/form&gt;

ADMIN_FORM;
  }</code></pre>
<p>Again, this is a very simple function. When called, it simply returns the HTML markup to create our form. You’ll notice, however, in the <tt>action</tt> attribute of the <tt>form</tt> element, that I’ve used the variable <tt>$_SERVER['PHP_SELF']</tt>. This is, essentially, a shortcut that references the file you’re currently using (in our case, it’s display.php). This is useful if you’ll be reusing your code across a site and don’t necessarily want to rewrite this function for each page.</p>
<p>I’m also going to take a second right now to talk about the method I’m using to return the HTML. It’s a format used in PHP called <em>HEREDOC</em> syntax, and I <strong>love</strong> it.</p>
<p>The primary advantage of HEREDOC is that it allows you to include <em>formatting</em> in your output. This is extraordinarily useful for folks like me who take issue with cluttered source code. You can read more about HEREDOC syntax and its ilk in the <a href="http://us2.php.net/manual/en/language.types.string.php#language.types.string.syntax.heredoc">PHP manual</a>.</p>
<h3>Saving the Data to the Database</h3>
<p>Our form will allow us to input information, so how do we save it? That’s where our <tt>write()</tt> method comes in.</p>
<pre><code>public function write($p) {
    if ( $p['title'] )
      $title = mysql_real_escape_string($p['title']);
    if ( $p['bodytext'])
      $bodytext = mysql_real_escape_string($p['bodytext']);
    if ( $title &amp;&amp; $bodytext ) {
      $created = time();
      $sql = "INSERT INTO testDB VALUES('$title','$bodytext','$created')";
      return mysql_query($sql);
    } else {
      return false;
    }
}</code></pre>
<p>Let’s start with the function call itself—we’re passing a variable to this one, which we haven’t done so far. Our variable <tt>$p</tt> is going to hold the information sent from our form via the <a href="http://www.w3schools.com/php/php_post.asp">post method</a>.</p>
<p>Once inside the function, we start with a <a href="http://us2.php.net/manual/en/control-structures.if.php">conditional statement</a> that’s checking to see if the the <tt>title</tt> value was set in the form before it was submitted, and if so, we’re setting our <tt>$title</tt> variable to the <tt>$_POST['title']</tt> value (<strong>NOTE:</strong> we’re using the function <a href="http://us2.php.net/manual/en/function.mysql-real-escape-string.php"><tt>mysql_real_escape_string()</tt></a> as a precaution against potentially dangerous input, which is important to keep in mind when you’re building <em>anything</em> that will allow users to input information). If <tt>$_POST['title']</tt> wasn’t set, we skip this line, leaving the <tt>$title</tt> variable unset.</p>
<p>This process is repeated for our second input, and then both variables are checked to make sure nothing is blank before saving to the database. If both variables are set, we then set the <tt>$created</tt> variable with the current <a href="http://en.wikipedia.org/wiki/Unix_time">Unix timestamp</a>, which we’ll use to sort our entries chronologically when we view them in the future.</p>
<p>We now have three variables, and because we’ve run checks, we know that all three variables are not empty. Now we can write our MySQL query that will save the entry in the database!</p>
<h3>Displaying the Information from the Database</h3>
<p><img src="http://css-tricks.com/wp-content/csstricks-uploads/phpmysql-4.jpg" alt="" width="570" height="162" /><br />
Now that we have the means to put information <em>into</em> our database, we need to create a way to get that information back <em>out.</em> This is where <tt>display_public()</tt> comes in. This is by far the most complex of our methods, so let’s really take our time and figure out what’s going on inside.</p>
<pre><code>public function display_public() {
    $q = "SELECT * FROM testDB ORDER BY created DESC LIMIT 3";
    $r = mysql_query($q);

    if ( $r !== false &amp;&amp; mysql_num_rows($r) &gt; 0 ) {
      while ( $a = mysql_fetch_assoc($r) ) {
        $title = stripslashes($a['title']);
        $bodytext = stripslashes($a['bodytext']);

        $entry_display .= &lt;&lt;&lt;ENTRY_DISPLAY

    &lt;h2&gt;$title&lt;/h2&gt;
    &lt;p&gt;
      $bodytext
    &lt;/p&gt;

ENTRY_DISPLAY;
      }
    } else {
      $entry_display = &lt;&lt;&lt;ENTRY_DISPLAY

    &lt;h2&gt;This Page Is Under Construction&lt;/h2&gt;
    &lt;p&gt;
      No entries have been made on this page.
      Please check back soon, or click the
      link below to add an entry!
    &lt;/p&gt;

ENTRY_DISPLAY;
    }
    $entry_display .= &lt;&lt;&lt;ADMIN_OPTION

    &lt;p&gt;
      &lt;a href="{$_SERVER['PHP_SELF']}?admin=1"&gt;Add a New Entry&lt;/a&gt;
    &lt;/p&gt;

ADMIN_OPTION;

    return $entry_display;
  }</code></pre>
<p>The first thing to note when reading from a database is the way PHP and MySQL interact with each other. First, we ask the database a question (query), to which it replies with a result (resource). However, this result isn’t really useful until we’ve decoded it using one of several methods that “fetch,” or organize, the information that’s contained inside into a usable form (array).</p>
<p>Our very first action in the above function is to set up our query in the variable <tt>$q</tt>. The asterisk (*) operator in MySQL means “everything,” so our query is asking the database to select <em>everything</em> from entries in the table <tt>testDB</tt> in reverse chronological order, limited to the first three entries returned.</p>
<p>Now that the query is defined, we send it to the database using the function <a href="http://us2.php.net/manual/en/function.mysql-query.php"><tt>mysql_query()</tt></a>. The resulting resource is stored in the variable <tt>$r</tt>. This is where it gets a bit tricky.</p>
<p>We now run a conditional statement that says, “IF <tt>mysql_query()</tt> didn’t fail, AND IF the number of entries returned was greater than zero, process the result, OR ELSE display a default message.”</p>
<p>If <tt>$r</tt> contains entries from the database, we now have to “fetch” that data. Information from the database is returned as an <a href="http://us2.php.net/manual/en/language.types.array.php">array</a>, which is organized similarly to the database table itself. The function <a href="http://us2.php.net/manual/en/function.mysql-fetch-assoc.php"><tt>mysql_fetch_assoc()</tt></a> will take the resource and break each entry into an associative array (this means that when we save the result of <tt>mysql_fetch_assoc()</tt> into the variable <tt>$a</tt>, the data from the entry will be accessible by the column names in the database, i.e. <tt>$a['title']</tt>).</p>
<p>However, <tt>mysql_fetch_assoc()</tt> only gives us one entry at a time. To get <em>all</em> of the returned entries, we have to use a <a href="http://us2.php.net/while"><tt>while</tt> loop</a>. Essentially, we’re saying, “WHILE <tt>$r</tt> has values we haven’t used yet, get the next entry in line and do the following actions with it.”</p>
<p>In this case, we’re going to check the entry to make sure that data was returned, then remove the slashes that were added when we saved the information to the database using <a href="http://us2.php.net/manual/en/function.stripslashes.php"><tt>stripslashes()</tt></a>. After that, we simply wrap the variables in some HTML and, <em>voila!</em> we’ve got screen-ready content!</p>
<p>As a final step, the code adds a link to the bottom that allows users to add an entry. It’s worth noting the use of the “.=” operator used in the <tt>while</tt> loop and when creating the “Add a New Entry” link; a function can only return one variable, so we need to <em>append</em> the new information to the existing variable. If we just used the equals sign (“=”), we would overwrite existing data and end up with just a link to the form and no content.</p>
<p>So, you’ve now written your first CMS class! You can easily write and retrieve data to and from a database. All that’s left to do is to try it out!</p>
<h3>Using the Class</h3>
<p>To use our class, we need to create a separate file. I’m going to call it “display.php”, which I’ll save in the main web folder, with our class saved as “simpleCMS.php” in a folder called “_class” within the main folder. To start, we just set up a document with plain ol’ HTML.</p>
<pre><code>&lt;html&gt;

  &lt;head&gt;
    &lt;title&gt;SimpleCMS&lt;/title&gt;
  &lt;/head&gt;

  &lt;body&gt;

  &lt;/body&gt;

&lt;/html&gt;</code></pre>
<p>To use our class, we just have to insert a little PHP between the body tags:</p>
<pre><code>&lt;?php

  include_once('_class/simpleCMS.php');
  $obj = new simpleCMS();
  $obj-&gt;host = 'database.host.net';
  $obj-&gt;username = 'DB1234567';
  $obj-&gt;password = 'DBpassword';
  $obj-&gt;table = 'DB1234567';
  $obj-&gt;connect();

  if ( $_POST )
    $obj-&gt;write($_POST);

  echo ( $_GET['admin'] == 1 ) ? $obj-&gt;display_admin() : $obj-&gt;display_public();

?&gt;</code></pre>
<p>First and foremost, we have to include the class using the <a href="http://us2.php.net/manual/en/function.include-once.php"><tt>include_once()</tt></a> function. Then, we have to instantiate our object so that our code knows what’s going on. Third, we set all of those variables we talked about toward the beginning of this tutorial. You’ll have to replace all of those values with the information you get from your own server or hosting company. And fourth, we connect to our database using the <tt>connect()</tt> method.</p>
<p>After we’ve connected to the database, we check to see if any <tt>$_POST</tt> information exists. This is because we’re using the same file for input, processing, and display of information. If anything was passed via <tt>$_POST</tt>, we run the <tt>write()</tt> function to validate it and save it to the database. Then, we use some shorthand trickery to run a conditional statement. In essence, we’re saying, “IF <tt>$_GET['admin']</tt> is set to 1, then show the form using <tt>display_admin()</tt>, OR ELSE show me the stored entries using <tt>display_public()</tt>.”</p>
<p>And that’s it! Once you get a feel for it, this sort of basic programming will allow you to start exercising <em>total control</em> over websites you build, whether you decide to really dig in and build your own CMS framework or just improve an existing CMS by, say, <a href="http://codex.wordpress.org/Writing_a_Plugin">writing a Wordpress plugin</a>.</p>
<p>Really, when it comes to modern web design, you should have at least <em>some</em> understanding of how things are working behind the curtain—understanding <em>how</em> a site works will better enable you to design sites that have a more fluid integration of form and function. And besides, adding PHP and MySQL to your <em>curriculum vitae</em> definitely won’t hurt your credibility…</p>
<p>Source: http://css-tricks.com/php-for-beginners-building-your-first-simple-cms/</p>
]]></content:encoded>
			<wfw:commentRss>http://www.dotflow.nl/build-your-own-simple-cms/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>The Evolution of web 3.0</title>
		<link>http://www.dotflow.nl/the-evolution-of-web-3-0/</link>
		<comments>http://www.dotflow.nl/the-evolution-of-web-3-0/#comments</comments>
		<pubDate>Tue, 29 Dec 2009 12:57:46 +0000</pubDate>
		<dc:creator>Wouter Meeuwisse</dc:creator>
				<category><![CDATA[Tips]]></category>
		<category><![CDATA[evolution]]></category>
		<category><![CDATA[web3.0]]></category>
		<category><![CDATA[Webdesign]]></category>
		<category><![CDATA[www]]></category>

		<guid isPermaLink="false">http://www.dotflow.nl/?p=373</guid>
		<description><![CDATA[Great slideshow about the evolution of web 3.0: http://www.slideshare.net/mstrickland/the-evolution-of-web-30
I tried to embed but had some problems adding it to the post )-,:
]]></description>
			<content:encoded><![CDATA[<p>Great slideshow about the evolution of web 3.0: <a href="http://www.slideshare.net/mstrickland/the-evolution-of-web-30">http://www.slideshare.net/mstrickland/the-evolution-of-web-30</a></p>
<p>I tried to embed but had some problems adding it to the post )-,:</p>
]]></content:encoded>
			<wfw:commentRss>http://www.dotflow.nl/the-evolution-of-web-3-0/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Use 25gb of free skydrive space on your desktop</title>
		<link>http://www.dotflow.nl/use-25gb-of-free-skydrive-space-on-your-desktop/</link>
		<comments>http://www.dotflow.nl/use-25gb-of-free-skydrive-space-on-your-desktop/#comments</comments>
		<pubDate>Fri, 18 Dec 2009 18:33:55 +0000</pubDate>
		<dc:creator>Wouter Meeuwisse</dc:creator>
				<category><![CDATA[Tips]]></category>
		<category><![CDATA[Tricks]]></category>
		<category><![CDATA[cloud computing]]></category>
		<category><![CDATA[drive]]></category>
		<category><![CDATA[online storage]]></category>
		<category><![CDATA[skydrive]]></category>
		<category><![CDATA[storage]]></category>

		<guid isPermaLink="false">http://www.dotflow.nl/?p=362</guid>
		<description><![CDATA[
Source: http://maketecheasier.com
Dropbox, Sugarsync and Zumodrive are some of the great online storage services that you can use to store, sync and access your files right from your desktop. However, they only offer a meagre free storage space (less than 5GB) that may not even be enough to backup your MP3 files. On the other hand,Windows [...]]]></description>
			<content:encoded><![CDATA[<p style="margin: 0in; margin-bottom: .0001pt; line-height: 15.0pt;"><span style="font-size: 10.0pt; font-family: Verdana; color: black;"><a href="http://www.dotflow.nl/wp-content/uploads/2009/12/1skydrive-logo.jpg"><img class="alignleft size-full wp-image-363" title="1skydrive-logo" src="http://www.dotflow.nl/wp-content/uploads/2009/12/1skydrive-logo.jpg" alt="1skydrive-logo" width="245" height="168" /></a></span></p>
<p style="margin: 0in; margin-bottom: .0001pt; line-height: 15.0pt;"><strong>Source:</strong> http://maketecheasier.com</p>
<p style="margin: 0in; margin-bottom: .0001pt; line-height: 15.0pt;"><span style="font-size: 10.0pt; font-family: Verdana; color: black;">Dropbox, Sugarsync and Zumodrive are some of the great online storage services that you can use to store, sync and access your files right from your desktop. However, they only offer a meagre free storage space (less than 5GB) that may not even be enough to backup your MP3 files. On the other hand,<a style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-position: initial initial; background-repeat: initial initial;" href="http://skydrive.live.com" target="_blank"><span style="color: #26558e;">Windows Live Skydrive</span></a><span> </span>provides a whopping 25GB of online storage space, much more than the storage space of some of the 1st generation netbook and it is even enough to install a whole operating system on it. As good as it seems, there is one limitation. Skydrive is purely web based and does not provide any desktop-based application for you to sync your computer data with the cloud.</span></p>
<p style="margin: 0in; margin-bottom: .0001pt; line-height: 15.0pt;"><span style="font-size: 10.0pt; font-family: Verdana; color: black;">If you are looking to access your Skydrive account from your desktop,<span> </span><a style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-position: initial initial; background-repeat: initial initial;" href="http://www.gladinet.com/" target="_blank"><span style="color: #26558e;">Gladinet</span></a><span> </span>is the application for you.</span></p>
<p style="margin: 0in; margin-bottom: .0001pt; line-height: 15.0pt;"><span style="font-size: 10.0pt; font-family: Verdana; color: black;">Gladinet Cloud Desktop is an application that allows you to mount cloud storage services as local folders and integrates online applications with the local desktop. It supports services such as Amazon S3,  Google docs, Picasa, Adrive, and of course Skydrive.</span></p>
<p style="margin: 0in; margin-bottom: .0001pt; line-height: 15.0pt;"><span style="font-size: 10.0pt; font-family: Verdana; color: black;">Download<span> </span><a style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-position: initial initial; background-repeat: initial initial;" href="http://www.gladinet.com/p/download.htm" target="_blank"><span style="color: #26558e;">Gladinet</span></a><span> </span>Starter edition (FREE)</span></p>
<p style="margin-top: 0in; margin-right: 0in; margin-bottom: 7.5pt; margin-left: 0in; line-height: 15.0pt;"><span style="font-size: 10.0pt; font-family: Verdana; color: black;">Start the installer. At the end of the installation, it will prompt you to do some initial configuration.</span></p>
<p style="margin-top: 0in; margin-right: 0in; margin-bottom: 7.5pt; margin-left: 0in; line-height: 15.0pt;"><span style="font-size: 10.0pt; font-family: Verdana; color: black;">Select a drive letter for Gladinet to mount to. Make sure that the drive letter does not conflict with any existing drive. Click OK to continue.</span></p>
<p style="margin-top: 0in; margin-right: 0in; margin-bottom: 7.5pt; margin-left: 0in; line-height: 15.0pt;"><span style="font-size: 10.0pt; font-family: Verdana; color: black;"><a href="http://www.dotflow.nl/wp-content/uploads/2009/12/2gladinet1.jpg"><img class="alignnone size-medium wp-image-364" title="2gladinet1" src="http://www.dotflow.nl/wp-content/uploads/2009/12/2gladinet1-256x300.jpg" alt="2gladinet1" width="256" height="300" /></a></span></p>
<p style="margin-top: 0in; margin-right: 0in; margin-bottom: 7.5pt; margin-left: 0in; line-height: 15.0pt;"><span style="font-size: 10.0pt; font-family: Verdana; color: black;">In the next window, click on the Mount Disk Storage</span></p>
<p style="margin-top: 0in; margin-right: 0in; margin-bottom: 7.5pt; margin-left: 0in; line-height: 15.0pt;"><span style="font-size: 10.0pt; font-family: Verdana; color: black;"><a href="http://www.dotflow.nl/wp-content/uploads/2009/12/3gladinet2.jpg"><img class="alignnone size-medium wp-image-365" title="3gladinet2" src="http://www.dotflow.nl/wp-content/uploads/2009/12/3gladinet2-300x174.jpg" alt="3gladinet2" width="300" height="174" /></a></span></p>
<p style="margin: 0in; margin-bottom: .0001pt; line-height: 15.0pt;"><span style="font-size: 10.0pt; font-family: Verdana; color: black;">Under the service provider, select<span> </span><em><span style="font-family: Verdana;">Windows Live Skydrive</span></em><span> </span>from the dropdown bar. Of course, if you are using other storage services, you can also configure them the same way here.</span></p>
<p style="margin: 0in; margin-bottom: .0001pt; line-height: 15.0pt;"><span style="font-size: 10.0pt; font-family: Verdana; color: black;"><a href="http://www.dotflow.nl/wp-content/uploads/2009/12/4gladinet3.jpg"><img class="alignnone size-medium wp-image-366" title="4gladinet3" src="http://www.dotflow.nl/wp-content/uploads/2009/12/4gladinet3-299x300.jpg" alt="4gladinet3" width="299" height="300" /></a></span></p>
<p style="margin-top: 0in; margin-right: 0in; margin-bottom: 7.5pt; margin-left: 0in; line-height: 15.0pt;"><span style="font-size: 10.0pt; font-family: Verdana; color: black;">Enter your login credential.</span></p>
<p style="margin-top: 0in; margin-right: 0in; margin-bottom: 7.5pt; margin-left: 0in; line-height: 15.0pt;"><span style="font-size: 10.0pt; font-family: Verdana; color: black;"><a href="http://www.dotflow.nl/wp-content/uploads/2009/12/5gladinet4.jpg"><img class="alignnone size-medium wp-image-367" title="5gladinet4" src="http://www.dotflow.nl/wp-content/uploads/2009/12/5gladinet4-296x300.jpg" alt="5gladinet4" width="296" height="300" /></a></span></p>
<p style="margin-top: 0in; margin-right: 0in; margin-bottom: 7.5pt; margin-left: 0in; line-height: 15.0pt;"><span style="font-size: 10.0pt; font-family: Verdana; color: black;">You can now access your Skydrive right from the desktop.</span></p>
<p style="margin-top: 0in; margin-right: 0in; margin-bottom: 7.5pt; margin-left: 0in; line-height: 15.0pt;"><span style="font-size: 10.0pt; font-family: Verdana; color: black;"><a href="http://www.dotflow.nl/wp-content/uploads/2009/12/6skydrivedesktop.jpg"><img class="alignnone size-medium wp-image-368" title="6skydrivedesktop" src="http://www.dotflow.nl/wp-content/uploads/2009/12/6skydrivedesktop-300x213.jpg" alt="6skydrivedesktop" width="300" height="213" /></a></span></p>
<p style="margin-top: 0in; margin-right: 0in; margin-bottom: 7.5pt; margin-left: 0in; line-height: 15.0pt;"><span style="font-size: 10.0pt; font-family: Verdana; color: black;">The advantage of using Gladinet is that it mount the online storage as a network drive in your system (and it does not do a sync), so even if you computer has less than 25GB of space, you can still mount it and access all your data (you will need an Internet connection though). In addition, the ability to mount several online storage services mean that you won’t ever face the problem of insufficient storage space again.</span></p>
<p style="margin-top: 0in; margin-right: 0in; margin-bottom: 7.5pt; margin-left: 0in; line-height: 15.0pt;"><span style="font-size: 10.0pt; font-family: Verdana; color: black;">Gladinet comes with a Starter edition (free), Professional edition ($29.99) and a Premium edition that is due to be released soon. Personally, I have found that the Starter edition contains features more than I ever need and is sufficient for me. However, if you require more features, you can always upgrade to the Professional edition easily.</span></p>
]]></content:encoded>
			<wfw:commentRss>http://www.dotflow.nl/use-25gb-of-free-skydrive-space-on-your-desktop/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Google Chrome Extensions</title>
		<link>http://www.dotflow.nl/google-chrome-extensions/</link>
		<comments>http://www.dotflow.nl/google-chrome-extensions/#comments</comments>
		<pubDate>Wed, 09 Dec 2009 13:14:03 +0000</pubDate>
		<dc:creator>Wouter Meeuwisse</dc:creator>
				<category><![CDATA[News]]></category>
		<category><![CDATA[Tips]]></category>
		<category><![CDATA[chrome]]></category>
		<category><![CDATA[extensions]]></category>
		<category><![CDATA[firebug]]></category>
		<category><![CDATA[google chrome]]></category>
		<category><![CDATA[webdeveloper]]></category>

		<guid isPermaLink="false">http://www.dotflow.nl/?p=358</guid>
		<description><![CDATA[Google launched there chrome extensions beta for a while now. I used Chrome for browsing, but i used firefox to check my developed websites (using webdeveloper toolkit, screengrab, eyedropper, xray etc.).
Someone finally came up with a good (beta) extensions that looks like firebug and has some features like webdeveloper toolkit in firefox.
To use extensions first [...]]]></description>
			<content:encoded><![CDATA[<p>Google launched there chrome extensions beta for a while now. I used Chrome for browsing, but i used firefox to check my developed websites (using webdeveloper toolkit, screengrab, eyedropper, xray etc.).</p>
<p>Someone finally came up with a good (beta) extensions that looks like firebug and has some features like webdeveloper toolkit in firefox.</p>
<p>To use extensions first upgrade or install (to) <a title="chrome download" href="http://chrome.google.com" target="_blank">the newest version of Chrome.</a></p>
<p>Now you can install extensions. Some of my favorites:</p>
<ul>
<li><a title="webdeveloper mini" href="https://chrome.google.com/extensions/search?q=webdeveloper" target="_blank">Webdeveloper MINI</a> (firebug, validate  html/css, view source)</li>
<li><a title="speedtracer" href="https://chrome.google.com/extensions/detail/ognampngfcbddbfemdapefohjiobgbdl" target="_blank">Speedtracer</a> (check the speed of webapps)</li>
<li><a title="gmail checker" href="https://chrome.google.com/extensions/detail/mihcahmgecmbnbcchbopgniflfhgnkff" target="_blank">Gmail checker</a></li>
<li><a title="wave checker" href="https://chrome.google.com/extensions/detail/aphncaagnlabkeipnbbicmcahnamibgb" target="_blank">Google Wave checker</a></li>
<li><a title="facebook" href="https://chrome.google.com/extensions/detail/lkdedmbpkaiahjjibfdmpoefffnbdkli" target="_blank">Facebook for Chrome</a></li>
<li><a title="twitterbar" href="https://chrome.google.com/extensions/detail/pbadgdglepgngpoeijdgicjccomadekm" target="_blank">Twitterbar</a></li>
<li><a title="more extensions" href="https://chrome.google.com/extensions/" target="_blank">More extensions</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.dotflow.nl/google-chrome-extensions/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Make your long dropdown menu scrollable</title>
		<link>http://www.dotflow.nl/make-your-long-dropdown-menu-scrollable/</link>
		<comments>http://www.dotflow.nl/make-your-long-dropdown-menu-scrollable/#comments</comments>
		<pubDate>Tue, 08 Dec 2009 20:07:18 +0000</pubDate>
		<dc:creator>Wouter Meeuwisse</dc:creator>
				<category><![CDATA[Tricks]]></category>
		<category><![CDATA[dropdown]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[long dropdown]]></category>
		<category><![CDATA[scrollable]]></category>

		<guid isPermaLink="false">http://www.dotflow.nl/?p=354</guid>
		<description><![CDATA[The problem with long dropdowns is that the dropdown itself can go below the “fold” of the website. That is, below the visible area of the browser window. So in order to access those menu items down below, you need to scroll your browser window. Those lower menu items are totally inaccessible, because to use [...]]]></description>
			<content:encoded><![CDATA[<p>The problem with long dropdowns is that the dropdown itself can go below the “fold” of the website. That is, below the visible area of the browser window. So in order to access those menu items down below, you need to scroll your browser window. Those lower menu items are totally inaccessible, because to use the browser scrollbar means mousing off the menu (and probably having it close).</p>
<p>View the demo with a (possible) solution here: <a title="long-dropdown" href="http://www.dotflow.nl/demo/long-dropdown.html" target="_blank">http://www.dotflow.nl/demo/long-dropdown.html</a></p>
<h2>jQuery makes it tick</h2>
<p>First download the latest version of jQuery or put this in your header:</p>
<pre>&lt;script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'&gt;&lt;/script&gt;</pre>
<ol>
<li>Set a maximum height to the dropdowns</li>
<li>On hover, reveal the submenu</li>
<li>Calculate a speed multiplier based on the height of the submenu</li>
<li>Watch for mouse movement in the menu</li>
<li>Scroll the menu with the mouse movement, based on the multiplier</li>
<li>On mouse out, close the menu</li>
</ol>
<p>Now add this javascript to your website and link it to your file (I called it: jquery.dropdown.js)</p>
<p><strong>Javascript</strong></p>
<pre>var maxHeight = 400;

$(function(){

    $(".dropdown &gt; li").hover(function() {

         var $container = $(this),
             $list = $container.find("ul"),
             $anchor = $container.find("a"),
             height = $list.height() * 1.1,       // make sure there is enough room at the bottom
             multiplier = height / maxHeight;     // needs to move faster if list is taller

        // need to save height here so it can revert on mouseout
        $container.data("origHeight", $container.height());

        // so it can retain it's rollover color all the while the dropdown is open
        $anchor.addClass("hover");

        // make sure dropdown appears directly below parent list item
        $list
            .show()
            .css({
                paddingTop: $container.data("origHeight")
            });

        // don't do any animation if list shorter than max
        if (multiplier &gt; 1) {
            $container
                .css({
                    height: maxHeight,
                    overflow: "hidden"
                })
                .mousemove(function(e) {
                    var offset = $container.offset();
                    var relativeY = ((e.pageY - offset.top) * multiplier) - ($container.data("origHeight") * multiplier);
                    if (relativeY &gt; $container.data("origHeight")) {
                        $list.css("top", -relativeY + $container.data("origHeight"));
                    };
                });
        }

    }, function() {

        var $el = $(this);

        // put things back to normal
        $el
            .height($(this).data("origHeight"))
            .find("ul")
            .css({ top: 0 })
            .hide()
            .end()
            .find("a")
            .removeClass("hover");

    });

    // Add down arrow only to menu items with submenus
    $(".dropdown &gt; li:has('ul')").each(function() {
        $(this).find("a:first").append("<img src="images/down-arrow.png" alt="" />");
    });

});</pre>
<p><strong>HTML</strong></p>
<pre>&lt;ul&gt;
 &lt;li&gt;&lt;a href="#"&gt;Really Tall Menu&lt;/a&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="#"&gt;Artificial Turf&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Benches &amp;amp; Bleachers&lt;/a&gt;&lt;/li&gt;

 &lt;li&gt;&lt;a href="#"&gt;Communication Devices&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Dugouts&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Fencing &amp;amp; Windscreen&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Floor Protectors&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Foul Poles&lt;/a&gt;&lt;/li&gt;

 &lt;li&gt;&lt;a href="#"&gt;Netting&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Outdoor Furniture &amp;amp; Storage&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Outdoor Signs&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Padding&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Scoreboards&lt;/a&gt;&lt;/li&gt;

 &lt;li&gt;&lt;a href="#"&gt;Shade Structures&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Artificial Turf&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Benches &amp;amp; Bleachers&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Communication Devices&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Dugouts&lt;/a&gt;&lt;/li&gt;

 &lt;li&gt;&lt;a href="#"&gt;Fencing &amp;amp; Windscreen&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Floor Protectors&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Foul Poles&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Netting&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Outdoor Furniture &amp;amp; Storage&lt;/a&gt;&lt;/li&gt;

 &lt;li&gt;&lt;a href="#"&gt;Outdoor Signs&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Padding&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Scoreboards&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Shade Structures&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Artificial Turf&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Benches &amp;amp; Bleachers&lt;/a&gt;&lt;/li&gt;

 &lt;li&gt;&lt;a href="#"&gt;Communication Devices&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Dugouts&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Fencing &amp;amp; Windscreen&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Floor Protectors&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Foul Poles&lt;/a&gt;&lt;/li&gt;

 &lt;li&gt;&lt;a href="#"&gt;Netting&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Outdoor Furniture &amp;amp; Storage&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Outdoor Signs&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Padding&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Scoreboards&lt;/a&gt;&lt;/li&gt;

 &lt;li&gt;&lt;a href="#"&gt;Shade Structures&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Kinda Tall Menu&lt;/a&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="#"&gt;Artificial Turf&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Benches &amp;amp; Bleachers&lt;/a&gt;&lt;/li&gt;

 &lt;li&gt;&lt;a href="#"&gt;Communication Devices&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Dugouts&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Fencing &amp;amp; Windscreen&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Floor Protectors&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Foul Poles&lt;/a&gt;&lt;/li&gt;

 &lt;li&gt;&lt;a href="#"&gt;Netting&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Outdoor Furniture &amp;amp; Storage&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Outdoor Signs&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Padding&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Scoreboards&lt;/a&gt;&lt;/li&gt;

 &lt;/ul&gt;
 &lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Average Menu&lt;/a&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="#"&gt;Artificial Turf&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Benches &amp;amp; Bleachers&lt;/a&gt;&lt;/li&gt;

 &lt;li&gt;&lt;a href="#"&gt;Communication Devices&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Dugouts&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Fencing &amp;amp; Windscreen&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;No Menu&lt;/a&gt;

 &lt;/li&gt;
 &lt;/ul&gt;</pre>
<p><strong>CSS</strong></p>
<pre>*{ margin: 0; padding: 0; }
body{ font: 15px Helvetica, Sans-Serif; }
html{ overflow-y: scroll; }
#container { width: 720px; margin: 25px auto; }
p{ margin: 0 0 8px 0; }
a{ text-decoration: none; }
img{ vertical-align: middle; }
a img{ border: 0; 180}
ul{ list-style: none; }
h1{ margin: 0 0 10px 0; }

/*
	LEVEL ONE
*/
ul.dropdown{ position: relative; width: 100%; }
ul.dropdown li{ font-weight: bold; float: left; width: 180px; background: #ccc; position: relative; }
ul.dropdown a:hover{ color: #000; }
ul.dropdown li a{ display: block; padding: 20px 8px; color: #222; position: relative; z-index: 2000; }
ul.dropdown li a:hover, ul.dropdown li a.hover { background: #F3D673; position: relative; }

/*
	LEVEL TWO
*/
ul.dropdown ul{ display: none; position: absolute; top: 0; left: 0; width: 180px; z-index: 1000; }
ul.dropdown ul li{ font-weight: normal; background: #f6f6f6; color: #000; border-bottom: 1px solid #ccc; }
ul.dropdown ul li a{ display: block; background: #eee !important; }
ul.dropdown ul li a:hover{ display: block; background: #F3D673 !important; }</pre>
<p>That&#8217;s it! <a title="long-dropdown" href="http://www.dotflow.nl/demo/long-dropdown.html" target="_blank">you can view the demo here</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.dotflow.nl/make-your-long-dropdown-menu-scrollable/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

