<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="http://feeds.feedburner.com/~d/styles/rss2full.xsl" type="text/xsl" media="screen"?><?xml-stylesheet href="http://feeds.feedburner.com/~d/styles/itemcontent.css" type="text/css" media="screen"?><!-- generator="wordpress/2.3.3" --><rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:creativeCommons="http://backend.userland.com/creativeCommonsRssModule" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" version="2.0">

<channel>
	<title>ProDevTips - dev notes and tutorials</title>
	<link>http://www.prodevtips.com</link>
	<description>Dev related notes, tutorials and anecdotes</description>
	<pubDate>Thu, 20 Nov 2008 09:24:31 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.3.3</generator>
	<language>en</language>
			<creativeCommons:license>http://creativecommons.org/licenses/by-nc-nd/3.0/</creativeCommons:license><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" href="http://feeds.feedburner.com/prodevtips/LVkG" type="application/rss+xml" /><feedburner:emailServiceId>1295018</feedburner:emailServiceId><feedburner:feedburnerHostname>http://www.feedburner.com</feedburner:feedburnerHostname><item>
		<title>Detecting Flash player version with JavaScript</title>
		<link>http://feeds.feedburner.com/~r/prodevtips/LVkG/~3/459380186/</link>
		<comments>http://www.prodevtips.com/2008/11/20/detecting-flash-player-version-with-javascript/#comments</comments>
		<pubDate>Thu, 20 Nov 2008 09:24:31 +0000</pubDate>
		<dc:creator>Henrik</dc:creator>
		
		<category><![CDATA[Javascript]]></category>

		<category><![CDATA[flash]]></category>

		<guid isPermaLink="false">http://www.prodevtips.com/2008/11/20/detecting-flash-player-version-with-javascript/</guid>
		<description><![CDATA[Copyright © 2008 http://www.prodevtips.com. Visit the original article at http://www.prodevtips.com/2008/11/20/detecting-flash-player-version-with-javascript/.The other day I needed something to check which version of flash player a user has. It&#8217;s all connected to the new problems with uploading that were introduced in Flash player version 10. For some reason the solution we are using needs to know if the [...]]]></description>
			<content:encoded><![CDATA[Copyright © 2008 <a href="http://www.prodevtips.com">http://www.prodevtips.com</a>. Visit the original article at <a href="http://www.prodevtips.com/2008/11/20/detecting-flash-player-version-with-javascript/">http://www.prodevtips.com/2008/11/20/detecting-flash-player-version-with-javascript/</a>.<br /><p>The other day I needed something to check which version of flash player a user has. It&#8217;s all connected to the new problems with uploading that were introduced in Flash player version 10. For some reason the solution we are using needs to know if the player is of version 10 or lower in order to act accordingly. For some reason this will solve a problem with IE6 having a player version lower than 10, don&#8217;t ask me why, I&#8217;m not the one implementing this. My only mission was to detect version.</p>
<p>I knew I had seen something to this effect in the <a href="http://jquery.lukelutman.com/plugins/flash/">jQuery Flash plugin</a>. And yes, the below <strong>getFlashVersion</strong> function has been ripped out of there without any changes.</p>
<pre><code class="html">&lt;html&gt;
&lt;head&gt;&lt;title&gt;Flash version detection&lt;/title&gt;
&lt;script&gt;</code></pre>
<pre><code class="javascript">function getFlashVersion(){
  // ie
  try {
    try {
      // avoid fp6 minor version lookup issues
      // see: http://blog.deconcept.com/2006/01/11/getvariable-setvariable-crash-internet-explorer-flash-6/
      var axo = new ActiveXObject('ShockwaveFlash.ShockwaveFlash.6');
      try { axo.AllowScriptAccess = 'always'; }
      catch(e) { return '6,0,0'; }
    } catch(e) {}
    return new ActiveXObject('ShockwaveFlash.ShockwaveFlash').GetVariable('$version').replace(/\D+/g, ',').match(/^,?(.+),?$/)[1];
  // other browsers
  } catch(e) {
    try {
      if(navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin){
        return (navigator.plugins["Shockwave Flash 2.0"] || navigator.plugins["Shockwave Flash"]).description.replace(/\D+/g, ",").match(/^,?(.+),?$/)[1];
      }
    } catch(e) {}
  }
  return '0,0,0';
}

var version = getFlashVersion().split(',').shift();
if(version &lt; 10){
  alert("Lower than 10");
}else{
  alert("10 or higher");
}</code></pre>
<pre><code class="html">&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<h3>Related Posts</h3>
<ul class="related_post">
<li><a href="http://www.prodevtips.com/2007/12/07/multiple-uploads-with-jquery-and-flex-or-flash/" title="Multiple uploads with jQuery and Flex or Flash">Multiple uploads with jQuery and Flex or Flash</a></li>
<li><a href="http://www.prodevtips.com/2008/11/10/just-java-ajax/" title="Just Java AJAX!">Just Java AJAX!</a></li>
<li><a href="http://www.prodevtips.com/2008/10/31/flash-10-and-jquery-multi-file-uploader/" title="Flash 10 and jQuery multi-file uploader ">Flash 10 and jQuery multi-file uploader </a></li>
<li><a href="http://www.prodevtips.com/2008/10/23/prototyping-with-javascript/" title="Prototyping with JavaScript">Prototyping with JavaScript</a></li>
<li><a href="http://www.prodevtips.com/2008/10/21/jquery-plugin-html-decode-and-encode/" title="jQuery plugin - HTML decode and encode">jQuery plugin - HTML decode and encode</a></li>
</ul>






	<a rel="nofollow" target="_blank" href="http://digg.com/submit?phase=2&amp;url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F20%2Fdetecting-flash-player-version-with-javascript%2F&amp;title=Detecting%20Flash%20player%20version%20with%20JavaScript" title="Digg"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/digg.png" title="Digg" alt="Digg" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://del.icio.us/post?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F20%2Fdetecting-flash-player-version-with-javascript%2F&amp;title=Detecting%20Flash%20player%20version%20with%20JavaScript" title="del.icio.us"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/delicious.png" title="del.icio.us" alt="del.icio.us" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://blogmarks.net/my/new.php?mini=1&amp;simple=1&amp;url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F20%2Fdetecting-flash-player-version-with-javascript%2F&amp;title=Detecting%20Flash%20player%20version%20with%20JavaScript" title="blogmarks"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/blogmarks.png" title="blogmarks" alt="blogmarks" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://reddit.com/submit?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F20%2Fdetecting-flash-player-version-with-javascript%2F&amp;title=Detecting%20Flash%20player%20version%20with%20JavaScript" title="Reddit"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/reddit.png" title="Reddit" alt="Reddit" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.simpy.com/simpy/LinkAdd.do?href=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F20%2Fdetecting-flash-player-version-with-javascript%2F&amp;title=Detecting%20Flash%20player%20version%20with%20JavaScript" title="Simpy"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/simpy.png" title="Simpy" alt="Simpy" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F20%2Fdetecting-flash-player-version-with-javascript%2F&amp;title=Detecting%20Flash%20player%20version%20with%20JavaScript" title="StumbleUpon"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/stumbleupon.png" title="StumbleUpon" alt="StumbleUpon" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://technorati.com/faves?add=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F20%2Fdetecting-flash-player-version-with-javascript%2F" title="Technorati"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/technorati.png" title="Technorati" alt="Technorati" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.dzone.com/links/add.html?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F20%2Fdetecting-flash-player-version-with-javascript%2F&amp;title=Detecting%20Flash%20player%20version%20with%20JavaScript" title="description"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/dzone.png" title="description" alt="description" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://ma.gnolia.com/bookmarklet/add?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F20%2Fdetecting-flash-player-version-with-javascript%2F&amp;title=Detecting%20Flash%20player%20version%20with%20JavaScript" title="Ma.gnolia"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/magnolia.png" title="Ma.gnolia" alt="Ma.gnolia" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://slashdot.org/bookmark.pl?title=Detecting%20Flash%20player%20version%20with%20JavaScript&amp;url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F20%2Fdetecting-flash-player-version-with-javascript%2F" title="Slashdot"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/slashdot.png" title="Slashdot" alt="Slashdot" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://sphinn.com/submit.php?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F20%2Fdetecting-flash-player-version-with-javascript%2F&amp;title=Detecting%20Flash%20player%20version%20with%20JavaScript" title="Sphinn"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/sphinn.png" title="Sphinn" alt="Sphinn" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.spurl.net/spurl.php?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F20%2Fdetecting-flash-player-version-with-javascript%2F&amp;title=Detecting%20Flash%20player%20version%20with%20JavaScript" title="Spurl"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/spurl.png" title="Spurl" alt="Spurl" class="sociable-hovers" /></a>


<br/><br/>
<p><a href="http://feeds.feedburner.com/~a/prodevtips/LVkG?a=iznBAm"><img src="http://feeds.feedburner.com/~a/prodevtips/LVkG?i=iznBAm" border="0"></img></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=shpnN"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=shpnN" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=Ulsdn"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=Ulsdn" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=43Orn"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=43Orn" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=FY0Kn"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=FY0Kn" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=aKZXN"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=aKZXN" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=mf4PN"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=mf4PN" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=UT8in"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=UT8in" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.prodevtips.com/2008/11/20/detecting-flash-player-version-with-javascript/feed/</wfw:commentRss>
		<feedburner:awareness>http://api.feedburner.com/awareness/1.0/GetItemData?uri=prodevtips/LVkG&amp;itemurl=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F20%2Fdetecting-flash-player-version-with-javascript%2F</feedburner:awareness><feedburner:origLink>http://www.prodevtips.com/2008/11/20/detecting-flash-player-version-with-javascript/</feedburner:origLink></item>
		<item>
		<title>A noob and Ruby on Rails 2</title>
		<link>http://feeds.feedburner.com/~r/prodevtips/LVkG/~3/452736117/</link>
		<comments>http://www.prodevtips.com/2008/11/14/a-noob-and-ruby-on-rails-2/#comments</comments>
		<pubDate>Fri, 14 Nov 2008 09:09:01 +0000</pubDate>
		<dc:creator>Henrik</dc:creator>
		
		<category><![CDATA[Ruby]]></category>

		<category><![CDATA[Ruby on Rails]]></category>

		<category><![CDATA[ActiveRecord]]></category>

		<category><![CDATA[RoR]]></category>

		<category><![CDATA[scaffolding]]></category>

		<guid isPermaLink="false">http://www.prodevtips.com/2008/11/14/a-noob-and-ruby-on-rails-2/</guid>
		<description><![CDATA[Copyright © 2008 http://www.prodevtips.com. Visit the original article at http://www.prodevtips.com/2008/11/14/a-noob-and-ruby-on-rails-2/.I&#8217;ve just started to try and learn RoR for real. I had read a few chapters in Agile Web Development with Rails on an earlier occasion and I thought it was great so I started to go through it, despite the fact that it&#8217;s covering an [...]]]></description>
			<content:encoded><![CDATA[Copyright © 2008 <a href="http://www.prodevtips.com">http://www.prodevtips.com</a>. Visit the original article at <a href="http://www.prodevtips.com/2008/11/14/a-noob-and-ruby-on-rails-2/">http://www.prodevtips.com/2008/11/14/a-noob-and-ruby-on-rails-2/</a>.<br /><p>I&#8217;ve just started to try and learn RoR for real. I had read a few chapters in Agile Web Development with Rails on an earlier occasion and I thought it was great so I started to go through it, despite the fact that it&#8217;s covering an earlier version of Rails.</p>
<p>To begin with I couldn&#8217;t run rails as a command to start a project, I&#8217;m pretty used to that now, adding this to <strong>/home/henrik/.bashrc</strong> and restarting the terminal takes care of it:</p>
<pre><code>export PATH=$PATH:/var/lib/gems/1.8/bin:</code></pre>
<p>And then I was able to do:</p>
<pre><code>rails project -d mysql</code></pre>
<p>I&#8217;m a noob and lazy too so I just use my XAMPP install when it comes to the database. My config/database.yml looks like this under <strong>development</strong>:</p>
<pre><code>development:
  adapter: mysql
  encoding: utf8
  database: project_development
  username: root
  password:
  socket: /opt/lampp/var/mysql/mysql.sock</code></pre>
<p>It was not until now that I ran into some real trouble. Since I&#8217;m new at this I don&#8217;t know what types there are, what is a <strong>varchar</strong> for instance, a <strong>string</strong> or maybe <strong>text</strong>, is a float <strong>float</strong> or <strong>double</strong>?. Therefore my strategy was to simply create the structures in phpMyAdmin and then somehow create the models automatically from the database information. That turned out to be somewhat messy. The below info also applies if you&#8217;re sitting with some kind of legacy monster.</p>
<p>I found a good writeup by <a href="http://fairleads.blogspot.com/2007/12/rails-20-and-scaffolding-step-by-step.html">Sean Lynch</a> on how things are now in Rails 2. It seemed I was not going to get around the need to specify types after all through the new way Rails is doing scaffolding (which is awesome if you know what types to use).</p>
<p>During the search for some automatic scaffolding script that would read the field names of a table and use them with the correct type I found the <a href="http://magicmodels.rubyforge.org/magic_model_generator/">magic model creator</a> by <a href="http://drnicwilliams.com/">Dr. Nic</a>. What a bonus! I ran it right away:</p>
<pre><code>./script/generate magic_model</code></pre>
<p>Still that didn&#8217;t solve the basic problem of automatically creating the views from our tables. Eventually I ended up doing it myself but during my search I found a nice <a href="http://scaffolding-ext.rubyforge.org/">scaffolding script</a> by <a href="http://code.jeremyevans.net/">Jeremy Evans</a>, which I think is mimicking the way it worked in Rails 1. That is not what I wanted though, which is automatic generation of static scaffolds, not dynamic.</p>
<p>Anyway I first do for instance <strong>ruby script/generate scaffold Package</strong>, that will generate a completely useless empty view, it will create the basic controller though, so I just put this in the <strong>index</strong> method:</p>
<pre><code class="ruby">Package.columns_hash.each do |field, info|
  puts field + ":" + info.type.to_s + " " if field != "id"
end</code></pre>
<p>Running <strong>/products</strong> will generate the info I need in the terminal, simply copying and pasting that gives me:</p>
<pre><code>ruby script/generate scaffold Package label:string cost:decimal</code></pre>
<p>After that I deleted the basic scaffolding and reran with the above line. I know, in this case the payoff is small but imagine a table with 50 different fields, then we&#8217;re talking. If I had had a massive legacy database I would have tried to automate the above procedure somehow, but I don&#8217;t so it works for me, it doesn&#8217;t involve too much manual work and I got to learn ActiveRecord types from the output.<br />
    <script type="text/javascript"><!--
      google_ad_client = "pub-4780703337538969";
      google_alternate_color = "dedcdc";
      google_ad_width = 728;
      google_ad_height = 90;
      google_ad_format = "728x90_as";
      google_ad_type = "text_image";
      google_color_border = "dedcdc";
      google_color_link = "993333";
      google_color_bg = "dedcdc";
      google_color_text = "000000";
      google_color_url = "003366";
      //-->
   </script><br />
  <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
  </script><br />
<h3>Related Posts</h3>
<ul class="related_post">
<li><a href="http://www.prodevtips.com/2008/11/09/scraping-and-converting-data-with-hpricot-and-json-in-ruby/" title="Scraping and Converting Data with Hpricot and JSON in Ruby">Scraping and Converting Data with Hpricot and JSON in Ruby</a></li>
<li><a href="http://www.prodevtips.com/2008/11/09/converting-folder-tree-using-iconv-with-ruby/" title="Converting Folder Tree using iconv with Ruby">Converting Folder Tree using iconv with Ruby</a></li>
<li><a href="http://www.prodevtips.com/2008/10/05/managing-escaping-when-indenting/" title="Managing escaping when indenting">Managing escaping when indenting</a></li>
<li><a href="http://www.prodevtips.com/2008/10/04/calling-ruby-scripts-from-pico-lisp/" title="Calling Ruby scripts from Pico Lisp">Calling Ruby scripts from Pico Lisp</a></li>
<li><a href="http://www.prodevtips.com/2008/09/29/automatic-comments/" title="Automatic multiple line comments">Automatic multiple line comments</a></li>
</ul>






	<a rel="nofollow" target="_blank" href="http://digg.com/submit?phase=2&amp;url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F14%2Fa-noob-and-ruby-on-rails-2%2F&amp;title=A%20noob%20and%20Ruby%20on%20Rails%202" title="Digg"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/digg.png" title="Digg" alt="Digg" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://del.icio.us/post?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F14%2Fa-noob-and-ruby-on-rails-2%2F&amp;title=A%20noob%20and%20Ruby%20on%20Rails%202" title="del.icio.us"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/delicious.png" title="del.icio.us" alt="del.icio.us" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://blogmarks.net/my/new.php?mini=1&amp;simple=1&amp;url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F14%2Fa-noob-and-ruby-on-rails-2%2F&amp;title=A%20noob%20and%20Ruby%20on%20Rails%202" title="blogmarks"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/blogmarks.png" title="blogmarks" alt="blogmarks" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://reddit.com/submit?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F14%2Fa-noob-and-ruby-on-rails-2%2F&amp;title=A%20noob%20and%20Ruby%20on%20Rails%202" title="Reddit"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/reddit.png" title="Reddit" alt="Reddit" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.simpy.com/simpy/LinkAdd.do?href=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F14%2Fa-noob-and-ruby-on-rails-2%2F&amp;title=A%20noob%20and%20Ruby%20on%20Rails%202" title="Simpy"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/simpy.png" title="Simpy" alt="Simpy" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F14%2Fa-noob-and-ruby-on-rails-2%2F&amp;title=A%20noob%20and%20Ruby%20on%20Rails%202" title="StumbleUpon"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/stumbleupon.png" title="StumbleUpon" alt="StumbleUpon" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://technorati.com/faves?add=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F14%2Fa-noob-and-ruby-on-rails-2%2F" title="Technorati"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/technorati.png" title="Technorati" alt="Technorati" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.dzone.com/links/add.html?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F14%2Fa-noob-and-ruby-on-rails-2%2F&amp;title=A%20noob%20and%20Ruby%20on%20Rails%202" title="description"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/dzone.png" title="description" alt="description" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://ma.gnolia.com/bookmarklet/add?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F14%2Fa-noob-and-ruby-on-rails-2%2F&amp;title=A%20noob%20and%20Ruby%20on%20Rails%202" title="Ma.gnolia"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/magnolia.png" title="Ma.gnolia" alt="Ma.gnolia" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://slashdot.org/bookmark.pl?title=A%20noob%20and%20Ruby%20on%20Rails%202&amp;url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F14%2Fa-noob-and-ruby-on-rails-2%2F" title="Slashdot"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/slashdot.png" title="Slashdot" alt="Slashdot" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://sphinn.com/submit.php?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F14%2Fa-noob-and-ruby-on-rails-2%2F&amp;title=A%20noob%20and%20Ruby%20on%20Rails%202" title="Sphinn"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/sphinn.png" title="Sphinn" alt="Sphinn" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.spurl.net/spurl.php?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F14%2Fa-noob-and-ruby-on-rails-2%2F&amp;title=A%20noob%20and%20Ruby%20on%20Rails%202" title="Spurl"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/spurl.png" title="Spurl" alt="Spurl" class="sociable-hovers" /></a>


<br/><br/>
<p><a href="http://feeds.feedburner.com/~a/prodevtips/LVkG?a=YPzc9x"><img src="http://feeds.feedburner.com/~a/prodevtips/LVkG?i=YPzc9x" border="0"></img></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=8LStN"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=8LStN" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=lNHDn"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=lNHDn" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=hLzkn"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=hLzkn" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=C7NTn"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=C7NTn" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=Hhl3N"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=Hhl3N" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=o0hoN"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=o0hoN" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=fkmCn"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=fkmCn" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.prodevtips.com/2008/11/14/a-noob-and-ruby-on-rails-2/feed/</wfw:commentRss>
		<feedburner:awareness>http://api.feedburner.com/awareness/1.0/GetItemData?uri=prodevtips/LVkG&amp;itemurl=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F14%2Fa-noob-and-ruby-on-rails-2%2F</feedburner:awareness><feedburner:origLink>http://www.prodevtips.com/2008/11/14/a-noob-and-ruby-on-rails-2/</feedburner:origLink></item>
		<item>
		<title>Historic day for me and Linux</title>
		<link>http://feeds.feedburner.com/~r/prodevtips/LVkG/~3/450886815/</link>
		<comments>http://www.prodevtips.com/2008/11/12/historic-day-for-me-and-linux/#comments</comments>
		<pubDate>Wed, 12 Nov 2008 17:04:33 +0000</pubDate>
		<dc:creator>Henrik</dc:creator>
		
		<category><![CDATA[Linux]]></category>

		<category><![CDATA[DTAC]]></category>

		<category><![CDATA[GPRS]]></category>

		<category><![CDATA[intrepid]]></category>

		<category><![CDATA[Salomon]]></category>

		<category><![CDATA[ubuntu]]></category>

		<guid isPermaLink="false">http://www.prodevtips.com/2008/11/12/historic-day-for-me-and-linux/</guid>
		<description><![CDATA[Copyright © 2008 http://www.prodevtips.com. Visit the original article at http://www.prodevtips.com/2008/11/12/historic-day-for-me-and-linux/.I&#8217;m writing in the middle of the jungle, using a GPRS modem on Linux, read on and you&#8217;ll understand why that&#8217;s such a massive milestone. Up until now there has been only one single reason why I&#8217;ve still used Windows, my Salomon modem wouldn&#8217;t work on [...]]]></description>
			<content:encoded><![CDATA[Copyright © 2008 <a href="http://www.prodevtips.com">http://www.prodevtips.com</a>. Visit the original article at <a href="http://www.prodevtips.com/2008/11/12/historic-day-for-me-and-linux/">http://www.prodevtips.com/2008/11/12/historic-day-for-me-and-linux/</a>.<br /><p>I&#8217;m writing in the middle of the jungle, using a GPRS modem on Linux, read on and you&#8217;ll understand why that&#8217;s such a massive milestone. Up until now there has been only one single reason why I&#8217;ve still used Windows, my <a href="http://www.buycoms.com/advertorial/110/SOLOMON/SOLOMON.html">Salomon</a> modem wouldn&#8217;t work on Linux.</p>
<p>10 minutes ago I accidentally fired up my laptop with Intrepid Ibex, with the modem connected (in hindsight I wonder why I never tried explicitly, I guess I had mentally given up). The Salomon modem is one of those things that just never would work, until now. I was just waiting for the OS to load so I could choose reboot (to boot into Windows) without pressing the OFF button.</p>
<p>Surprisingly I noticed a message in the status bar claiming that a &#8220;mobile broadband device&#8221; had been detected. So I click the network icon and select Mobile Broadband -> Configure&#8230; And I see the Thai ISPs, DTAC, AIS and True. Wow! After selecting DTAC (my ISP) I simply couldn&#8217;t believe it when I was able to connect to my Gmail.</p>
<p>That is why this day is historic in my life, it is the first day that Linux beat Windows on the extremely important hardware compatibility front. Using Intrepid on my <a href="http://www.prodevtips.com/2008/10/16/installing-intrepid-ibex-ubuntu-810/">Aspire 2920</a> doesn&#8217;t require a single driver CD or hours of work or similar such bullshit which Windows needs, for instance for the GPRS in the form of drivers with a custom software. </p>
<p>Simply put, Linux just works for the first time, more than Windows. I will now format the Windows drive and never look back! I&#8217;ve been waiting for this moment a long time and I think all you people that are working with hardware related stuff for Linux are awesome! You did it, you won, you kicked the living shit out of the biggest reason for MS existence. I&#8217;m awed.</p>
<p>Where do I go to donate?</p>
<p>Fucking amazing, almost as crazy as a black president!<br />
<h3>Related Posts</h3>
<ul class="related_post">
<li><a href="http://www.prodevtips.com/2008/10/16/installing-intrepid-ibex-ubuntu-810/" title="Installing Intrepid Ibex - Ubuntu 8.10">Installing Intrepid Ibex - Ubuntu 8.10</a></li>
<li><a href="http://www.prodevtips.com/2008/07/02/bitchware-and-envyware/" title="Bitchware and Envyware">Bitchware and Envyware</a></li>
<li><a href="http://www.prodevtips.com/2008/06/17/hardy-heron-on-acer-aspire-2920/" title="Hardy Heron on Acer Aspire 2920">Hardy Heron on Acer Aspire 2920</a></li>
<li><a href="http://www.prodevtips.com/2008/01/14/merb-and-datamapper-on-ubuntu-with-xampp/" title="Merb and Datamapper on Ubuntu with XAMPP">Merb and Datamapper on Ubuntu with XAMPP</a></li>
<li><a href="http://www.prodevtips.com/2008/01/01/from-dual-boot-to-virtual-machine-with-ubuntu-and-window/" title="From dual boot to virtual machine with Ubuntu and Windows">From dual boot to virtual machine with Ubuntu and Windows</a></li>
</ul>






	<a rel="nofollow" target="_blank" href="http://digg.com/submit?phase=2&amp;url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F12%2Fhistoric-day-for-me-and-linux%2F&amp;title=Historic%20day%20for%20me%20and%20Linux" title="Digg"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/digg.png" title="Digg" alt="Digg" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://del.icio.us/post?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F12%2Fhistoric-day-for-me-and-linux%2F&amp;title=Historic%20day%20for%20me%20and%20Linux" title="del.icio.us"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/delicious.png" title="del.icio.us" alt="del.icio.us" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://blogmarks.net/my/new.php?mini=1&amp;simple=1&amp;url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F12%2Fhistoric-day-for-me-and-linux%2F&amp;title=Historic%20day%20for%20me%20and%20Linux" title="blogmarks"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/blogmarks.png" title="blogmarks" alt="blogmarks" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://reddit.com/submit?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F12%2Fhistoric-day-for-me-and-linux%2F&amp;title=Historic%20day%20for%20me%20and%20Linux" title="Reddit"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/reddit.png" title="Reddit" alt="Reddit" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.simpy.com/simpy/LinkAdd.do?href=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F12%2Fhistoric-day-for-me-and-linux%2F&amp;title=Historic%20day%20for%20me%20and%20Linux" title="Simpy"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/simpy.png" title="Simpy" alt="Simpy" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F12%2Fhistoric-day-for-me-and-linux%2F&amp;title=Historic%20day%20for%20me%20and%20Linux" title="StumbleUpon"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/stumbleupon.png" title="StumbleUpon" alt="StumbleUpon" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://technorati.com/faves?add=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F12%2Fhistoric-day-for-me-and-linux%2F" title="Technorati"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/technorati.png" title="Technorati" alt="Technorati" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.dzone.com/links/add.html?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F12%2Fhistoric-day-for-me-and-linux%2F&amp;title=Historic%20day%20for%20me%20and%20Linux" title="description"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/dzone.png" title="description" alt="description" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://ma.gnolia.com/bookmarklet/add?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F12%2Fhistoric-day-for-me-and-linux%2F&amp;title=Historic%20day%20for%20me%20and%20Linux" title="Ma.gnolia"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/magnolia.png" title="Ma.gnolia" alt="Ma.gnolia" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://slashdot.org/bookmark.pl?title=Historic%20day%20for%20me%20and%20Linux&amp;url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F12%2Fhistoric-day-for-me-and-linux%2F" title="Slashdot"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/slashdot.png" title="Slashdot" alt="Slashdot" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://sphinn.com/submit.php?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F12%2Fhistoric-day-for-me-and-linux%2F&amp;title=Historic%20day%20for%20me%20and%20Linux" title="Sphinn"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/sphinn.png" title="Sphinn" alt="Sphinn" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.spurl.net/spurl.php?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F12%2Fhistoric-day-for-me-and-linux%2F&amp;title=Historic%20day%20for%20me%20and%20Linux" title="Spurl"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/spurl.png" title="Spurl" alt="Spurl" class="sociable-hovers" /></a>


<br/><br/>
<p><a href="http://feeds.feedburner.com/~a/prodevtips/LVkG?a=iQ51VJ"><img src="http://feeds.feedburner.com/~a/prodevtips/LVkG?i=iQ51VJ" border="0"></img></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=2RlCN"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=2RlCN" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=Emwzn"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=Emwzn" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=bivxn"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=bivxn" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=yDcWn"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=yDcWn" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=p3DhN"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=p3DhN" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=Gzv3N"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=Gzv3N" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=r57Jn"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=r57Jn" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.prodevtips.com/2008/11/12/historic-day-for-me-and-linux/feed/</wfw:commentRss>
		<feedburner:awareness>http://api.feedburner.com/awareness/1.0/GetItemData?uri=prodevtips/LVkG&amp;itemurl=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F12%2Fhistoric-day-for-me-and-linux%2F</feedburner:awareness><feedburner:origLink>http://www.prodevtips.com/2008/11/12/historic-day-for-me-and-linux/</feedburner:origLink></item>
		<item>
		<title>jQuery UI draggable and resizable combination</title>
		<link>http://feeds.feedburner.com/~r/prodevtips/LVkG/~3/450329299/</link>
		<comments>http://www.prodevtips.com/2008/11/12/jquery-ui-draggable-and-resizable-combination/#comments</comments>
		<pubDate>Wed, 12 Nov 2008 05:35:59 +0000</pubDate>
		<dc:creator>Henrik</dc:creator>
		
		<category><![CDATA[HTML + CSS]]></category>

		<category><![CDATA[Javascript]]></category>

		<category><![CDATA[jQuery]]></category>

		<category><![CDATA[css]]></category>

		<category><![CDATA[draggables]]></category>

		<category><![CDATA[html]]></category>

		<category><![CDATA[jquery]]></category>

		<category><![CDATA[jquery ui]]></category>

		<category><![CDATA[resizables]]></category>

		<guid isPermaLink="false">http://www.prodevtips.com/2008/11/12/jquery-ui-draggable-and-resizable-combination/</guid>
		<description><![CDATA[Copyright © 2008 http://www.prodevtips.com. Visit the original article at http://www.prodevtips.com/2008/11/12/jquery-ui-draggable-and-resizable-combination/.

 



I&#8217;ve just taken a look at how a rich interface for creating invitations could be created with jQuery UI&#8217;s draggables and resizables.
The goal here is to allow two basic elements to be dragged and resized in a work area to which they are limited, texts [...]]]></description>
			<content:encoded><![CDATA[Copyright © 2008 <a href="http://www.prodevtips.com">http://www.prodevtips.com</a>. Visit the original article at <a href="http://www.prodevtips.com/2008/11/12/jquery-ui-draggable-and-resizable-combination/">http://www.prodevtips.com/2008/11/12/jquery-ui-draggable-and-resizable-combination/</a>.<br /><div class="image_right">
<script type="text/javascript"><!--
    google_ad_client = "pub-4780703337538969";
    google_alternate_color = "dedcdc";
    google_ad_width = 250;
    google_ad_height = 250;
    google_ad_format = "250x250_as";
    google_ad_type = "text_image";
    google_color_border = "dedcdc";
    google_color_link = "993333";
    google_color_bg = "dedcdc";
    google_color_text = "000000";
    google_color_url = "003366";
    //-->
 </script><br />
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<p>I&#8217;ve just taken a look at how a rich interface for creating invitations could be created with jQuery UI&#8217;s <a href="http://docs.jquery.com/UI/Draggables">draggables</a> and <a href="http://docs.jquery.com/UI/Resizables/resizable#options">resizables</a>.</p>
<p>The goal here is to allow two basic elements to be dragged and resized in a work area to which they are limited, texts and images. They are not to be allowed to be dragged or scaled outside of the work area.</p>
<p>Each element should have two icons attached to it, a dragger which when moved will make the parent text/image element to move with it, and a close button which will remove the element.</p>
<p><a href="http://www.prodevtips.com/demos/uitest/demo1.php">Here is a demo of the below code</a> (works only in firefox, probably some stylesheet problem).</p>
<p><strong>Update</strong>: I just found a bug, I&#8217;ll leave it as an exercise to try and find it and fix it <img src='http://www.prodevtips.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>Let&#8217;s walk the code from top to bottom.</p>
<pre><code class="html">&lt;html&gt;
&lt;head&gt;&lt;title&gt;jQuery UI&lt;/title&gt;
&lt;link rel="stylesheet" href="style.css" type="text/css" /&gt;
&lt;link rel="stylesheet" href="themes/flora/flora.css" type="text/css" /&gt;
&lt;link rel="stylesheet" href="themes/flora/flora.resizable.css" type="text/css" /&gt;
&lt;script src="jquery-1.2.6.js"&gt;&lt;/script&gt;
&lt;script src="ui/ui.core.js"&gt;&lt;/script&gt;
&lt;script src="ui/ui.draggable.js"&gt;&lt;/script&gt;
&lt;script src="ui/ui.resizable.js"&gt;&lt;/script&gt;
&lt;script&gt;</code></pre>
<p>We include everything we need, note the flora theme CSS, they&#8217;re needed to style the frames of the resizables.</p>
<pre><code class="javascript">jQuery.fn.stayInBox = function(box){
	var thisPos 		= this.position();
	var boxPos 			= box.position();
	var diff_right 	= (thisPos.left + this.width()) 	- (boxPos.left + box.width());
	var diff_bottom = (thisPos.top 	+ this.height()) 	- (boxPos.top + box.height());
	var diff_left 	= boxPos.left 	- thisPos.left;
	var diff_top 		= boxPos.top 		- thisPos.top;
	
	if(diff_right &gt; 0)
		this.width(this.width() - diff_right);
		
	if(diff_bottom &gt; 0)
		this.height(this.height() - diff_bottom);
		
	if(diff_left &gt; 0)
		this.css("left", thisPos.left + diff_left);
		
	if(diff_top &gt; 0)
		this.css("top", thisPos.top + diff_top);
}</code></pre>
<p>Here we extend jQuery (effectively creating a small plugin) with a function that will constrain the given element to a box (DIV) we pass as the single argument. Note that I didn&#8217;t bother with collections here, see the <a href="http://www.prodevtips.com/2008/10/21/jquery-plugin-html-decode-and-encode/">jQuery HTML encode and decode plugin tutorial</a> for more information on how to implement that. I really tried to make <strong>containment</strong> as an option to resizable work here but I couldn&#8217;t get it to work somehow.</p>
<p>Anyway, here we check if the position + width/height is more than the box&#8217;s dito, if they are we scale them back to fit within the box. We also check if we are outside to the right and top, if we are we simply move to stay within bounds.</p>
<p>Note the use of jQuery position(), I think that one was originally part of the dimensions plugin but is now integrated as a basic utility in UI. I found documentation on the jQuery homepage during developing this but now that I want to link to it I can&#8217;t find it. Well whatever, it simply returns {top: distance from top of parent, left: distance from left of parent}.</p>
<pre><code class="javascript">var elCount = 0;

function newCommon(tpl_id, sub_tag){
	$("div[id*='el_div_']").css("position", "absolute"); // 1
	
	var newDraggable = $("#"+tpl_id).clone().css("zIndex", elCount + 100).attr("id", "el_div_" + elCount)
								.addClass("resizable ui-resizable").prependTo("#workarea"); // 2
	
	newDraggable.find(".delete").click(function(){
		$(this).parent().remove(); // 3
	});
	
	var dragger = newDraggable.find(".dragger"); // 4
	dragger.mousedown(function(){ newDraggable.draggable({containment: "#workarea"}); });
	dragger.mouseup(function(){ newDraggable.draggable("disable"); });
	elCount++;
	return newDraggable;
}</code></pre>
<p><script type="text/javascript"><!--
    google_ad_client = "pub-4780703337538969";
    google_alternate_color = "dedcdc";
    google_ad_width = 250;
    google_ad_height = 250;
    google_ad_format = "250x250_as";
    google_ad_type = "text_image";
    google_color_border = "dedcdc";
    google_color_link = "993333";
    google_color_bg = "dedcdc";
    google_color_text = "000000";
    google_color_url = "003366";
    //-->
 </script><br />
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script><br />
<strong>ElCount</strong> is used to keep count of our draggables/resizables. <strong>NewCommon()</strong> contains all logic that is common to both text objects and image objects.</p>
<p>1.) We begin with setting all other objects&#8217; position types to &#8220;absolute&#8221;. The reason for doing this is that when we put a new object on stage we don&#8217;t want the others to move as a result. As it happens resizable and/or draggable sets this attribute to &#8220;relative&#8221; all the time and we need to temporarily change it here lest we upset the positions of the other objects.</p>
<p>2.) We clone a DIV template already on stage (and hidden at the bottom of the document). There are two of course which we will get to in a moment, a DIV containing a text area and one containing an image. The <strong>tpl_id</strong> argument keeps track of which one we are currently working with, <strong>sub_tag</strong> keeps track of the type of tag the main content object contains, in our case &#8220;<strong>img</strong>&#8221; or &#8220;<strong>textarea</strong>&#8220;. We then set the z-index so that they don&#8217;t occupy the same layer, the new id with the help of elCount to get a unique one, add the flora themes in the form of <strong>ui-resizable</strong> and finally we add it as the first element in the work area.</p>
<p>3.) The delete button, will remove the element in question via <strong>parent()</strong> and <strong>remove()</strong>.</p>
<p>4.) We find the sub-div to be used as a handle for the dragging by the <strong>dragger</strong> class. On mouse down we start dragging of course with the work area as container (we can&#8217;t drag outside of it), on mouse up we stop of course. We finish of by increasing the object count with one and return our newly created draggable/resizable.</p>
<pre><code class="javascript">var newImage = function(){
	var draggable = newCommon("img_div_tpl", "img");
	
	var subEl = draggable.find("img");
	draggable.width(subEl.width()).height(subEl.height()); // 1
	// 2
	draggable.resizable({
		aspectRatio: true,
		handles: "all",
		minWidth: 150,
		minHeight: 150,
		ghost: true,
		stop: function(){
			$(this).stayInBox($("#workarea"));
			$(this).find("img").width($(this).width()).height($(this).height());
		}
	});
}</code></pre>
<p>So this is the one we call when we want to create an image object, <strong>newCommon</strong> is the one we just went through above.</p>
<p>1.) We resize the draggable/resizable to fit the resolution of the contained image.</p>
<p>2.) Firing up resizing, we turn on aspectRatio to keep the image&#8217;s aspect ratio, the user will probably not want warped images. We set handles all around the resizable to create a kind of border which will be used for resizing. Ghosting will make the object transparent when resizing, ie we are not resizing in real time when this one is turned on. The real resizing will take place when we stop, that&#8217;s why we also have our own stop function which will resize the image to be the area of the resizable (the opposite of #1). I tried to make <strong>alsoResize</strong> work here but couldn&#8217;t, that&#8217;s why I ended up with the customized on stop logic.</p>
<pre><code class="javascript">var newText = function(){
	var draggable = newCommon("txt_div_tpl", "textarea");
	draggable.resizable({
		handles: "all",
		minWidth: 160,
		minHeight: 160,
		ghost: true,
		stop: function(){
			$(this).stayInBox($("#workarea"));
			var margin = $(this).find(".dragger").width() * 2;
			$(this).find("textarea").width($(this).width() - margin).height($(this).height() - margin);
		}
	});
}</code></pre>
<p>Similar to <strong>newImage</strong>() except we now maintain a margin when we scale the contained text area.</p>
<pre><code class="javascript">$(document).ready(function(){
	$("#new_text").click(newText);
	$("#new_image").click(newImage);
	$("#templates").hide();
});</code></pre>
<p>At last, the ready() logic, not much to say here, note that we hide the templates right away.</p>
<pre><code class="html">&lt;/script&gt;
&lt;button id="new_text"&gt;New Text Field&lt;/button&gt;&lt;button id="new_image"&gt;New Image&lt;/button&gt;
&lt;div id="workarea" class="workspace"&gt;
&lt;div id="templates"&gt;
	&lt;div id="img_div_tpl" class="img_start"&gt;
		&lt;img src="black_reuben.png" class="img_img_start"&gt;
		&lt;div class="delete"&gt;&amp;nbsp;&lt;/div&gt;
		&lt;div class="dragger"&gt;&amp;nbsp;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div id="txt_div_tpl" class="txt_start"&gt;
		&lt;textarea class="txt_area_start"&gt;jQuery UI, JavaScript, CSS, Ajax, programming, jobs, job, work, Ruby, Rails, PHP, Java, contractor, outsourcing.&lt;/textarea&gt;
		&lt;div class="delete"&gt;&amp;nbsp;&lt;/div&gt;
		&lt;div class="dragger"&gt;&amp;nbsp;&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<p>The templates, buttons and the work area, finally the CSS:</p>
<pre><code class="css">.workspace{
	border:2px black solid; 
	width:500px; 
	height:500px;
}

.txt_area_start{
	width:160px;
	height:160px;
	background: #fff;
	margin: 20px 20px 20px 20px;
	border:0;
	overflow: hidden;
}

.img_img_start{
	margin: 0;
	border:0;
}

.img_start{
	position: absolute;
	top: 0;
	left: 0;
}

.txt_start{
	width:200px;
	height:200px;
	position: absolute;
	top: 0;
	left: 0;
}

.dragger{
	background: url(images/drag.png);
	width:20px; 
	height:20px;
	position: absolute;
	bottom: -15;
	left: -15;
	
}

.resizer{
	background: url(images/zoom.png);
	clear: both;
	width:20px; 
	height:20px;
	position: absolute;
	bottom: 0;
	right: 0;
}

.delete{
	background: url(images/delete.png);
	width:20px; 
	height:20px;
	position: absolute;
	top: -15;
	right: -15;
}</code></pre>
<p>Note how we manage displaying the dragger and delete button on the outside of the parent div by setting the margins, I&#8217;ve got no idea if this works in IE or not.<br />
<h3>Related Posts</h3>
<ul class="related_post">
<li><a href="http://www.prodevtips.com/2008/08/25/adding-search-with-jquery-and-check-boxes/" title="Adding search with jQuery and Check Boxes">Adding search with jQuery and Check Boxes</a></li>
<li><a href="http://www.prodevtips.com/2008/07/06/jquery-treeview-with-modx-wayfinder/" title="jQuery Treeview with MODx Wayfinder">jQuery Treeview with MODx Wayfinder</a></li>
<li><a href="http://www.prodevtips.com/2007/12/11/jquery-tablesorter-sorting-tables-is-easy/" title="jQuery tablesorter - sorting tables is easy">jQuery tablesorter - sorting tables is easy</a></li>
<li><a href="http://www.prodevtips.com/2008/09/15/working-with-typo3-42-and-templavoila-137/" title="Working with TYPO3 4.2 and TemplaVoila 1.3.7">Working with TYPO3 4.2 and TemplaVoila 1.3.7</a></li>
<li><a href="http://www.prodevtips.com/2008/09/15/styling-lists-and-boxes-with-round-corners/" title="Styling Lists and Boxes with Round Corners">Styling Lists and Boxes with Round Corners</a></li>
</ul>






	<a rel="nofollow" target="_blank" href="http://digg.com/submit?phase=2&amp;url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F12%2Fjquery-ui-draggable-and-resizable-combination%2F&amp;title=jQuery%20UI%20draggable%20and%20resizable%20combination" title="Digg"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/digg.png" title="Digg" alt="Digg" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://del.icio.us/post?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F12%2Fjquery-ui-draggable-and-resizable-combination%2F&amp;title=jQuery%20UI%20draggable%20and%20resizable%20combination" title="del.icio.us"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/delicious.png" title="del.icio.us" alt="del.icio.us" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://blogmarks.net/my/new.php?mini=1&amp;simple=1&amp;url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F12%2Fjquery-ui-draggable-and-resizable-combination%2F&amp;title=jQuery%20UI%20draggable%20and%20resizable%20combination" title="blogmarks"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/blogmarks.png" title="blogmarks" alt="blogmarks" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://reddit.com/submit?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F12%2Fjquery-ui-draggable-and-resizable-combination%2F&amp;title=jQuery%20UI%20draggable%20and%20resizable%20combination" title="Reddit"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/reddit.png" title="Reddit" alt="Reddit" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.simpy.com/simpy/LinkAdd.do?href=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F12%2Fjquery-ui-draggable-and-resizable-combination%2F&amp;title=jQuery%20UI%20draggable%20and%20resizable%20combination" title="Simpy"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/simpy.png" title="Simpy" alt="Simpy" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F12%2Fjquery-ui-draggable-and-resizable-combination%2F&amp;title=jQuery%20UI%20draggable%20and%20resizable%20combination" title="StumbleUpon"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/stumbleupon.png" title="StumbleUpon" alt="StumbleUpon" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://technorati.com/faves?add=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F12%2Fjquery-ui-draggable-and-resizable-combination%2F" title="Technorati"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/technorati.png" title="Technorati" alt="Technorati" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.dzone.com/links/add.html?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F12%2Fjquery-ui-draggable-and-resizable-combination%2F&amp;title=jQuery%20UI%20draggable%20and%20resizable%20combination" title="description"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/dzone.png" title="description" alt="description" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://ma.gnolia.com/bookmarklet/add?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F12%2Fjquery-ui-draggable-and-resizable-combination%2F&amp;title=jQuery%20UI%20draggable%20and%20resizable%20combination" title="Ma.gnolia"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/magnolia.png" title="Ma.gnolia" alt="Ma.gnolia" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://slashdot.org/bookmark.pl?title=jQuery%20UI%20draggable%20and%20resizable%20combination&amp;url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F12%2Fjquery-ui-draggable-and-resizable-combination%2F" title="Slashdot"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/slashdot.png" title="Slashdot" alt="Slashdot" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://sphinn.com/submit.php?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F12%2Fjquery-ui-draggable-and-resizable-combination%2F&amp;title=jQuery%20UI%20draggable%20and%20resizable%20combination" title="Sphinn"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/sphinn.png" title="Sphinn" alt="Sphinn" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.spurl.net/spurl.php?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F12%2Fjquery-ui-draggable-and-resizable-combination%2F&amp;title=jQuery%20UI%20draggable%20and%20resizable%20combination" title="Spurl"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/spurl.png" title="Spurl" alt="Spurl" class="sociable-hovers" /></a>


<br/><br/>
<p><a href="http://feeds.feedburner.com/~a/prodevtips/LVkG?a=XcoXXM"><img src="http://feeds.feedburner.com/~a/prodevtips/LVkG?i=XcoXXM" border="0"></img></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=o9rgN"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=o9rgN" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=EIFGn"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=EIFGn" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=xGEfn"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=xGEfn" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=7fHdn"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=7fHdn" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=dSmVN"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=dSmVN" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=5NX8N"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=5NX8N" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=ta0Hn"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=ta0Hn" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.prodevtips.com/2008/11/12/jquery-ui-draggable-and-resizable-combination/feed/</wfw:commentRss>
		<feedburner:awareness>http://api.feedburner.com/awareness/1.0/GetItemData?uri=prodevtips/LVkG&amp;itemurl=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F12%2Fjquery-ui-draggable-and-resizable-combination%2F</feedburner:awareness><feedburner:origLink>http://www.prodevtips.com/2008/11/12/jquery-ui-draggable-and-resizable-combination/</feedburner:origLink></item>
		<item>
		<title>Just Java AJAX!</title>
		<link>http://feeds.feedburner.com/~r/prodevtips/LVkG/~3/448034803/</link>
		<comments>http://www.prodevtips.com/2008/11/10/just-java-ajax/#comments</comments>
		<pubDate>Mon, 10 Nov 2008 04:57:23 +0000</pubDate>
		<dc:creator>Henrik</dc:creator>
		
		<category><![CDATA[Java]]></category>

		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://www.prodevtips.com/2008/11/10/just-java-ajax/</guid>
		<description><![CDATA[Copyright © 2008 http://www.prodevtips.com. Visit the original article at http://www.prodevtips.com/2008/11/10/just-java-ajax/.Followed by &#8220;AJAX in Java alone! JavaScript coding not required. Try it.&#8221; states an Adsense ad. 
I&#8217;m not clicking it  
However if I saw something like &#8220;Just JavaScript Java, JavaScript alone! Java coding not required.&#8221; I might be inclined to click the link.
Related Posts

Detecting Flash [...]]]></description>
			<content:encoded><![CDATA[Copyright © 2008 <a href="http://www.prodevtips.com">http://www.prodevtips.com</a>. Visit the original article at <a href="http://www.prodevtips.com/2008/11/10/just-java-ajax/">http://www.prodevtips.com/2008/11/10/just-java-ajax/</a>.<br /><p>Followed by &#8220;AJAX in Java alone! JavaScript coding not required. Try it.&#8221; states an Adsense ad. </p>
<p>I&#8217;m not clicking it <img src='http://www.prodevtips.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>However if I saw something like &#8220;Just JavaScript Java, JavaScript alone! Java coding not required.&#8221; I might be inclined to click the link.<br />
<h3>Related Posts</h3>
<ul class="related_post">
<li><a href="http://www.prodevtips.com/2008/11/20/detecting-flash-player-version-with-javascript/" title="Detecting Flash player version with JavaScript">Detecting Flash player version with JavaScript</a></li>
<li><a href="http://www.prodevtips.com/2008/10/23/prototyping-with-javascript/" title="Prototyping with JavaScript">Prototyping with JavaScript</a></li>
<li><a href="http://www.prodevtips.com/2008/10/21/jquery-plugin-html-decode-and-encode/" title="jQuery plugin - HTML decode and encode">jQuery plugin - HTML decode and encode</a></li>
<li><a href="http://www.prodevtips.com/2008/09/30/integrating-with-jquery-adding-pagination/" title="Integrating with jQuery - Adding Pagination">Integrating with jQuery - Adding Pagination</a></li>
<li><a href="http://www.prodevtips.com/2008/09/08/image-popups-with-jquery/" title="Image popups with jQuery">Image popups with jQuery</a></li>
</ul>






	<a rel="nofollow" target="_blank" href="http://digg.com/submit?phase=2&amp;url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F10%2Fjust-java-ajax%2F&amp;title=Just%20Java%20AJAX%21" title="Digg"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/digg.png" title="Digg" alt="Digg" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://del.icio.us/post?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F10%2Fjust-java-ajax%2F&amp;title=Just%20Java%20AJAX%21" title="del.icio.us"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/delicious.png" title="del.icio.us" alt="del.icio.us" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://blogmarks.net/my/new.php?mini=1&amp;simple=1&amp;url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F10%2Fjust-java-ajax%2F&amp;title=Just%20Java%20AJAX%21" title="blogmarks"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/blogmarks.png" title="blogmarks" alt="blogmarks" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://reddit.com/submit?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F10%2Fjust-java-ajax%2F&amp;title=Just%20Java%20AJAX%21" title="Reddit"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/reddit.png" title="Reddit" alt="Reddit" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.simpy.com/simpy/LinkAdd.do?href=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F10%2Fjust-java-ajax%2F&amp;title=Just%20Java%20AJAX%21" title="Simpy"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/simpy.png" title="Simpy" alt="Simpy" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F10%2Fjust-java-ajax%2F&amp;title=Just%20Java%20AJAX%21" title="StumbleUpon"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/stumbleupon.png" title="StumbleUpon" alt="StumbleUpon" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://technorati.com/faves?add=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F10%2Fjust-java-ajax%2F" title="Technorati"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/technorati.png" title="Technorati" alt="Technorati" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.dzone.com/links/add.html?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F10%2Fjust-java-ajax%2F&amp;title=Just%20Java%20AJAX%21" title="description"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/dzone.png" title="description" alt="description" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://ma.gnolia.com/bookmarklet/add?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F10%2Fjust-java-ajax%2F&amp;title=Just%20Java%20AJAX%21" title="Ma.gnolia"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/magnolia.png" title="Ma.gnolia" alt="Ma.gnolia" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://slashdot.org/bookmark.pl?title=Just%20Java%20AJAX%21&amp;url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F10%2Fjust-java-ajax%2F" title="Slashdot"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/slashdot.png" title="Slashdot" alt="Slashdot" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://sphinn.com/submit.php?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F10%2Fjust-java-ajax%2F&amp;title=Just%20Java%20AJAX%21" title="Sphinn"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/sphinn.png" title="Sphinn" alt="Sphinn" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.spurl.net/spurl.php?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F10%2Fjust-java-ajax%2F&amp;title=Just%20Java%20AJAX%21" title="Spurl"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/spurl.png" title="Spurl" alt="Spurl" class="sociable-hovers" /></a>


<br/><br/>
<p><a href="http://feeds.feedburner.com/~a/prodevtips/LVkG?a=9qdpsv"><img src="http://feeds.feedburner.com/~a/prodevtips/LVkG?i=9qdpsv" border="0"></img></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=vJkON"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=vJkON" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=41xtn"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=41xtn" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=EsZpn"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=EsZpn" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=tYb9n"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=tYb9n" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=rN6VN"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=rN6VN" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=4DiON"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=4DiON" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=lHHln"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=lHHln" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.prodevtips.com/2008/11/10/just-java-ajax/feed/</wfw:commentRss>
		<feedburner:awareness>http://api.feedburner.com/awareness/1.0/GetItemData?uri=prodevtips/LVkG&amp;itemurl=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F10%2Fjust-java-ajax%2F</feedburner:awareness><feedburner:origLink>http://www.prodevtips.com/2008/11/10/just-java-ajax/</feedburner:origLink></item>
		<item>
		<title>Scraping and Converting Data with Hpricot and JSON in Ruby</title>
		<link>http://feeds.feedburner.com/~r/prodevtips/LVkG/~3/447365453/</link>
		<comments>http://www.prodevtips.com/2008/11/09/scraping-and-converting-data-with-hpricot-and-json-in-ruby/#comments</comments>
		<pubDate>Sun, 09 Nov 2008 12:46:45 +0000</pubDate>
		<dc:creator>Henrik</dc:creator>
		
		<category><![CDATA[Ruby]]></category>

		<category><![CDATA[hpricot]]></category>

		<category><![CDATA[json]]></category>

		<category><![CDATA[scraping]]></category>

		<guid isPermaLink="false">http://www.prodevtips.com/2008/11/09/scraping-and-converting-data-with-hpricot-and-json-in-ruby/</guid>
		<description><![CDATA[Copyright © 2008 http://www.prodevtips.com. Visit the original article at http://www.prodevtips.com/2008/11/09/scraping-and-converting-data-with-hpricot-and-json-in-ruby/.

 



Did you ever wonder how Warren Buffet  managed to get that rich? Pure luck my friend, the man was born with perfect timing, one year after the stock market crash of 1929, at the beginning of the great depression.
Warren is a value investor, his [...]]]></description>
			<content:encoded><![CDATA[Copyright © 2008 <a href="http://www.prodevtips.com">http://www.prodevtips.com</a>. Visit the original article at <a href="http://www.prodevtips.com/2008/11/09/scraping-and-converting-data-with-hpricot-and-json-in-ruby/">http://www.prodevtips.com/2008/11/09/scraping-and-converting-data-with-hpricot-and-json-in-ruby/</a>.<br /><div class="image_right">
<script type="text/javascript"><!--
    google_ad_client = "pub-4780703337538969";
    google_alternate_color = "dedcdc";
    google_ad_width = 250;
    google_ad_height = 250;
    google_ad_format = "250x250_as";
    google_ad_type = "text_image";
    google_color_border = "dedcdc";
    google_color_link = "993333";
    google_color_bg = "dedcdc";
    google_color_text = "000000";
    google_color_url = "003366";
    //-->
 </script><br />
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<p>Did you ever wonder how <a href="http://en.wikipedia.org/wiki/Warren_Buffet" rel="nofollow">Warren Buffet</a>  managed to get that rich? Pure luck my friend, the man was born with perfect timing, one year after the stock market crash of 1929, at the beginning of the great depression.</p>
<p>Warren is a <a href="http://en.wikipedia.org/wiki/Value_investing" rel="nofollow">value investor</a>, his specialty is finding companies with depressed valuations and then waiting for - or actively working to get - the rest of the market to realize these values, at which point he can take home handsome profits.</p>
<p>Imagine then how much opportunity there was in the 50&#8217;s and 60&#8217;s for this kind of investment strategy when the stock market was still hammered. Well guess what, we&#8217;ve come full circle, at least in Thailand. The SET topped at about 1600 in 96, today, more than 10 years later we&#8217;re at 460, and more than 40 different companies from a wide array of sectors are now valued lower than their booked value, despite being solid. The average Thai company has a P/E of 6.33 at the time of writing. Warren would probably call this really good, possibly even great.</p>
<p>The problem now is actually analyzing all these companies, there are more than 600 of them, just because a P/E is low doesn&#8217;t mean investing in said company is a great idea. We have to try and find out if the low P/E is justified or not. In fact Warren himself worked for <a href="http://en.wikipedia.org/wiki/Benjamin_Graham" rel="nofollow">The Grandmaster</a> in such a capacity.</p>
<p>With that in mind I&#8217;d like to have all the fundamentals in my own database so that I could for instance run something like this:</p>
<pre><code class="mysql">SELECT * FROM companies WHERE pe &lt; 7 AND dividend_yield_percent &gt; 10 AND pbv &lt; 1.5</code></pre>
<p>The result of that query would return really nice candidates if there are any that good. I intend to find out so I need the data, time for some scraping!</p>
<pre><code class="ruby">#!ruby
require 'rubygems'
require 'hpricot'
require 'open-uri'
require 'json'

def parse_company(ticker)
  doc = Hpricot(open("http://www.set.or.th/set/companyhighlight.do?symbol=#{ticker}&amp;language=en&amp;country=US"))
  temp = []
  (doc/"td").each do |td|
    if td.inner_html.strip == "N.A."
      temp &lt;&lt; -1
    elsif td.inner_html.to_f != 0.0
      temp &lt;&lt; td.inner_html.gsub(/,/, '').to_f
    end
  end
  result = [[], [], [], [], []]
  while temp.length &gt; 0
    result.each_index do |i|
      result[i] &lt;&lt; temp.shift
    end
  end
  return result
end

companies = File.new("companies.txt")
companies.each_line do |line|
  ticker = line.strip.split.first
  unless FileTest.file?("#{ticker}.txt")
    data = File.new("#{ticker}.txt", "w+")
    data.write(JSON.generate(parse_company(ticker)))
    data.close
  end
end</code></pre>
<p>I have a file with the tickers of all the companies in the SET in <strong>companies.txt</strong>, we use it to loop through all companies.</p>
<p>If we already have a file with fundamentals for any given company we don&#8217;t do anything, we&#8217;re only interested in scraping unknown companies. We use parse_company followed by a call to <a href="http://json.rubyforge.org/">JSON</a>, we will decode the JSON in PHP at a later stage.</p>
<p>First we begin by opening the given URL and create the <a href="http://code.whytheluckystiff.net/hpricot/">Hpricot </a>object with its contents. Next we use the Hpricot object to get at all cells in the whole document. If a cell purely contains &#8220;N.A.&#8221; or a number we are interested in it because that is the fundamentals we are after. We will also remove commas from the numbers so that we can work with them in the form of floats in MySQL later on.</p>
<p>Next we initiate an array of five arrays, one for each year we have data, in the particular tables we are scraping. The result of the loop is that we get each column in each sub-array, great, just what we want for easy inserting into the database.</p>
<p>Here&#8217;s an alternative that isn&#8217;t using Hpricot:</p>
<pre><code class="ruby">require 'rubygems'
require 'open-uri'
require 'json'

def parse_company(ticker)
  str = URI.parse("http://www.set.or.th/set/companyhighlight.do?symbol=#{ticker}&amp;language=en&amp;country=US").read
  temp = []
  str.scan(/(width="100"&gt;)([\d.,NA-]+)(&lt;\/td&gt;)/){|a, b, c|
    if b.strip == "N.A."
      temp &lt;&lt; -1
    elsif b.to_f != 0.0
      temp &lt;&lt; b.gsub(/,/, '').to_f
    end
  }
  result = [[], [], [], [], []]
  result = result[0..(temp.length / 16)]
  while temp.length &gt; 0
    result.each_index do |i|
      result[i] &lt;&lt; temp.shift
    end
  end
  return result
end

companies = File.new("companies.txt")
companies.each_line do |line|
  ticker = line.strip.split.first
  unless FileTest.file?("results/#{ticker}.txt")
    data = File.new("results/#{ticker}.txt", "w+")
    data.write(JSON.pretty_generate(parse_company(ticker)))
    data.close
  end
end</code></pre>
<p><strong>Update</strong>: I just ran this SQL:</p>
<pre><code class="mysql">SELECT DISTINCT c.* FROM fundamentals f, company c WHERE f.pe &lt; 7 AND f.dividend &gt; 10 AND f.pbv &lt; 1.5 AND f.company = c.id</code></pre>
<p>With this result, it&#8217;s the top of 103 hits:</p>
<p><img src='http://www.prodevtips.com/wp-content/uploads/2008/11/screenshot.png' alt='screenshot.png' /></p>
<p>Oh you want the rest of it? C&#8217;mon give me a break here, I&#8217;m not a charity.</p>
<p>    <script type="text/javascript"><!--
      google_ad_client = "pub-4780703337538969";
      google_alternate_color = "dedcdc";
      google_ad_width = 728;
      google_ad_height = 90;
      google_ad_format = "728x90_as";
      google_ad_type = "text_image";
      google_color_border = "dedcdc";
      google_color_link = "993333";
      google_color_bg = "dedcdc";
      google_color_text = "000000";
      google_color_url = "003366";
      //-->
   </script><br />
  <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
  </script><br />
<h3>Related Posts</h3>
<ul class="related_post">
<li><a href="http://www.prodevtips.com/2008/11/14/a-noob-and-ruby-on-rails-2/" title="A noob and Ruby on Rails 2">A noob and Ruby on Rails 2</a></li>
<li><a href="http://www.prodevtips.com/2008/11/09/converting-folder-tree-using-iconv-with-ruby/" title="Converting Folder Tree using iconv with Ruby">Converting Folder Tree using iconv with Ruby</a></li>
<li><a href="http://www.prodevtips.com/2008/10/05/managing-escaping-when-indenting/" title="Managing escaping when indenting">Managing escaping when indenting</a></li>
<li><a href="http://www.prodevtips.com/2008/10/04/calling-ruby-scripts-from-pico-lisp/" title="Calling Ruby scripts from Pico Lisp">Calling Ruby scripts from Pico Lisp</a></li>
<li><a href="http://www.prodevtips.com/2008/09/29/automatic-comments/" title="Automatic multiple line comments">Automatic multiple line comments</a></li>
</ul>






	<a rel="nofollow" target="_blank" href="http://digg.com/submit?phase=2&amp;url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F09%2Fscraping-and-converting-data-with-hpricot-and-json-in-ruby%2F&amp;title=Scraping%20and%20Converting%20Data%20with%20Hpricot%20and%20JSON%20in%20Ruby" title="Digg"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/digg.png" title="Digg" alt="Digg" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://del.icio.us/post?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F09%2Fscraping-and-converting-data-with-hpricot-and-json-in-ruby%2F&amp;title=Scraping%20and%20Converting%20Data%20with%20Hpricot%20and%20JSON%20in%20Ruby" title="del.icio.us"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/delicious.png" title="del.icio.us" alt="del.icio.us" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://blogmarks.net/my/new.php?mini=1&amp;simple=1&amp;url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F09%2Fscraping-and-converting-data-with-hpricot-and-json-in-ruby%2F&amp;title=Scraping%20and%20Converting%20Data%20with%20Hpricot%20and%20JSON%20in%20Ruby" title="blogmarks"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/blogmarks.png" title="blogmarks" alt="blogmarks" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://reddit.com/submit?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F09%2Fscraping-and-converting-data-with-hpricot-and-json-in-ruby%2F&amp;title=Scraping%20and%20Converting%20Data%20with%20Hpricot%20and%20JSON%20in%20Ruby" title="Reddit"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/reddit.png" title="Reddit" alt="Reddit" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.simpy.com/simpy/LinkAdd.do?href=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F09%2Fscraping-and-converting-data-with-hpricot-and-json-in-ruby%2F&amp;title=Scraping%20and%20Converting%20Data%20with%20Hpricot%20and%20JSON%20in%20Ruby" title="Simpy"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/simpy.png" title="Simpy" alt="Simpy" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F09%2Fscraping-and-converting-data-with-hpricot-and-json-in-ruby%2F&amp;title=Scraping%20and%20Converting%20Data%20with%20Hpricot%20and%20JSON%20in%20Ruby" title="StumbleUpon"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/stumbleupon.png" title="StumbleUpon" alt="StumbleUpon" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://technorati.com/faves?add=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F09%2Fscraping-and-converting-data-with-hpricot-and-json-in-ruby%2F" title="Technorati"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/technorati.png" title="Technorati" alt="Technorati" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.dzone.com/links/add.html?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F09%2Fscraping-and-converting-data-with-hpricot-and-json-in-ruby%2F&amp;title=Scraping%20and%20Converting%20Data%20with%20Hpricot%20and%20JSON%20in%20Ruby" title="description"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/dzone.png" title="description" alt="description" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://ma.gnolia.com/bookmarklet/add?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F09%2Fscraping-and-converting-data-with-hpricot-and-json-in-ruby%2F&amp;title=Scraping%20and%20Converting%20Data%20with%20Hpricot%20and%20JSON%20in%20Ruby" title="Ma.gnolia"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/magnolia.png" title="Ma.gnolia" alt="Ma.gnolia" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://slashdot.org/bookmark.pl?title=Scraping%20and%20Converting%20Data%20with%20Hpricot%20and%20JSON%20in%20Ruby&amp;url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F09%2Fscraping-and-converting-data-with-hpricot-and-json-in-ruby%2F" title="Slashdot"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/slashdot.png" title="Slashdot" alt="Slashdot" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://sphinn.com/submit.php?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F09%2Fscraping-and-converting-data-with-hpricot-and-json-in-ruby%2F&amp;title=Scraping%20and%20Converting%20Data%20with%20Hpricot%20and%20JSON%20in%20Ruby" title="Sphinn"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/sphinn.png" title="Sphinn" alt="Sphinn" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.spurl.net/spurl.php?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F09%2Fscraping-and-converting-data-with-hpricot-and-json-in-ruby%2F&amp;title=Scraping%20and%20Converting%20Data%20with%20Hpricot%20and%20JSON%20in%20Ruby" title="Spurl"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/spurl.png" title="Spurl" alt="Spurl" class="sociable-hovers" /></a>


<br/><br/>
<p><a href="http://feeds.feedburner.com/~a/prodevtips/LVkG?a=ZBnTdd"><img src="http://feeds.feedburner.com/~a/prodevtips/LVkG?i=ZBnTdd" border="0"></img></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=4rd9N"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=4rd9N" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=sRCin"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=sRCin" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=lpgZn"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=lpgZn" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=yIu6n"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=yIu6n" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=UFHlN"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=UFHlN" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=hg21N"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=hg21N" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=NBGIn"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=NBGIn" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.prodevtips.com/2008/11/09/scraping-and-converting-data-with-hpricot-and-json-in-ruby/feed/</wfw:commentRss>
		<feedburner:awareness>http://api.feedburner.com/awareness/1.0/GetItemData?uri=prodevtips/LVkG&amp;itemurl=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F09%2Fscraping-and-converting-data-with-hpricot-and-json-in-ruby%2F</feedburner:awareness><feedburner:origLink>http://www.prodevtips.com/2008/11/09/scraping-and-converting-data-with-hpricot-and-json-in-ruby/</feedburner:origLink></item>
		<item>
		<title>Converting Folder Tree using iconv with Ruby</title>
		<link>http://feeds.feedburner.com/~r/prodevtips/LVkG/~3/447346343/</link>
		<comments>http://www.prodevtips.com/2008/11/09/converting-folder-tree-using-iconv-with-ruby/#comments</comments>
		<pubDate>Sun, 09 Nov 2008 11:54:39 +0000</pubDate>
		<dc:creator>Henrik</dc:creator>
		
		<category><![CDATA[Ruby]]></category>

		<category><![CDATA[character conversion]]></category>

		<category><![CDATA[fileutils]]></category>

		<category><![CDATA[find]]></category>

		<category><![CDATA[iconv]]></category>

		<guid isPermaLink="false">http://www.prodevtips.com/2008/11/09/converting-folder-tree-using-iconv-with-ruby/</guid>
		<description><![CDATA[Copyright © 2008 http://www.prodevtips.com. Visit the original article at http://www.prodevtips.com/2008/11/09/converting-folder-tree-using-iconv-with-ruby/.

 



I&#8217;ve just experienced one of the strangest problems ever. A PHP project was probably copied from a Swedish Windows machine to a Linux server, set to handle Swedish somehow. From the server it was then downloaded to a Mac that was probably running Swedish too, [...]]]></description>
			<content:encoded><![CDATA[Copyright © 2008 <a href="http://www.prodevtips.com">http://www.prodevtips.com</a>. Visit the original article at <a href="http://www.prodevtips.com/2008/11/09/converting-folder-tree-using-iconv-with-ruby/">http://www.prodevtips.com/2008/11/09/converting-folder-tree-using-iconv-with-ruby/</a>.<br /><div class="image_right">
<script type="text/javascript"><!--
    google_ad_client = "pub-4780703337538969";
    google_alternate_color = "dedcdc";
    google_ad_width = 250;
    google_ad_height = 250;
    google_ad_format = "250x250_as";
    google_ad_type = "text_image";
    google_color_border = "dedcdc";
    google_color_link = "993333";
    google_color_bg = "dedcdc";
    google_color_text = "000000";
    google_color_url = "003366";
    //-->
 </script><br />
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<p>I&#8217;ve just experienced one of the strangest problems ever. A PHP project was probably copied from a Swedish Windows machine to a Linux server, set to handle Swedish somehow. From the server it was then downloaded to a Mac that was probably running Swedish too, and from the Mac to my strictly English Windows installation running Wamp and XAMPP.</p>
<p>Some PHP files refused to run, instead I got a prompt asking to download them. After a while I was able to narrow it down to the folders, somehow they were the problem. When copying a PHP file from the &#8220;tainted&#8221; folder tree to a newly created folder I was able to run it. Therefore something had to be wrong with the folders, or possibly the file names. In the end nothing I did could make the files run, something else was the problem.</p>
<p>I ended up trying the below code though, it might be useful for someone else having character encoding related problems with folders and/or file names even though it didn&#8217;t work for me with the particular problem I had. I&#8217;ve seen an English Vista turning into a blue screen trying to work with files containing Swedish characters for instance, stuff like that.</p>
<pre><code class="ruby">require 'find' 
require 'fileutils'
require 'iconv'

def convert_enc(str)
  Iconv.conv('ascii', 'iso-8859-1', str)
end

def copy_tree(orig_dir, new_dir)
  Find.find(orig_dir) do |path|
    FileUtils.mkdir(convert_enc(path.gsub(/^\w+[^\/]/, new_dir))) unless FileTest.file?(path)
  end
  
  Find.find(orig_dir) do |path|
    if FileTest.file?(path)
      from = File.new(path)
      to = File.new(convert_enc(path.gsub(/^\w+[^\/]/, new_dir)), "w+")
      to.write(from.read)
    end
  end
end

copy_tree('old_dir', 'new_dir')</code></pre>
<p>Even though we treat folder and file names exactly the same here this code will allow for different treatment. As you also can see we don&#8217;t do anything with file contents, but you can easily do so by passing <strong>from.read</strong> to some encoding/decoding logic.<br />
    <script type="text/javascript"><!--
      google_ad_client = "pub-4780703337538969";
      google_alternate_color = "dedcdc";
      google_ad_width = 728;
      google_ad_height = 90;
      google_ad_format = "728x90_as";
      google_ad_type = "text_image";
      google_color_border = "dedcdc";
      google_color_link = "993333";
      google_color_bg = "dedcdc";
      google_color_text = "000000";
      google_color_url = "003366";
      //-->
   </script><br />
  <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
  </script><br />
<h3>Related Posts</h3>
<ul class="related_post">
<li><a href="http://www.prodevtips.com/2008/07/16/ruby-file-renamer/" title="Ruby File Renamer">Ruby File Renamer</a></li>
<li><a href="http://www.prodevtips.com/2008/11/14/a-noob-and-ruby-on-rails-2/" title="A noob and Ruby on Rails 2">A noob and Ruby on Rails 2</a></li>
<li><a href="http://www.prodevtips.com/2008/11/09/scraping-and-converting-data-with-hpricot-and-json-in-ruby/" title="Scraping and Converting Data with Hpricot and JSON in Ruby">Scraping and Converting Data with Hpricot and JSON in Ruby</a></li>
<li><a href="http://www.prodevtips.com/2008/10/05/managing-escaping-when-indenting/" title="Managing escaping when indenting">Managing escaping when indenting</a></li>
<li><a href="http://www.prodevtips.com/2008/10/04/calling-ruby-scripts-from-pico-lisp/" title="Calling Ruby scripts from Pico Lisp">Calling Ruby scripts from Pico Lisp</a></li>
</ul>






	<a rel="nofollow" target="_blank" href="http://digg.com/submit?phase=2&amp;url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F09%2Fconverting-folder-tree-using-iconv-with-ruby%2F&amp;title=Converting%20Folder%20Tree%20using%20iconv%20with%20Ruby" title="Digg"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/digg.png" title="Digg" alt="Digg" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://del.icio.us/post?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F09%2Fconverting-folder-tree-using-iconv-with-ruby%2F&amp;title=Converting%20Folder%20Tree%20using%20iconv%20with%20Ruby" title="del.icio.us"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/delicious.png" title="del.icio.us" alt="del.icio.us" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://blogmarks.net/my/new.php?mini=1&amp;simple=1&amp;url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F09%2Fconverting-folder-tree-using-iconv-with-ruby%2F&amp;title=Converting%20Folder%20Tree%20using%20iconv%20with%20Ruby" title="blogmarks"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/blogmarks.png" title="blogmarks" alt="blogmarks" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://reddit.com/submit?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F09%2Fconverting-folder-tree-using-iconv-with-ruby%2F&amp;title=Converting%20Folder%20Tree%20using%20iconv%20with%20Ruby" title="Reddit"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/reddit.png" title="Reddit" alt="Reddit" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.simpy.com/simpy/LinkAdd.do?href=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F09%2Fconverting-folder-tree-using-iconv-with-ruby%2F&amp;title=Converting%20Folder%20Tree%20using%20iconv%20with%20Ruby" title="Simpy"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/simpy.png" title="Simpy" alt="Simpy" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F09%2Fconverting-folder-tree-using-iconv-with-ruby%2F&amp;title=Converting%20Folder%20Tree%20using%20iconv%20with%20Ruby" title="StumbleUpon"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/stumbleupon.png" title="StumbleUpon" alt="StumbleUpon" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://technorati.com/faves?add=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F09%2Fconverting-folder-tree-using-iconv-with-ruby%2F" title="Technorati"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/technorati.png" title="Technorati" alt="Technorati" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.dzone.com/links/add.html?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F09%2Fconverting-folder-tree-using-iconv-with-ruby%2F&amp;title=Converting%20Folder%20Tree%20using%20iconv%20with%20Ruby" title="description"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/dzone.png" title="description" alt="description" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://ma.gnolia.com/bookmarklet/add?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F09%2Fconverting-folder-tree-using-iconv-with-ruby%2F&amp;title=Converting%20Folder%20Tree%20using%20iconv%20with%20Ruby" title="Ma.gnolia"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/magnolia.png" title="Ma.gnolia" alt="Ma.gnolia" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://slashdot.org/bookmark.pl?title=Converting%20Folder%20Tree%20using%20iconv%20with%20Ruby&amp;url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F09%2Fconverting-folder-tree-using-iconv-with-ruby%2F" title="Slashdot"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/slashdot.png" title="Slashdot" alt="Slashdot" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://sphinn.com/submit.php?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F09%2Fconverting-folder-tree-using-iconv-with-ruby%2F&amp;title=Converting%20Folder%20Tree%20using%20iconv%20with%20Ruby" title="Sphinn"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/sphinn.png" title="Sphinn" alt="Sphinn" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.spurl.net/spurl.php?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F09%2Fconverting-folder-tree-using-iconv-with-ruby%2F&amp;title=Converting%20Folder%20Tree%20using%20iconv%20with%20Ruby" title="Spurl"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/spurl.png" title="Spurl" alt="Spurl" class="sociable-hovers" /></a>


<br/><br/>
<p><a href="http://feeds.feedburner.com/~a/prodevtips/LVkG?a=KvQxDi"><img src="http://feeds.feedburner.com/~a/prodevtips/LVkG?i=KvQxDi" border="0"></img></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=jH7gN"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=jH7gN" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=VsYFn"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=VsYFn" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=wW5gn"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=wW5gn" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=eemGn"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=eemGn" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=u9hZN"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=u9hZN" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=jmvJN"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=jmvJN" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=iwv0n"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=iwv0n" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.prodevtips.com/2008/11/09/converting-folder-tree-using-iconv-with-ruby/feed/</wfw:commentRss>
		<feedburner:awareness>http://api.feedburner.com/awareness/1.0/GetItemData?uri=prodevtips/LVkG&amp;itemurl=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F09%2Fconverting-folder-tree-using-iconv-with-ruby%2F</feedburner:awareness><feedburner:origLink>http://www.prodevtips.com/2008/11/09/converting-folder-tree-using-iconv-with-ruby/</feedburner:origLink></item>
		<item>
		<title>From Excel XLS to CSV with PHP-ExcelReader</title>
		<link>http://feeds.feedburner.com/~r/prodevtips/LVkG/~3/439660055/</link>
		<comments>http://www.prodevtips.com/2008/11/02/from-excel-xls-to-csv-with-php-excelreader/#comments</comments>
		<pubDate>Sun, 02 Nov 2008 04:56:17 +0000</pubDate>
		<dc:creator>Henrik</dc:creator>
		
		<category><![CDATA[PHP]]></category>

		<category><![CDATA[conversion]]></category>

		<category><![CDATA[csv]]></category>

		<category><![CDATA[date manipulation]]></category>

		<category><![CDATA[excel]]></category>

		<category><![CDATA[xls]]></category>

		<guid isPermaLink="false">http://www.prodevtips.com/2008/11/02/from-excel-xls-to-csv-with-php-excelreader/</guid>
		<description><![CDATA[Copyright © 2008 http://www.prodevtips.com. Visit the original article at http://www.prodevtips.com/2008/11/02/from-excel-xls-to-csv-with-php-excelreader/.
    
   
  
  

I just had to convert a lot of xls files to csv, too many to even contemplating doing it manually. I started looking for a solution and found a positive evaluation of PHP-ExcelReader.
And Panayotis was [...]]]></description>
			<content:encoded><![CDATA[Copyright © 2008 <a href="http://www.prodevtips.com">http://www.prodevtips.com</a>. Visit the original article at <a href="http://www.prodevtips.com/2008/11/02/from-excel-xls-to-csv-with-php-excelreader/">http://www.prodevtips.com/2008/11/02/from-excel-xls-to-csv-with-php-excelreader/</a>.<br /><div class="image_right">
    <script type="text/javascript"><!--
      google_ad_client = "pub-4780703337538969";
      google_alternate_color = "dedcdc";
      google_ad_width = 234;
      google_ad_height = 60;
      google_ad_format = "234x60_as";
      google_ad_type = "text_image";
      google_color_border = "dedcdc";
      google_color_link = "993333";
      google_color_bg = "dedcdc";
      google_color_text = "000000";
      google_color_url = "003366";
      //-->
   </script><br />
  <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
  </script>
</div>
<p>I just had to convert a lot of <strong>xls </strong>files to <strong>csv</strong>, too many to even contemplating doing it manually. I started looking for a solution and found a <a href="http://vrypan.net/log/2004/11/10/parsing-xls-files-with-php/">positive evaluation</a> of <a href="http://sourceforge.net/projects/phpexcelreader/">PHP-ExcelReader</a>.</p>
<p>And Panayotis was right, it does kick ass but I did experience some problems, the first was pretty silly, the example file could not have been upgraded to reflect where the library files currently are located so I got a lot of inclusion errors. However after fixing the paths the example.php file executed just fine.</p>
<p>The second issue was more insidious, I almost didn&#8217;t notice it. When parsing dates the library was one day off, one day too much on every date to be exact. That had to be taken care of. Note that my input format was Y-m-d in the Excel file, you might not get this problem if your format is different.</p>
<p>The code:</p>
<pre><code class="php">require_once 'Excel/reader.php';
error_reporting(E_ALL ^ E_NOTICE);

$handle = fopen("out.csv", "w+");

$split_stamp1 = strtotime('1991-01-02');
$split_stamp2 = strtotime('2003-04-24');

function stockSplit(&amp;$item, $multi){
	foreach(array(2,3,4,5,6,7,9) as $field){
		if(is_numeric($item[$field] + 0))
			$item[$field] /= $multi;
	}
	if(is_numeric($item[10]))
		$item[10] *= $multi;
}

for($year = 1975; $year &lt; 2009; $year++){
	$data = new Spreadsheet_Excel_Reader();
	$data-&gt;setOutputEncoding('ASCII');
	$data-&gt;read("SCC/$year.xls");
	$items = $data-&gt;sheets[0]['cells'];
	foreach($items as $item){
		if(preg_match('/^\d\d\/\d\d\/\d\d\d\d$/', $item[1]) &amp;&amp; $item[10] != '-'){
			$arr 		= explode('/', $item[1]);
			$stamp 		= mktime(0, 0, 0, $arr[1], $arr[0], $arr[2]) - 86400;
			if($stamp &lt; $split_stamp1)
				stockSplit($item, 100);
			else if($stamp &lt; $split_stamp2 &amp;&amp; $stamp &gt; $split_stamp1)
				stockSplit($item, 10);
			$item[1] 	= date('Y-m-d', $stamp);
			fwrite($handle, implode(',', $item)."\n");
		}
	}
}
fclose($handle);</code></pre>
<p>We&#8217;re working with historical trading data here, you know open, close, low, high, volume etc.</p>
<p>We first locate where the relevant data is ($data->sheets[0][&#8217;cells&#8217;]), we then loop through each item, the array contains some meta data that we are not interested in, therefore we need to check each entry for a date as the first field. If we have a date there, and the field at position 10 is not -, we continue. Some dates did not contain information (the exchange probably lost it somehow, the &#8220;holes&#8221; only occurred in the early dates), if they didn&#8217;t the volume would have a dash instead of a number.</p>
<p>Next comes the date fix, we convert the date with <a href="http://th.php.net/manual/en/function.mktime.php" rel="nofollow">mktime </a>and subsctract 86400 seconds which is the amount of seconds we need to deduct to get to the day before. I would&#8217;ve used <a href="http://th.php.net/manual/en/function.strtotime.php">strtotime </a>here if I could but it wasn&#8217;t able to manage dd/mm/yyyy properly, bummer.</p>
<p>The next if else clauses simply have to do with handling two stock splits correctly, it doesn&#8217;t really have anything to do with the Excel stuff.</p>
<p>Finally we re-save the correct date in <strong>Y-m-d</strong> format.</p>
<p>Note that PHP-ExcelReader has converted all the commas in numbers to dots already (common in Excel), that&#8217;s why we can <a href="http://th.php.net/manual/en/function.implode.php">implode</a> with &#8216;,&#8217;.<br />
    <script type="text/javascript"><!--
      google_ad_client = "pub-4780703337538969";
      google_alternate_color = "dedcdc";
      google_ad_width = 728;
      google_ad_height = 90;
      google_ad_format = "728x90_as";
      google_ad_type = "text_image";
      google_color_border = "dedcdc";
      google_color_link = "993333";
      google_color_bg = "dedcdc";
      google_color_text = "000000";
      google_color_url = "003366";
      //-->
   </script><br />
  <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
  </script><br />
<h3>Related Posts</h3>
<ul class="related_post">
<li><a href="http://www.prodevtips.com/2008/11/01/php-class-for-working-with-directories-and-files/" title="PHP Class for working with Directories and Files">PHP Class for working with Directories and Files</a></li>
<li><a href="http://www.prodevtips.com/2008/10/31/flash-10-and-jquery-multi-file-uploader/" title="Flash 10 and jQuery multi-file uploader ">Flash 10 and jQuery multi-file uploader </a></li>
<li><a href="http://www.prodevtips.com/2008/10/26/php-doctrine-adding-automatic-simple-crud/" title="PHP Doctrine - adding automatic, simple CRUD">PHP Doctrine - adding automatic, simple CRUD</a></li>
<li><a href="http://www.prodevtips.com/2008/10/18/jquery-sorting-divs-by-date/" title="jQuery - sorting DIVs by date">jQuery - sorting DIVs by date</a></li>
<li><a href="http://www.prodevtips.com/2008/09/30/integrating-with-jquery-adding-pagination/" title="Integrating with jQuery - Adding Pagination">Integrating with jQuery - Adding Pagination</a></li>
</ul>






	<a rel="nofollow" target="_blank" href="http://digg.com/submit?phase=2&amp;url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F02%2Ffrom-excel-xls-to-csv-with-php-excelreader%2F&amp;title=From%20Excel%20XLS%20to%20CSV%20with%20PHP-ExcelReader" title="Digg"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/digg.png" title="Digg" alt="Digg" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://del.icio.us/post?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F02%2Ffrom-excel-xls-to-csv-with-php-excelreader%2F&amp;title=From%20Excel%20XLS%20to%20CSV%20with%20PHP-ExcelReader" title="del.icio.us"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/delicious.png" title="del.icio.us" alt="del.icio.us" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://blogmarks.net/my/new.php?mini=1&amp;simple=1&amp;url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F02%2Ffrom-excel-xls-to-csv-with-php-excelreader%2F&amp;title=From%20Excel%20XLS%20to%20CSV%20with%20PHP-ExcelReader" title="blogmarks"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/blogmarks.png" title="blogmarks" alt="blogmarks" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://reddit.com/submit?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F02%2Ffrom-excel-xls-to-csv-with-php-excelreader%2F&amp;title=From%20Excel%20XLS%20to%20CSV%20with%20PHP-ExcelReader" title="Reddit"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/reddit.png" title="Reddit" alt="Reddit" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.simpy.com/simpy/LinkAdd.do?href=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F02%2Ffrom-excel-xls-to-csv-with-php-excelreader%2F&amp;title=From%20Excel%20XLS%20to%20CSV%20with%20PHP-ExcelReader" title="Simpy"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/simpy.png" title="Simpy" alt="Simpy" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F02%2Ffrom-excel-xls-to-csv-with-php-excelreader%2F&amp;title=From%20Excel%20XLS%20to%20CSV%20with%20PHP-ExcelReader" title="StumbleUpon"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/stumbleupon.png" title="StumbleUpon" alt="StumbleUpon" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://technorati.com/faves?add=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F02%2Ffrom-excel-xls-to-csv-with-php-excelreader%2F" title="Technorati"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/technorati.png" title="Technorati" alt="Technorati" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.dzone.com/links/add.html?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F02%2Ffrom-excel-xls-to-csv-with-php-excelreader%2F&amp;title=From%20Excel%20XLS%20to%20CSV%20with%20PHP-ExcelReader" title="description"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/dzone.png" title="description" alt="description" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://ma.gnolia.com/bookmarklet/add?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F02%2Ffrom-excel-xls-to-csv-with-php-excelreader%2F&amp;title=From%20Excel%20XLS%20to%20CSV%20with%20PHP-ExcelReader" title="Ma.gnolia"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/magnolia.png" title="Ma.gnolia" alt="Ma.gnolia" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://slashdot.org/bookmark.pl?title=From%20Excel%20XLS%20to%20CSV%20with%20PHP-ExcelReader&amp;url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F02%2Ffrom-excel-xls-to-csv-with-php-excelreader%2F" title="Slashdot"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/slashdot.png" title="Slashdot" alt="Slashdot" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://sphinn.com/submit.php?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F02%2Ffrom-excel-xls-to-csv-with-php-excelreader%2F&amp;title=From%20Excel%20XLS%20to%20CSV%20with%20PHP-ExcelReader" title="Sphinn"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/sphinn.png" title="Sphinn" alt="Sphinn" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.spurl.net/spurl.php?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F02%2Ffrom-excel-xls-to-csv-with-php-excelreader%2F&amp;title=From%20Excel%20XLS%20to%20CSV%20with%20PHP-ExcelReader" title="Spurl"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/spurl.png" title="Spurl" alt="Spurl" class="sociable-hovers" /></a>


<br/><br/>
<p><a href="http://feeds.feedburner.com/~a/prodevtips/LVkG?a=QKrYTo"><img src="http://feeds.feedburner.com/~a/prodevtips/LVkG?i=QKrYTo" border="0"></img></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=VZA5N"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=VZA5N" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=YgBzn"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=YgBzn" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=ioDWn"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=ioDWn" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=EVOin"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=EVOin" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=5ALfN"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=5ALfN" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=RxhGN"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=RxhGN" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=pq3Fn"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=pq3Fn" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.prodevtips.com/2008/11/02/from-excel-xls-to-csv-with-php-excelreader/feed/</wfw:commentRss>
		<feedburner:awareness>http://api.feedburner.com/awareness/1.0/GetItemData?uri=prodevtips/LVkG&amp;itemurl=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F02%2Ffrom-excel-xls-to-csv-with-php-excelreader%2F</feedburner:awareness><feedburner:origLink>http://www.prodevtips.com/2008/11/02/from-excel-xls-to-csv-with-php-excelreader/</feedburner:origLink></item>
		<item>
		<title>PHP Class for working with Directories and Files</title>
		<link>http://feeds.feedburner.com/~r/prodevtips/LVkG/~3/438750436/</link>
		<comments>http://www.prodevtips.com/2008/11/01/php-class-for-working-with-directories-and-files/#comments</comments>
		<pubDate>Sat, 01 Nov 2008 05:05:23 +0000</pubDate>
		<dc:creator>Henrik</dc:creator>
		
		<category><![CDATA[PHP]]></category>

		<category><![CDATA[directory parsing]]></category>

		<category><![CDATA[file parsing]]></category>

		<guid isPermaLink="false">http://www.prodevtips.com/2008/11/01/php-class-for-working-with-directories-and-files/</guid>
		<description><![CDATA[Copyright © 2008 http://www.prodevtips.com. Visit the original article at http://www.prodevtips.com/2008/11/01/php-class-for-working-with-directories-and-files/.
    
   
  
  

The code documented here was originally posted as a single page as is. It just didn&#8217;t feel right, it felt lazy and not what this site is about, which is some kind of commentary or [...]]]></description>
			<content:encoded><![CDATA[Copyright © 2008 <a href="http://www.prodevtips.com">http://www.prodevtips.com</a>. Visit the original article at <a href="http://www.prodevtips.com/2008/11/01/php-class-for-working-with-directories-and-files/">http://www.prodevtips.com/2008/11/01/php-class-for-working-with-directories-and-files/</a>.<br /><div class="image_right">
    <script type="text/javascript"><!--
      google_ad_client = "pub-4780703337538969";
      google_alternate_color = "dedcdc";
      google_ad_width = 234;
      google_ad_height = 60;
      google_ad_format = "234x60_as";
      google_ad_type = "text_image";
      google_color_border = "dedcdc";
      google_color_link = "993333";
      google_color_bg = "dedcdc";
      google_color_text = "000000";
      google_color_url = "003366";
      //-->
   </script><br />
  <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
  </script>
</div>
<p>The code documented here was originally posted as a single page as is. It just didn&#8217;t feel right, it felt lazy and not what this site is about, which is some kind of commentary or notes even though it&#8217;s not always extensive, so here you are, the verbose version.</p>
<p>Most seasoned devs probably got a similar class of their own already, however, if you are a newbie this piece is definitely a good read.</p>
<p><a href='http://www.prodevtips.com/wp-content/uploads/2008/11/filedirext.php' title='filedirext.php'>Source Code</a></p>
<pre><code class="php">static function dirAsArr(&amp;$d){ 
  $arr = array(); 
  for($i = 0; false !== ($entry = $d-&gt;read()); $i++){ 
    if($entry != "." &amp;&amp; $entry != "..")      
      array_push($arr,$entry); 
  } 
  return $arr; 
}</code></pre>
<p>We require a directory object (created with <a href="http://th.php.net/manual/en/class.dir.php">dir</a>), passed as reference.</p>
<p>I just noticed that the above way of looping with <strong>for</strong> is pointless because we make no use of $i, a <strong>while </strong>would have been better. Anyway, the main thing here is that we grab everything except . and .. which are system symbols. The double dots for instance refer to the parent directory and I&#8217;ve yet to experience a situation where walking upwards too is wanted behavior, and I probably never will. That&#8217;s why we leave them out, most of what we&#8217;re trying to achieve would simply break otherwise.</p>
<p>I can&#8217;t remember why I&#8217;m using <a href="http://th.php.net/manual/en/function.array-push.php">array_push</a> here, I might not have realized that I just as easily could do <strong>$arr[] = $entry</strong>.</p>
<pre><code class="php">static function list_dir($strDir){ 
    $d = dir($strDir); 
    return self::dirAsArr($d); 
}</code></pre>
<p>By using the above <strong>dirAsArr</strong> we can now return an array with all <strong>file </strong>and <strong>directory </strong>names in any given directory whose name is passed as a string in the single argument.</p>
<pre><code class="php">static function list_files_in_dir($strDir){ 
    $d = dir($strDir); 
    $temp = self::dirAsArr($d); 
    $rarr = array(); 
    foreach($temp as $item){ 
        if(is_file("$strDir/$item")){ 
            $rarr[] = $item; 
        } 
    } 
    return $rarr; 
}</code></pre>
<p>Similar do the above <strong>list_dir</strong> method but this time we don&#8217;t want to work with sub directories, only the files contained in <strong>$strDir</strong>. That&#8217;s why we use <a href="http://th.php.net/manual/en/function.is-file.php">is_file</a> to check every item, if it isn&#8217;t a file we don&#8217;t include it in the resultant array.</p>
<pre><code class="php">static function clearDir($strDir){ 
    $files = self::list_files_in_dir($strDir); 
    foreach($files as $file){ 
        unlink("$strDir/$file"); 
    } 
}</code></pre>
<p>Here we use our new <strong>list_files_in_dir</strong> function to get all the files in a directory in order to delete them.</p>
<pre><code class="php">static function replaceInFile($fileName, $needle, $replacement){ 
      $lines = file($fileName); 
      foreach($lines as &amp;$line){ 
        $line = str_replace($needle, $replacement, $line); 
    } 
    return $lines; 
}</code></pre>
<p>We open a file through <strong>$fileName</strong> and replace all instances of <strong>$needle</strong> with <strong>$replacement</strong>. This is identical to the replace all in document function in any text editor.</p>
<pre><code class="php">static function searchCountInFile($fileName, $needle){ 
      $lines = file($fileName); 
      if($lines === false) 
          return 0; 
      $count = 0; 
      foreach($lines as &amp;$line){ 
            $count += substr_count($line, $needle); 
    } 
     
    return $count; 
}</code></pre>
<p>Similar to the above <strong>replaceInFile</strong> but now we count all instances of <strong>$needle</strong> instead.</p>
<pre><code class="php">static function emptyWrite2D(&amp;$arr, $fileName){ 
      $handle = fopen($fileName, "w+"); 
      foreach($arr as $line){ 
        fwrite($handle, $line); 
    } 
    fclose($handle); 
}</code></pre>
<p>Easy enough, we output the contents of an array to a file. I don&#8217;t really know why it has 2D at the end there. Anyway it&#8217;s a good example on how <a href="http://th.php.net/manual/en/function.fopen.php">fopen</a>, <a href="http://th.php.net/manual/en/function.fwrite.php">fwrite </a>and <a href="http://th.php.net/manual/en/function.fclose.php">fclose </a>are used in conjunction with each other.</p>
<pre><code class="php">static function replaceInDir(&amp;$dir, $needle, $replacement){ 
      $fileNames = self::dirAsArr($dir); 
      foreach($fileNames as $fileName){ 
            $fileName = $dir-&gt;path."/".$fileName; 
        $fileAsArr = self::replaceInFile($fileName, $needle, $replacement); 
        self::emptyWrite2D($fileAsArr, $fileName); 
    } 
}</code></pre>
<p>We walk through a directory with and use the above <strong>replaceInFile</strong> function to replace a <strong>$needle</strong> with <strong>$replacement</strong> in  a whole directory. The <strong>emptyWrite2D</strong> function is used to resave each file. I can&#8217;t for the life of me understand why I use <strong>dirAsArr</strong> directly here, now that I review the code it feels like <strong>list_files_in_dir</strong> would&#8217;ve been a much better choice since I don&#8217;t recurse into sub directories.</p>
<pre><code class="php">static function getTargetsInDir(&amp;$dir, $needle){ 
      $fileNames = self::dirAsArr($dir); 
      $files = array(); 
      foreach($fileNames as $fileName){ 
            $fileName = $dir-&gt;path."/".$fileName; 
        if(self::searchCountInFile($fileName, $needle) &gt; 0) 
            array_push($files, $fileName); 
    } 
     
    return $files; 
}</code></pre>
<p>Another variation, instead of replacing a needle in all files in a directory we count them and return an array with the names of all files where the count is bigger than zero. Again, I don&#8217;t understand why I didn&#8217;t use <strong>list_files_in_dir</strong> instead of <strong>dirAsArr</strong>.</p>
<pre><code class="php">static function download_file($filename, $ctype){ 
    header("Pragma: public"); // required 
    header("Expires: 0"); 
    header("Cache-Control: must-revalidate, post-check=0, pre-check=0"); 
    header("Cache-Control: private",false); // required for certain browsers  
    header("Content-Type: $ctype"); 
    header("Content-Disposition: attachment; filename=\"".basename($filename)."\";" ); 
    header("Content-Transfer-Encoding: binary"); 
    header("Content-Length: ".filesize($filename)); 
    readfile("$filename"); 
}</code></pre>
<p>This one will create a file download of the file whose name is stored in <strong>$filename</strong>, <strong>$ctype</strong> is describing the type of the file (<a href="http://en.wikipedia.org/wiki/MIME" rel="nofollow">MIME</a>) so that the correct software can be used for &#8220;open with&#8221; in the download dialog (for instance <strong>application/msword</strong> if you want to open with Microsoft Word). </p>
<p>Note the use of <a href="http://th.php.net/manual/en/function.basename.php">basename</a>, <a href="http://th.php.net/manual/en/function.filesize.php">filesize</a>, <a href="http://th.php.net/manual/en/function.readfile.php">readfile </a>and of course <a href="http://th.php.net/manual/en/function.header.php">header </a>to build the <a href="http://en.wikipedia.org/wiki/List_of_HTTP_headers" rel="nofollow">headers </a>we need to send to the browser.</p>
<p>    <script type="text/javascript"><!--
      google_ad_client = "pub-4780703337538969";
      google_alternate_color = "dedcdc";
      google_ad_width = 728;
      google_ad_height = 90;
      google_ad_format = "728x90_as";
      google_ad_type = "text_image";
      google_color_border = "dedcdc";
      google_color_link = "993333";
      google_color_bg = "dedcdc";
      google_color_text = "000000";
      google_color_url = "003366";
      //-->
   </script><br />
  <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
  </script><br />
<h3>Related Posts</h3>
<ul class="related_post">
<li><a href="http://www.prodevtips.com/2008/11/02/from-excel-xls-to-csv-with-php-excelreader/" title="From Excel XLS to CSV with PHP-ExcelReader">From Excel XLS to CSV with PHP-ExcelReader</a></li>
<li><a href="http://www.prodevtips.com/2008/10/31/flash-10-and-jquery-multi-file-uploader/" title="Flash 10 and jQuery multi-file uploader ">Flash 10 and jQuery multi-file uploader </a></li>
<li><a href="http://www.prodevtips.com/2008/10/26/php-doctrine-adding-automatic-simple-crud/" title="PHP Doctrine - adding automatic, simple CRUD">PHP Doctrine - adding automatic, simple CRUD</a></li>
<li><a href="http://www.prodevtips.com/2008/09/30/integrating-with-jquery-adding-pagination/" title="Integrating with jQuery - Adding Pagination">Integrating with jQuery - Adding Pagination</a></li>
<li><a href="http://www.prodevtips.com/2008/09/23/dql-recipes/" title="DQL recipes ">DQL recipes </a></li>
</ul>






	<a rel="nofollow" target="_blank" href="http://digg.com/submit?phase=2&amp;url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F01%2Fphp-class-for-working-with-directories-and-files%2F&amp;title=PHP%20Class%20for%20working%20with%20Directories%20and%20Files" title="Digg"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/digg.png" title="Digg" alt="Digg" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://del.icio.us/post?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F01%2Fphp-class-for-working-with-directories-and-files%2F&amp;title=PHP%20Class%20for%20working%20with%20Directories%20and%20Files" title="del.icio.us"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/delicious.png" title="del.icio.us" alt="del.icio.us" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://blogmarks.net/my/new.php?mini=1&amp;simple=1&amp;url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F01%2Fphp-class-for-working-with-directories-and-files%2F&amp;title=PHP%20Class%20for%20working%20with%20Directories%20and%20Files" title="blogmarks"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/blogmarks.png" title="blogmarks" alt="blogmarks" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://reddit.com/submit?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F01%2Fphp-class-for-working-with-directories-and-files%2F&amp;title=PHP%20Class%20for%20working%20with%20Directories%20and%20Files" title="Reddit"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/reddit.png" title="Reddit" alt="Reddit" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.simpy.com/simpy/LinkAdd.do?href=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F01%2Fphp-class-for-working-with-directories-and-files%2F&amp;title=PHP%20Class%20for%20working%20with%20Directories%20and%20Files" title="Simpy"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/simpy.png" title="Simpy" alt="Simpy" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F01%2Fphp-class-for-working-with-directories-and-files%2F&amp;title=PHP%20Class%20for%20working%20with%20Directories%20and%20Files" title="StumbleUpon"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/stumbleupon.png" title="StumbleUpon" alt="StumbleUpon" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://technorati.com/faves?add=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F01%2Fphp-class-for-working-with-directories-and-files%2F" title="Technorati"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/technorati.png" title="Technorati" alt="Technorati" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.dzone.com/links/add.html?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F01%2Fphp-class-for-working-with-directories-and-files%2F&amp;title=PHP%20Class%20for%20working%20with%20Directories%20and%20Files" title="description"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/dzone.png" title="description" alt="description" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://ma.gnolia.com/bookmarklet/add?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F01%2Fphp-class-for-working-with-directories-and-files%2F&amp;title=PHP%20Class%20for%20working%20with%20Directories%20and%20Files" title="Ma.gnolia"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/magnolia.png" title="Ma.gnolia" alt="Ma.gnolia" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://slashdot.org/bookmark.pl?title=PHP%20Class%20for%20working%20with%20Directories%20and%20Files&amp;url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F01%2Fphp-class-for-working-with-directories-and-files%2F" title="Slashdot"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/slashdot.png" title="Slashdot" alt="Slashdot" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://sphinn.com/submit.php?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F01%2Fphp-class-for-working-with-directories-and-files%2F&amp;title=PHP%20Class%20for%20working%20with%20Directories%20and%20Files" title="Sphinn"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/sphinn.png" title="Sphinn" alt="Sphinn" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.spurl.net/spurl.php?url=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F01%2Fphp-class-for-working-with-directories-and-files%2F&amp;title=PHP%20Class%20for%20working%20with%20Directories%20and%20Files" title="Spurl"><img src="http://www.prodevtips.com/wp-content/plugins/sociable/images/spurl.png" title="Spurl" alt="Spurl" class="sociable-hovers" /></a>


<br/><br/>
<p><a href="http://feeds.feedburner.com/~a/prodevtips/LVkG?a=nxNF0d"><img src="http://feeds.feedburner.com/~a/prodevtips/LVkG?i=nxNF0d" border="0"></img></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=ynMpN"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=ynMpN" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=uuvhn"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=uuvhn" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=hRsDn"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=hRsDn" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=v814n"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=v814n" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=PY7mN"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=PY7mN" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=WffUN"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=WffUN" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/prodevtips/LVkG?a=HE4pn"><img src="http://feeds.feedburner.com/~f/prodevtips/LVkG?i=HE4pn" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.prodevtips.com/2008/11/01/php-class-for-working-with-directories-and-files/feed/</wfw:commentRss>
		<feedburner:awareness>http://api.feedburner.com/awareness/1.0/GetItemData?uri=prodevtips/LVkG&amp;itemurl=http%3A%2F%2Fwww.prodevtips.com%2F2008%2F11%2F01%2Fphp-class-for-working-with-directories-and-files%2F</feedburner:awareness><feedburner:origLink>http://www.prodevtips.com/2008/11/01/php-class-for-working-with-directories-and-files/</feedburner:origLink></item>
		<item>
		<title>Flash 10 and jQuery multi-file uploader</title>
		<link>http://feeds.feedburner.com/~r/prodevtips/LVkG/~3/438255251/</link>
		<comments>http://www.prodevtips.com/2008/10/31/flash-10-and-jquery-multi-file-uploader/#comments</comments>
		<pubDate>Fri, 31 Oct 2008 17:24:11 +0000</pubDate>
		<dc:creator>Henrik</dc:creator>
		
		<category><![CDATA[Flex, Flash and AMFPHP]]></category>

		<category><![CDATA[Javascript]]></category>

		<category><![CDATA[jQuery]]></category>

		<category><![CDATA[actionscript 2]]></category>

		<category><![CDATA[flash]]></category>

		<category><![CDATA[jquery]]></category>

		<category><![CDATA[PHP]]></category>

		<guid isPermaLink="false">http://www.prodevtips.com/2008/10/31/flash-10-and-jquery-multi-file-uploader/</guid>
		<description><![CDATA[Copyright © 2008 http://www.prodevtips.com. Visit the original article at http://www.prodevtips.com/2008/10/31/flash-10-and-jquery-multi-file-uploader/.So Flash Player version 10 won&#8217;t stand for any automatically opened file select windows, there goes our flash uploader down the drain, the article is still good as a reference though if something here is unclear, it&#8217;s much more verbose. It&#8217;s just that the old logic [...]]]></description>
			<content:encoded><![CDATA[Copyright © 2008 <a href="http://www.prodevtips.com">http://www.prodevtips.com</a>. Visit the original article at <a href="http://www.prodevtips.com/2008/10/31/flash-10-and-jquery-multi-file-uploader/">http://www.prodevtips.com/2008/10/31/flash-10-and-jquery-multi-file-uploader/</a>.<br /><p>So Flash Player version 10 won&#8217;t stand for any automatically opened file select windows, there goes our <a href="http://www.prodevtips.com/2007/12/07/multiple-uploads-with-jquery-and-flex-or-flash/">flash uploader</a> down the drain, the article is still good as a reference though if something here is unclear, it&#8217;s much more verbose. It&#8217;s just that the old logic needs a button and I&#8217;m not going to learn how to do that in Flex at the moment. And the whole point of that scheme was to make the uploader invisible and therefore design agnostic. Oh dear Adobe people, what on earth are you thinking?</p>
<p>As it happens a new project of ours is using <a href="http://swfupload.org/">swfUpload</a>, broken too! We need a button, yesterday&#8230; The quickest and easiest way of managing this mess is simply creating an all out Flash version where the designers can work with the necessary button to make sure it fits in nicely. We will put the code in the .fla itself this time, quick and dirty is the name of the game unfortunately.</p>
<p>Let&#8217;s start with the JavaScript/HTML:</p>
<pre><code class="html">&lt;html&gt;
&lt;head&gt;
&lt;script src="jquery-1.2.6.min.js" language="JavaScript"&gt;&lt;/script&gt; 
&lt;script src="jquery.flash.js" language="JavaScript"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;</code></pre>
<p>Including the necessary jQuery stuff.</p>
<pre><code class="javascript">// &lt;![CDATA[
      
var messages            = new Array(); 
var completeMsg         = " was uploaded successfully.";
var tooBigMsg           = " was too big.";

function eachComplete(file_name){
  $("#msgBox").append("&lt;br/&gt;"+file_name + completeMsg);
} 
 
function tooBig(file_name){
  $("#msgBox").append("&lt;br/&gt;" + tooBigMsg + file_name);
}
 
function uploadProgress(file_name, bytes_loaded, bytes_total){ 
  var percentage = (bytes_loaded / bytes_total) * 100; 
  $("#prgrsMsg").html(file_name+": "+percentage+"%"); 
}

function uploadComplete(){
  $("#prgrsMsg").html('');
  $("#pics").load("showpics.php"); 
} 
 
function forFlash(){ 
  var to_flash = new Array(); 
  to_flash[0] = "upload.php";
  to_flash[1] = "1048576";
  return to_flash;
}

$(document).ready(function(){  
  $("#flashbutton").flash({  
    src: "upload.swf",  
    width: 250,  
    height: 250
  });
});

// ]]&gt;</code></pre>
<p><a href="http://www.cartoonsmart.com/" alt="Cartoonsmart Flash Tutorials" title="Cartoonsmart Flash Tutorials">
<div id="cartoonsmart" class="cartoonsmart"></div>
<p></a><br />
Most of the above functions will be called from within the Shockwave.</p>
<p><strong>EachComplete</strong> will be called each time a file completes to output this to the designated DIV.</p>
<p><strong>TooBig</strong>, is a file too big? In our case 1048576 bytes. Then we output the error message.</p>
<p><strong>UploadProgress</strong>, called continuously when a file uploads to display its progress.</p>
<p><strong>UploadComplete</strong>, runs when all files have been uploaded, it will use an Ajax call to load the output of <strong>showpics.php</strong> to display all the nice pictures we have managed to upload.</p>
<p><strong>ForFlash</strong>, sends some data the Shockwave needs, to it.</p>
<p>Finally we load the Shockwave with the <a href="http://www.prodevtips.com/tag/jquery-flash/">jQuery Flash</a> plugin.</p>
<pre><code class="html">&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="flashbutton"&gt;&lt;/div&gt;
&lt;div id="msgBox"&gt;&lt;/div&gt; 
&lt;div id="prgrsMsg"&gt;&lt;/div&gt;
&lt;div id="pics"&gt;&lt;/div&gt;
&lt;/body&gt;</code></pre>
<p>The DIVs we use in the Javascript above.</p>
<p>Let&#8217;s move on to the ActionScript:</p>
<pre><code class="javascript">import flash.external.*;
