
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	>
<channel>
	<title>Dolfo.org</title>
	<atom:link href="http://dolfo.org/feed/" rel="self" type="application/rss+xml" />
	<link>http://dolfo.org</link>
	<description>Dolfo.org is the online portfolio and blog of Jose Cuadra, a freelance Graphic Designer currently located in the Central Florida area who offers Design, Animation and Programming services.</description>
	<pubDate>Fri, 03 Jul 2009 22:57:06 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.7.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Multiple On Load Events</title>
		<link>http://dolfo.org/2009/06/multiple-on-load-events/</link>
		<comments>http://dolfo.org/2009/06/multiple-on-load-events/#comments</comments>
		<pubDate>Tue, 30 Jun 2009 14:45:56 +0000</pubDate>
		<dc:creator>Jose Cuadra</dc:creator>
		
		<category><![CDATA[Reference]]></category>

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

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

		<guid isPermaLink="false">http://dolfo.org/?p=866</guid>
		<description><![CDATA[
A common issue that arises when developing web applications with JavaScript is that the onload events interfere with each other. With all the freely available frameworks and apps at a users disposal there is a strong possibility the onload event is already being used in a project&#8230; incorrectly. (I admit I am guilty of this.)



Rather [...]]]></description>
			<content:encoded><![CDATA[<p>
A common issue that arises when developing web applications with JavaScript is that the onload events interfere with each other. With all the freely available frameworks and apps at a users disposal there is a strong possibility the onload event is already being used in a project&#8230; incorrectly. (I admit I am guilty of this.)
</p>
<p><span id="more-866"></span></p>
<p>
Rather than overwriting the previous call by hoping your code appears after it. You can simply append your function to the event with a addListener function. As usual IE needs special attention.
</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> firstFunction<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;1st Function&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #003366; font-weight: bold;">function</span> secondFunction<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;2nd Function&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
window.<span style="color: #000066;">onload</span> <span style="color: #339933;">=</span> firstFunction<span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">typeof</span> window.<span style="color: #660066;">addEventListener</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">&quot;function&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
window.<span style="color: #660066;">addEventListener</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;load&quot;</span><span style="color: #339933;">,</span> secondFunction<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #006600; font-style: italic;">//IE</span>
<span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">typeof</span> window.<span style="color: #660066;">attachEvent</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">&quot;object&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
window.<span style="color: #660066;">attachEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;onload&quot;</span><span style="color: #339933;">,</span> secondFunction<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>
If your code appears before the original onload function your function will be executed first.
</p>
<p>
<a class="demo" href="http://www.dolfo.org/demos/06302009/">Demo</a>
</p>
<p>
<a class="download" href="http://www.dolfo.org/demos/06302009.zip">Download</a>
</p>
<h3>Todo List</h3>
<dl>
<dt>06/30/2009</dt>
<dd>Degrade for older browsers.</dd>
</dl>
]]></content:encoded>
			<wfw:commentRss>http://dolfo.org/2009/06/multiple-on-load-events/feed/</wfw:commentRss>
		</item>
		<item>
		<title>fliteBox</title>
		<link>http://dolfo.org/2009/06/flitebox/</link>
		<comments>http://dolfo.org/2009/06/flitebox/#comments</comments>
		<pubDate>Mon, 29 Jun 2009 12:21:44 +0000</pubDate>
		<dc:creator>Jose Cuadra</dc:creator>
		
		<category><![CDATA[Application]]></category>

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

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

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

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

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

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

		<guid isPermaLink="false">http://dolfo.org/?p=688</guid>
		<description><![CDATA[



fliteBox is a lightbox for Flickr Photosets, dynamically built with JavaScript making calls to a PHP script.


Demo

fliteBox Demo

Features

Image Properties
Author names, titles and descriptions entered in Flickr about your image will all carry over into fliteBox.
Community Guidelines
By linking back to Flickr fliteBox honors their Community Guidelines.

Download
fliteBox Beta
Setup

Apply for an API Key
A key is required to access [...]]]></description>
			<content:encoded><![CDATA[<p>
<img class="entryImg" src="http://www.dolfo.org/imgs/blog/06292009Prev.png" title="FliteBox" alt="FliteBox Preview" />
</p>
<p>
fliteBox is a lightbox for Flickr Photosets, dynamically built with JavaScript making calls to a PHP script.
</p>
<p><span id="more-688"></span></p>
<h3>Demo</h3>
<p>
<a class="demo" href="http://dolfo.org/demos/06292009/">fliteBox Demo</a>
</p>
<h3>Features</h3>
<dl>
<dt>Image Properties</dt>
<dd>Author names, titles and descriptions entered in Flickr about your image will all carry over into fliteBox.</dd>
<dt>Community Guidelines</dt>
<dd>By linking back to Flickr fliteBox honors their <a href="http://www.flickr.com/guidelines.gne">Community Guidelines</a>.</dd>
</dl>
<h3>Download</h3>
<p><a class="download" href="http://dolfo.org/downloads/06292009.zip">fliteBox Beta</a></p>
<h3>Setup</h3>
<dl>
<dt>Apply for an API Key</dt>
<dd>A key is required to access Flickr&#8217;s API. You may apply for one here: <a href="http://www.flickr.com/services/api/keys/apply/">http://www.flickr.com/services/api/keys/apply/</a></dd>
<dt>Grab a Photoset ID</dt>
<dd>Photosets contain an ID located in their url. You will need this ID to call that particular set of photos. http://www.flickr.com/photos/largestartist/sets/<span class="highlight">72157606111408736</span>/
</dd>
</dl>
<h3>Activate</h3>
<p>
Navigate to and then open the flite.js file located in the js folder. Enter your API Key between the quotes to assign the value to the apiKey variable.
</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> apiKey <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;API Key provided by Flickr&quot;</span><span style="color: #339933;">;</span></pre></div></div>

<h3>Install</h3>
<p>
Include this in the header of the document.
</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span> src<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;js/flite.js&quot;</span><span style="color: #339933;">&gt;&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></div></div>

<p>
Place the following where you want the gallery to appear. Also replace the value of the title attribute with the ID of your Photoset.
</p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;div class=&quot;flite&quot; title=&quot;72157606111408736&quot;&gt;&lt;/div&gt;</pre></div></div>

<h3>Customization</h3>
<dl>
<dt>CSS</dt>
<dd>The following markup is created by JavaScript and appended to any DIV element with the class of &#8220;flite.&#8221; The href, src, title and alt attributes are all populated with the appropriate information from Flickr. You may use the markup below as a guide to modify or replace the included style sheet.</dd>
</dl>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;&quot; title=&quot;&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;&quot; title=&quot;&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;&quot; title=&quot;&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre></div></div>

<dl>
<dt>Gallery Image Sizes</dt>
<dd>With the variable size you may choose which type of images are used to create the gallery.
</dd>
<dt>Language Type</dt>
<dd>This is currently in place for future development. fliteBox is destined to be hot swappable with all scripting languages.
</dd>
</dl>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> size <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//0 = square, 1 = Thumbnail, 2 = Small, 3 = Medium, 4 = Large</span>
<span style="color: #003366; font-weight: bold;">var</span> langType <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;php&quot;</span><span style="color: #339933;">;</span></pre></div></div>

<h3>License</h3>
<p>
<span xmlns:dc="http://purl.org/dc/elements/1.1/" property="dc:title">fliteBox</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://dolfo.org/2009/06/flitebox" property="cc:attributionName" rel="cc:attributionURL">Jose Cuadra</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/us/">Creative Commons Attribution-Share Alike 3.0 United States License</a>.<br />Permissions beyond the scope of this license may be available at <a xmlns:cc="http://creativecommons.org/ns#" href="http://dolfo.org/#contact" rel="cc:morePermissions">http://dolfo.org/#contact</a>.
</p>
<h3>Updates</h3>
<dl>
<dt>06/29/2009</dt>
<dd>Beta Released.</dd>
</dl>
<h3>Troubleshooting</h3>
<dl>
<dt>Not working?</dt>
<dd>The most common issue is that there is a conflicting onLoad script elsewhere on your page. You will need to open flite.js and delete the last line in the document. (window.onload = intFlite;) Then place intFlite(); inside of your window.onload event function.</dd>
</dl>
]]></content:encoded>
			<wfw:commentRss>http://dolfo.org/2009/06/flitebox/feed/</wfw:commentRss>
		</item>
		<item>
		<title>The Definitive List of Vector Art</title>
		<link>http://dolfo.org/2009/06/the-definitive-list-of-vector-art/</link>
		<comments>http://dolfo.org/2009/06/the-definitive-list-of-vector-art/#comments</comments>
		<pubDate>Fri, 05 Jun 2009 18:49:50 +0000</pubDate>
		<dc:creator>Jose Cuadra</dc:creator>
		
		<category><![CDATA[Resource]]></category>

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

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

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

		<guid isPermaLink="false">http://dolfo.org/?p=512</guid>
		<description><![CDATA[
Here is a list of resources for Vector Art. The list is currently being updated. If you have any sources to add, list it as a comment.


Portfolios

Limkis
None
Ussa Methawittayakul
None

Communities

Illustrator World
Illustratorworld.com is the largest site on the Internet dedicated exclusively to vector art and vector applications. It was created to serve several purposes: Instruct, inspire and promote [...]]]></description>
			<content:encoded><![CDATA[<p>
Here is a list of resources for Vector Art. The list is currently being updated. If you have any sources to add, list it as a comment.
</p>
<p><span id="more-512"></span></p>
<h3>Portfolios</h3>
<dl>
<dt><a href="http://limkis.deviantart.com/">Limkis</a></dt>
<dd>None</dd>
<dt><a href="http://i-evermind.deviantart.com/">Ussa Methawittayakul</a></dt>
<dd>None</dd>
</dl>
<h3>Communities</h3>
<dl>
<dt><a href="http://www.illustratorworld.com/">Illustrator World</a></dt>
<dd>Illustratorworld.com is the largest site on the Internet dedicated exclusively to vector art and vector applications. It was created to serve several purposes: Instruct, inspire and promote innovation.</dd>
</dl>
<h3>Resources (Free)</h3>
<dl>
<dt><a href="http://dezignus.com/category/vector/">Dezignus</a></dt>
<dd>Founded a year ago as my personal playground, today Dezignus is friendly, growing community of people interested in graphic design. Our mission - improving professional skills of designers by providing useful freebies: vector, ps brushes and shapes, textures and backgrounds, icons etc. We follow latest design trends and trying to provide material of current significance.</dd>
<dt><a href="http://qvectors.com/">QVectors</a></dt>
<dd>QVectors.com is a Showcase site for free quality vector images from around the net.</dd>
<dt><a href="http://resources.bloguite.com/category/vectorial">Graphic Resources</a></dt>
<dd>Graphic Resources is all about gathering resources that may be useful to designers, web designers or just about everyone.</dd>
<dt><a href="http://www.grafplus.com/category/vectors/">Graf Plus</a></dt>
<dd>No Description</dd>
<dt><a href="http://www.vecteezy.com/">Vecteezy</a></dt>
<dd>Vecteezy is an index of Free Vector Graphics available for download by some of the best artists around the world. The site is updated every day, so be sure to check back often.</dd>
<dt><a href="http://www.vectorart.org/">Vector Art</a></dt>
<dd>Free vector illustration file downloads. Full use of the .eps and .ai files. All our vector art downloads are free to use under Creative Commons 3.0</dd>
<dt><a href="http://www.vectorific.com/">Vectorific</a></dt>
<dd>Updated regularly, Vectorific offers the best free stock vectors and vector tutorials on the web in one location.</dd>
<dt><a href="http://vectorlogo.blogspot.com/">Vector of the World</a></dt>
<dd>None</dd>
<dt><a href="http://www.vectorportal.com/">Vector Portal</a></dt>
<dd>Vectorportal is huge database of free vector files offered under Creative Commons Attribution License. Users can freely use our artwork for their designs. During 4 years of existence Vectorportal has constantly gained popularity in graphic design community. To this day, we have registered more than 2 million downloads.</dd>
<dt><a href="http://vectorss.com/">Vectorss</a></dt>
<dd>For designers we find the best vectoric resources of internet and gather all of them in our website. We add new resources day by day and present them for your admire. We hope it will be useful for you.</dd>
<dt><a href="http://www.vectorstock.com/free-vectors">Vector Stock</a></dt>
<dd>None</dd>
<dt><a href="http://vectorstuff.blogspot.com/">Vector Stuff</a></dt>
<dd>None</dd>
<dt><a href="http://vector.tutsplus.com/category/freebies/">Vector Tuts</a></dt>
<dd>None</dd>
<dt><a href="http://www.vectorvalley.com/">Vector Valley</a></dt>
<dd>The main objective is collecting quality vectors in one place and available for free download.</dd>
</dl>
<h3>Resources (Paid)</h3>
<dl>
<dt><a href="http://www.crestock.com/vector/buy.aspx">Crestock</a></dt>
<dd>None</dd>
<dt><a href="http://www.gomedia.us/arsenal/vector-art-graphics.html">Arsenal Professional Design Weaponry</a></dt>
<dd>Throughout the years, we&#8217;ve developed a large library of design elements such as vector art, textures, fonts, brushes, etc. We&#8217;ve called it our &#8220;arsenal&#8221; of design weaponry. It wasn&#8217;t until recently we started sharing our Arsenal with you. So choose your weapon and get to work!</dd>
<dt><a href="http://www.istockphoto.com/illustration.php">iStock Photo</a></dt>
<dd>None</dd>
<dt><a href="http://graphicriver.net/category/vectors">Graphic River</a></dt>
<dd>None</dd>
<dt><a href="http://www.mrvector.com/">Mr. Vector</a></dt>
<dd>Mr. Vector was started by two people with a passion for design and vector artwork. With years of experience in the screen printing/sign industry and with design in general, the idea of creating vector stock artwork that would be creative and relevant was a natural step.</dd>
<dt><a href="http://www.vectorstock.com/">Vector Stock</a></dt>
<dd>None</dd>
<dt><a href="http://store.vectorvault.com/">Vector Vault</a></dt>
<dd>At Vectorvault, we&#8217;re constantly striving to improve ourselves by bringing you the best from the world of vector art. We&#8217;ve listened to your feedback, and used it to develop a whole new way to find the vectors you need.</dd>
</dl>
]]></content:encoded>
			<wfw:commentRss>http://dolfo.org/2009/06/the-definitive-list-of-vector-art/feed/</wfw:commentRss>
		</item>
		<item>
		<title>5 Pointz by Passetti</title>
		<link>http://dolfo.org/2009/06/5-pointz-by-passetti/</link>
		<comments>http://dolfo.org/2009/06/5-pointz-by-passetti/#comments</comments>
		<pubDate>Fri, 05 Jun 2009 14:01:00 +0000</pubDate>
		<dc:creator>Jose Cuadra</dc:creator>
		
		<category><![CDATA[Feature]]></category>

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

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

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

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

		<category><![CDATA[New York]]></category>

		<guid isPermaLink="false">http://dolfo.org/?p=722</guid>
		<description><![CDATA[



Recently I came across a photoset displaying photos from 5 Pointz. This art studio has apparently allowed it&#8217;s walls to be covered in graffiti.



&#8220;Right around the corner of the PS1 museum of modern art you&#8217;ll find Five Pointz, a block full of the best grafitti art to be found in the Big Apple. We shot [...]]]></description>
			<content:encoded><![CDATA[<p>
<img class="entryImg" src="http://www.dolfo.org/imgs/blog/06052009Prev.png" title="Flickr Photoset Preview" alt="Flickr Photoset Preview Photo" />
</p>
<p>
Recently I came across a photoset displaying photos from 5 Pointz. This art studio has apparently allowed it&#8217;s walls to be covered in <a href="http://en.wikipedia.org/wiki/Graffitti">graffiti</a>.
</p>
<p><span id="more-722"></span></p>
<blockquote class="quote" cite="Rene Passet"><p>
&#8220;Right around the corner of the <a href="http://ps1.org/">PS1</a> museum of modern art you&#8217;ll find <a href="http://en.wikipedia.org/wiki/5_Pointzi">Five Pointz</a>, a block full of the best grafitti art to be found in the Big Apple. We shot more than 200 pics in under an hour. Here&#8217;s a small collection.&#8221; -<a href="http://www.flickr.com/people/passetti/">Rene Passet</a>
</p></blockquote>
<p class="photo">
<a href="http://www.flickr.com/photos/passetti/3595322323/"><img src="http://www.dolfo.org/imgs/blog/06052009/3595322323_20facd5c73.png" title="5 Pointz, Queens NY" alt="5 Pointz graffiti" /></a>
</p>
<p class="photo">
<a href="http://www.flickr.com/photos/passetti/3596127552/"><img src="http://www.dolfo.org/imgs/blog/06052009/3596127552_51a1124f18.png" title="5 Pointz, Queens NY" alt="5 Pointz graffiti" /></a>
</p>
<p class="photo">
<a href="http://www.flickr.com/photos/passetti/3592315977/"><img src="http://www.dolfo.org/imgs/blog/06052009/3592315977_4bf541348c.png" title="5 Pointz, Queens NY" alt="5 Pointz graffiti" /></a>
</p>
<p class="photo">
<a href="http://www.flickr.com/photos/passetti/3596125344/"><img src="http://www.dolfo.org/imgs/blog/06052009/3596125344_60b84a0d33.png" title="5 Pointz, Queens NY" alt="5 Pointz graffiti" /></a>
</p>
<p>
To see the entire set visit <a href="http://www.flickr.com/photos/passetti/sets/72157619200702530/">flickr</a> or use <a href="http://dolfo.org/apps/flitebox/?photoset=72157619200702530">fliteBox</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://dolfo.org/2009/06/5-pointz-by-passetti/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Target Blank for XHTML</title>
		<link>http://dolfo.org/2009/04/target-blank-for-xhtml/</link>
		<comments>http://dolfo.org/2009/04/target-blank-for-xhtml/#comments</comments>
		<pubDate>Tue, 21 Apr 2009 23:36:00 +0000</pubDate>
		<dc:creator>Jose Cuadra</dc:creator>
		
		<category><![CDATA[Reference]]></category>

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

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

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

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

		<guid isPermaLink="false">http://dolfo.org/?p=621</guid>
		<description><![CDATA[
Given that the target attribute for the anchor tag does not comply with the W3C recommendation, which in turn does not validate, creating a new window for a link is not possible using a Strict XHTML Doctype.


Solution

Instead of changing the Doctype you may use JavaScript to open a new window. Writing a script for each [...]]]></description>
			<content:encoded><![CDATA[<p>
Given that the target attribute for the anchor tag does not comply with the W3C recommendation, which in turn does not validate, creating a new window for a link is not possible using a Strict XHTML Doctype.
</p>
<p><span id="more-621"></span></p>
<h3>Solution</h3>
<p>
Instead of changing the Doctype you may use JavaScript to open a new window. Writing a script for each anchor link would be too time consuming so we automate the process by grabbing all the Anchor links and then looping through them to see if they contain the &#8220;targetBlank&#8221; class.
</p>
<h3>JavaScript</h3>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> int<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
<span style="color: #006600; font-style: italic;">//Create an Array with all the Anchor Nodes</span>
<span style="color: #003366; font-weight: bold;">var</span> anchors <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;a&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">//Loop through all the Anchor Nodes</span>
<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i <span style="color: #339933;">&lt;</span> anchors.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
<span style="color: #006600; font-style: italic;">//If an Anchor Node contains the string &quot;targetBlank&quot; in it's class then assign the onclick event to it.</span>
<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>anchors<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">className</span>.<span style="color: #660066;">search</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/targetBlank/</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">!=</span> <span style="color: #339933;">-</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
anchors<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">onclick</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
<span style="color: #003366; font-weight: bold;">var</span> href <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">getAttribute</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;href&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> blankWindow <span style="color: #339933;">=</span> window.<span style="color: #000066;">open</span><span style="color: #009900;">&#40;</span>href<span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
blankWindow.<span style="color: #000066;">focus</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>	
<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
window.<span style="color: #000066;">onload</span> <span style="color: #339933;">=</span> int<span style="color: #339933;">;</span></pre></div></div>

<h3>CSS</h3>
<p>
This CSS is not required to make this entire solution function correctly. Simply for aesthetics the style sheet provides a small popup image to the right of each &#8220;targetBlank&#8221; link.
</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">a.targetBlank<span style="color: #00AA00;">&#123;</span>
<span style="color: #000000; font-weight: bold;">padding-right</span><span style="color: #00AA00;">:</span><span style="color: #933;">20px</span><span style="color: #00AA00;">;</span>
<span style="color: #000000; font-weight: bold;">background-repeat</span><span style="color: #3333ff;">:no-</span>repeat<span style="color: #00AA00;">;</span>
<span style="color: #000000; font-weight: bold;">background-position</span><span style="color: #3333ff;">:<span style="color: #000000; font-weight: bold;">right</span> </span>center<span style="color: #00AA00;">;</span>
<span style="color: #000000; font-weight: bold;">background-image</span><span style="color: #00AA00;">:</span><span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000;">&quot;../imgs/popIcon.png&quot;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div>

<h3>XHTML</h3>
<p>
All that you need is to apply the name &#8220;targetBlank&#8221; class to an anchor link.
</p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;a class=&quot;targetBlank&quot; href=&quot;http://www.google.com&quot;&gt;A new page to Google&lt;/a&gt;</pre></div></div>

<p>
<a href="http://dolfo.org/demos/04212009/">Demo</a>
</p>
<p>
<a href="http://dolfo.org/demos/04212009.zip">Download</a></p>
]]></content:encoded>
			<wfw:commentRss>http://dolfo.org/2009/04/target-blank-for-xhtml/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Dreamweaver CS3 Start and Crash Bug</title>
		<link>http://dolfo.org/2009/04/dreamweaver-cs3-start-and-crash-bug/</link>
		<comments>http://dolfo.org/2009/04/dreamweaver-cs3-start-and-crash-bug/#comments</comments>
		<pubDate>Fri, 10 Apr 2009 17:16:31 +0000</pubDate>
		<dc:creator>Jose Cuadra</dc:creator>
		
		<category><![CDATA[Reference]]></category>

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

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

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

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

		<guid isPermaLink="false">http://dolfo.org/?p=499</guid>
		<description><![CDATA[



I just experienced an unusual bug that prevented Dreamweaver from starting up completely. It actually kept closing by itself right before displaying all the panels.


Solution

After a quick search I found that Dreamweaver will die if a CSS file is around 8kbs(8,192bytes) in size. I couldn&#8217;t believe this until I opened the last file I was [...]]]></description>
			<content:encoded><![CDATA[<p>
<img class="entryImg" src="http://www.dolfo.org/imgs/blog/04102009.png" title="Dreamweaver CS3 Bug" alt="Dreamweaver Logo" />
</p>
<p>
I just experienced an unusual bug that prevented Dreamweaver from starting up completely. It actually kept closing by itself right before displaying all the panels.
</p>
<p><span id="more-499"></span></p>
<h3>Solution</h3>
<p>
After a quick <a href="http://bytes.com/community/misc/724773-dreamweaver-cs3-closes-immediatly-after-opening">search</a> I found that Dreamweaver will die if a CSS file is around 8kbs(8,192bytes) in size. I couldn&#8217;t believe this until I opened the last file I was working on, in notepad, and added a comment in it to enlarge the size. Then I started DW right up without any issue.</p>
]]></content:encoded>
			<wfw:commentRss>http://dolfo.org/2009/04/dreamweaver-cs3-start-and-crash-bug/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Pencil Painting with Nickelsen</title>
		<link>http://dolfo.org/2009/04/pencil-painting-with-nickelsen/</link>
		<comments>http://dolfo.org/2009/04/pencil-painting-with-nickelsen/#comments</comments>
		<pubDate>Tue, 07 Apr 2009 23:12:38 +0000</pubDate>
		<dc:creator>Jose Cuadra</dc:creator>
		
		<category><![CDATA[Reference]]></category>

		<category><![CDATA[Alyona Nickelsen]]></category>

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

		<category><![CDATA[Color Pencil Painting]]></category>

		<category><![CDATA[Color Pencils]]></category>

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

		<category><![CDATA[Online Training]]></category>

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

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

		<category><![CDATA[Realistic Rendering]]></category>

		<category><![CDATA[Stone Henge Paper]]></category>

		<guid isPermaLink="false">http://dolfo.org/?p=408</guid>
		<description><![CDATA[
A new technique I am learning is a process called Color Pencil Painting where you use paint thinner as a blending tool with rich color pencils. Searches of this technique yield one recurring name as a result, Alyona Nickelsen.



Download the latest Flash Player here to View the Video.



Alyona Nickelsen&#8217;s book, Colored Pencil Painting Bible: Techniques [...]]]></description>
			<content:encoded><![CDATA[<p>
A new technique I am learning is a process called Color Pencil Painting where you use paint thinner as a blending tool with rich color pencils. Searches of this technique yield one recurring name as a result, Alyona Nickelsen.
</p>
<p><span id="more-408"></span></p>
<p class="video">
<object style="border:none;" type="application/x-shockwave-flash" data="http://www.youtube.com/v/oE6820o1Isc&#038;hl=en&#038;fs=1&#038;rel=0" width="480" height="385"><param name="movie" value="http://www.youtube.com/v/oE6820o1Isc&#038;hl=en&#038;fs=1&#038;rel=0" /><param name="allowFullScreen" value="true" /><param name="wmode" value="transparent" /><p>Download the latest Flash Player <a href="http://www.adobe.com/products/flashplayer/">here</a> to View the Video.</p>
<p></object>
</p>
<p>
Alyona Nickelsen&#8217;s book, <a href="http://search.barnesandnoble.com/Colored-Pencil-Painting-Bible/Alyona-Nickelsen/e/9780823099207/?itm=1">Colored Pencil Painting Bible: Techniques for Achieving Luminous Color and Ultra-Realistic Effects</a>, is simply amazing, the tools and techniques are easy to get a hold of and understand. A matter of fact, if you have been in the art field for any length of time you might have the tools laying around already.
</p>
<p>
Alyona also offers an Online Pencil Painting School at <a href="http://www.brushandpencil.com/">Brush and Pencil.com</a> where she provides some samples of her portfolio and supplies a biography.
</p>
<p>
A prime example of this persons talent is below, which was done with Prismacolor colored pencils on white Stonehenge paper.
</p>
<p>
<img src="http://www.dolfo.org/imgs/blog/04072009.jpg" title="Summer Time  Copyright &copy; Alyona Nickelsen" alt="Color Pencil Painting" /></p>
]]></content:encoded>
			<wfw:commentRss>http://dolfo.org/2009/04/pencil-painting-with-nickelsen/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Table Behavior without Tables</title>
		<link>http://dolfo.org/2009/03/table-behavior-without-tables/</link>
		<comments>http://dolfo.org/2009/03/table-behavior-without-tables/#comments</comments>
		<pubDate>Sun, 29 Mar 2009 00:43:20 +0000</pubDate>
		<dc:creator>Jose Cuadra</dc:creator>
		
		<category><![CDATA[Reference]]></category>

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

		<category><![CDATA[Internet Explorer]]></category>

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

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

		<guid isPermaLink="false">http://dolfo.org/?p=376</guid>
		<description><![CDATA[
Many times a &#8220;table like&#8221; layout is necessary to abide by the Rule of Thirds law, specially with the currently popular &#8220;magazine&#8221; type website layouts.


Adding a table to the layout would simply be too easy, and wouldn&#8217;t fit into the &#8220;Do Everything without Tables&#8221; mentality plaguing the web. So I demonstrate how to achieve the [...]]]></description>
			<content:encoded><![CDATA[<p>
Many times a &#8220;table like&#8221; layout is necessary to abide by the <cite>Rule of Thirds</cite> law, specially with the currently popular &#8220;magazine&#8221; type website layouts.
</p>
<p>
Adding a table to the layout would simply be too easy, and wouldn&#8217;t fit into the &#8220;Do Everything without Tables&#8221; mentality plaguing the web. So I demonstrate how to achieve the behavior without the table.
</p>
<p><span id="more-376"></span></p>
<p>
Years ago, when the average users monitor resolution only allowed for two column layouts, this would of been achieved by using a table with one row and three columns.
</p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;table width=&quot;960&quot; cellpadding=&quot;10&quot; cellspacing=&quot;0&quot; border=&quot;0&quot;&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td width=&quot;320&quot; valign=&quot;top&quot;&gt;
&lt;h3&gt;Current Features&lt;/h3&gt;
&lt;p&gt;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec purus. Sed rhoncus arcu et orci eleifend interdum. Nullam et eros a lacus imperdiet suscipit. Maecenas interdum, lorem ac scelerisque dapibus, risus velit ullamcorper libero, non scelerisque tellus enim at leo. Vestibulum sem ipsum, convallis vel, eleifend et, dictum ut, arcu. Sed sagittis, urna eu sodales tristique, turpis turpis lobortis ipsum, id varius magna nunc vitae eros. Vivamus sagittis tincidunt elit. Integer velit. Suspendisse potenti. Etiam purus metus, vehicula ac, tincidunt et, congue ut, enim. Phasellus quis arcu quis massa consectetur scelerisque. Maecenas nunc. Integer at risus et odio luctus interdum. Vestibulum facilisis ultricies lorem.
&lt;/p&gt;
&lt;/td&gt;
&lt;td width=&quot;320&quot; valign=&quot;top&quot;&gt;
&lt;h3&gt;Contact Us&lt;/h3&gt;
&lt;p&gt;
Morbi quis diam vitae ipsum ullamcorper posuere. Vestibulum justo neque, cursus ut, vulputate ac, molestie et, tortor. Donec elementum sem. Etiam ut eros eu augue porttitor consectetur. Nullam nulla nisi, dapibus vitae, lobortis laoreet, dictum at, sem. Praesent laoreet leo et metus. Quisque laoreet aliquam magna. Phasellus nulla lorem, luctus at, ultrices vel, fringilla vel, ligula. Mauris quis quam sed urna fermentum fermentum. Nam quam. Pellentesque facilisis orci a orci. Ut et orci sed massa porta vehicula. Integer id purus. Mauris eros. 
&lt;/p&gt;
&lt;/td&gt;
&lt;td width=&quot;320&quot; valign=&quot;top&quot;&gt;
&lt;h3&gt;Download a Trial&lt;/h3&gt;
&lt;p&gt;
Donec laoreet egestas risus. Quisque ipsum sapien, dapibus et, cursus in, placerat sed, nisi. Suspendisse dapibus nunc non velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed bibendum. Ut a metus sit amet nisl malesuada consectetur. Vivamus mi metus, dapibus quis, fermentum id, accumsan eget, nisl. Nam pharetra sodales nulla. Nam libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur vestibulum, sapien quis vehicula hendrerit, justo ante cursus quam, sit amet semper odio diam ullamcorper augue. Vestibulum eros leo, placerat vel, hendrerit sit amet, sollicitudin convallis, enim. Fusce interdum, lectus in sollicitudin gravida, lectus risus lacinia magna, ut tristique ante nulla in arcu. 
&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;</pre></div></div>

<p>
Today with more standard compliant browsers we can utilize two CSS rules that navigate to the same results as a table. Specifically the display:table; on the parent node and the display:table-cell; assigned to the definition lists will provide the table like functionality that we are looking for.
</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">div.columns<span style="color: #00AA00;">&#123;</span>
<span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #933;">0px</span> <span style="color: #993333;">auto</span><span style="color: #00AA00;">;</span>
<span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">960px</span><span style="color: #00AA00;">;</span>
<span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span>table<span style="color: #00AA00;">;</span>
<span style="color: #000000; font-weight: bold;">font-family</span><span style="color: #3333ff;">:Arial</span><span style="color: #00AA00;">,</span> Helvetica<span style="color: #00AA00;">,</span> <span style="color: #993333;">sans-serif</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
div<span style="color: #6666ff;">.columns</span> dl.column<span style="color: #00AA00;">&#123;</span>
<span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #933;">10px</span><span style="color: #00AA00;">;</span>
<span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">320px</span><span style="color: #00AA00;">;</span>
<span style="color: #000000; font-weight: bold;">display</span><span style="color: #3333ff;">:table-</span>cell<span style="color: #00AA00;">;</span>
<span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#000</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
div<span style="color: #6666ff;">.columns</span> dl<span style="color: #6666ff;">.column</span> dt<span style="color: #00AA00;">&#123;</span>
<span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span><span style="color: #933;">24px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
div<span style="color: #6666ff;">.columns</span> dl<span style="color: #6666ff;">.column</span> dd<span style="color: #00AA00;">&#123;</span>
<span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #933;">0px</span><span style="color: #00AA00;">;</span>
<span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span><span style="color: #933;">14px</span><span style="color: #00AA00;">;</span>
<span style="color: #000000; font-weight: bold;">line-height</span><span style="color: #00AA00;">:</span><span style="color: #933;">20px</span><span style="color: #00AA00;">;</span>
<span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span><span style="color: #993333;">justify</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>
I chose to use a definition list because of the Definition Title(dt) and Definition Description(dd) that comes pre packaged with the element. That way the content we have to divide up in three columns already have spots for their titles and content.
</p>
<p>
The entire list must be contained in a parent element that will serve as the table.
</p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;div class=&quot;columns&quot;&gt;
&lt;dl class=&quot;column&quot;&gt;
&lt;dt&gt;Current Features&lt;/dt&gt;
&lt;dd&gt;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec purus. Sed rhoncus arcu et orci eleifend interdum. Nullam et eros a lacus imperdiet suscipit. Maecenas interdum, lorem ac scelerisque dapibus, risus velit ullamcorper libero, non scelerisque tellus enim at leo. Vestibulum sem ipsum, convallis vel, eleifend et, dictum ut, arcu. Sed sagittis, urna eu sodales tristique, turpis turpis lobortis ipsum, id varius magna nunc vitae eros. Vivamus sagittis tincidunt elit. Integer velit. Suspendisse potenti. Etiam purus metus, vehicula ac, tincidunt et, congue ut, enim. Phasellus quis arcu quis massa consectetur scelerisque. Maecenas nunc. Integer at risus et odio luctus interdum. Vestibulum facilisis ultricies lorem.
&lt;/dd&gt;
&lt;/dl&gt;
&lt;dl class=&quot;column&quot;&gt;
&lt;dt&gt;Contact Us&lt;/dt&gt;
&lt;dd&gt;
Morbi quis diam vitae ipsum ullamcorper posuere. Vestibulum justo neque, cursus ut, vulputate ac, molestie et, tortor. Donec elementum sem. Etiam ut eros eu augue porttitor consectetur. Nullam nulla nisi, dapibus vitae, lobortis laoreet, dictum at, sem. Praesent laoreet leo et metus. Quisque laoreet aliquam magna. Phasellus nulla lorem, luctus at, ultrices vel, fringilla vel, ligula. Mauris quis quam sed urna fermentum fermentum. Nam quam. Pellentesque facilisis orci a orci. Ut et orci sed massa porta vehicula. Integer id purus. Mauris eros. 
&lt;/dd&gt;
&lt;/dl&gt;
&lt;dl class=&quot;column&quot;&gt;
&lt;dt&gt;Download a Trial&lt;/dt&gt;
&lt;dd&gt;
Donec laoreet egestas risus. Quisque ipsum sapien, dapibus et, cursus in, placerat sed, nisi. Suspendisse dapibus nunc non velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed bibendum. Ut a metus sit amet nisl malesuada consectetur. Vivamus mi metus, dapibus quis, fermentum id, accumsan eget, nisl. Nam pharetra sodales nulla. Nam libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur vestibulum, sapien quis vehicula hendrerit, justo ante cursus quam, sit amet semper odio diam ullamcorper augue. Vestibulum eros leo, placerat vel, hendrerit sit amet, sollicitudin convallis, enim. Fusce interdum, lectus in sollicitudin gravida, lectus risus lacinia magna, ut tristique ante nulla in arcu. 
&lt;/dd&gt;
&lt;/dl&gt;
&lt;/div&gt;</pre></div></div>

<p>
Now of course with IE7 and below there is an issue with this rendering correctly. IE(with the exception of IE8!) does not recognize the two rules we used.  So using <a href="http://dolfo.org/2009/02/ie-conditional-comments/">conditional statements</a> add the following rules to fix the problem.
</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">div<span style="color: #6666ff;">.columns</span> dl.column<span style="color: #00AA00;">&#123;</span>
<span style="color: #808080; font-style: italic;">/*we subtract pixels from the original width so IE displays them on one row.*/</span>
<span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">300px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
div<span style="color: #6666ff;">.columns</span> dl.column<span style="color: #00AA00;">&#123;</span>
<span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div>

<h3>Example</h3>
<p>
<a href="http://dolfo.org/demos/03282009/">http://dolfo.org/demos/03282009/</a>
</p>
<h3>Download</h3>
<p>
<a href="http://dolfo.org/demos/03282009/">http://dolfo.org/demos/03282009.zip</a></p>
]]></content:encoded>
			<wfw:commentRss>http://dolfo.org/2009/03/table-behavior-without-tables/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Flash Slideshow in Actionscript 3</title>
		<link>http://dolfo.org/2009/03/flash-slideshow-in-actionscript-3/</link>
		<comments>http://dolfo.org/2009/03/flash-slideshow-in-actionscript-3/#comments</comments>
		<pubDate>Fri, 27 Mar 2009 00:13:18 +0000</pubDate>
		<dc:creator>Jose Cuadra</dc:creator>
		
		<category><![CDATA[Application]]></category>

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

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

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

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

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

		<guid isPermaLink="false">http://dolfo.org/?p=300</guid>
		<description><![CDATA[
&#8220;Simple Slide&#8221; is an automated slide show that can also be used for banner ads. Download it now to tweak it for your specific application.



The application simply rotates a predefined number of images with a fading transition effect.


Editable options


Delay

The JavaScript file(int.js) contains the delay time, between transitions, in milliseconds.(secondx1000)

XML File Location

The JavaScript file(int.js) contains the [...]]]></description>
			<content:encoded><![CDATA[<p>
&#8220;Simple Slide&#8221; is an automated slide show that can also be used for banner ads. Download it now to tweak it for your specific application.
</p>
<p><span id="more-300"></span></p>
<p>
The application simply rotates a predefined number of images with a fading transition effect.
</p>
<h3>
Editable options<br />
</h3>
<dl>
<dt>Delay</dt>
<dd>
The JavaScript file(int.js) contains the delay time, between transitions, in milliseconds.(secondx1000)
</dd>
<dt>XML File Location</dt>
<dd>
The JavaScript file(int.js) contains the path to the XML file.
</dd>
<dt>Image File Locations</dt>
<dd>
The file locations for the images you want to include are located in the XML file.
</dd>
</dl>
<h3>XML Structure:</h3>

<div class="wp_syntax"><div class="code"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;?xml</span> <span style="color: #000066;">version</span>=<span style="color: #ff0000;">&quot;1.0&quot;</span> <span style="color: #000066;">encoding</span>=<span style="color: #ff0000;">&quot;utf-8&quot;</span><span style="color: #000000; font-weight: bold;">?&gt;</span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;images<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;img</span> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">&quot;imgs/sidebar.png&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;img</span> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">&quot;imgs/tatt.jpg&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;img</span> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">&quot;imgs/supes.jpg&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/images<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></div></div>

<h3>Document Class:</h3>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;">package <span style="color: #66cc66;">&#123;</span>
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">display</span>.<span style="color: #006600;">Sprite</span>;
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">display</span>.<span style="color: #006600;">Loader</span>;
	<span style="color: #0066CC;">import</span> fl.<span style="color: #006600;">transitions</span>.<span style="color: #006600;">Tween</span>;
	<span style="color: #0066CC;">import</span> fl.<span style="color: #006600;">transitions</span>.<span style="color: #006600;">easing</span>.<span style="color: #66cc66;">*</span>;
	<span style="color: #0066CC;">import</span> fl.<span style="color: #006600;">transitions</span>.<span style="color: #006600;">TweenEvent</span>;
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">events</span>.<span style="color: #006600;">Event</span>;
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">events</span>.<span style="color: #006600;">MouseEvent</span>;
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">utils</span>.<span style="color: #006600;">Timer</span>;
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">events</span>.<span style="color: #006600;">TimerEvent</span>;
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">net</span>.<span style="color: #006600;">URLLoader</span>;
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">net</span>.<span style="color: #006600;">URLRequest</span>;
	<span style="color: #0066CC;">import</span> flash.<span style="color: #0066CC;">xml</span>.<span style="color: #006600;">XMLDocument</span>;
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">net</span>.<span style="color: #006600;">navigateToURL</span>;
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">display</span>.<span style="color: #006600;">StageAlign</span>;
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">display</span>.<span style="color: #006600;">StageScaleMode</span>;
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">utils</span>.<span style="color: #006600;">Dictionary</span>;
	<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> slideShow <span style="color: #0066CC;">extends</span> Sprite <span style="color: #66cc66;">&#123;</span>
		<span style="color: #000000; font-weight: bold;">var</span> count:<span style="color: #0066CC;">Number</span> = <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #0066CC;">Number</span><span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">0</span><span style="color: #66cc66;">&#41;</span>;
		<span style="color: #000000; font-weight: bold;">var</span> imgList:XMLList = <span style="color: #000000; font-weight: bold;">new</span> XMLList<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
		<span style="color: #000000; font-weight: bold;">var</span> paramList:<span style="color: #0066CC;">Object</span>;
		<span style="color: #000000; font-weight: bold;">var</span> xmlPath:<span style="color: #0066CC;">String</span> = <span style="color: #ff0000;">&quot;../xml/sidebar.xml&quot;</span>;
		<span style="color: #000000; font-weight: bold;">var</span> seconds:uint = <span style="color: #cc66cc;">1000</span>;
		<span style="color: #808080; font-style: italic;">//Storing the tween globally temporarily prevents it from being dumped prematurely.</span>
		<span style="color: #808080; font-style: italic;">//Fix From: http://www.scottgmorgan.com/blog/index.php/2007/11/18/as3-garbage-collection-the-reason-your-tweens-are-ending-early/</span>
		<span style="color: #000000; font-weight: bold;">var</span> antiGC:Dictionary = <span style="color: #000000; font-weight: bold;">new</span> Dictionary<span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">false</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> slideShow<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span> <span style="color: #66cc66;">&#123;</span>
			<span style="color: #0066CC;">stage</span>.<span style="color: #0066CC;">scaleMode</span> = StageScaleMode.<span style="color: #006600;">NO_SCALE</span>;
			<span style="color: #0066CC;">stage</span>.<span style="color: #0066CC;">align</span> = StageAlign.<span style="color: #006600;">TOP_LEFT</span>;
&nbsp;
&nbsp;
			<span style="color: #000000; font-weight: bold;">var</span> xmlLoader:URLLoader = <span style="color: #000000; font-weight: bold;">new</span> URLLoader<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
			paramList = <span style="color: #0066CC;">this</span>.<span style="color: #006600;">root</span>.<span style="color: #006600;">loaderInfo</span>.<span style="color: #006600;">parameters</span>;
			<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span>paramList<span style="color: #66cc66;">&#91;</span><span style="color: #ff0000;">&quot;xmlPath&quot;</span><span style="color: #66cc66;">&#93;</span> <span style="color: #66cc66;">!</span>= <span style="color: #0066CC;">undefined</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
				xmlPath = paramList<span style="color: #66cc66;">&#91;</span><span style="color: #ff0000;">&quot;xmlPath&quot;</span><span style="color: #66cc66;">&#93;</span>;
				seconds = paramList<span style="color: #66cc66;">&#91;</span><span style="color: #ff0000;">&quot;delay&quot;</span><span style="color: #66cc66;">&#93;</span>;
			<span style="color: #66cc66;">&#125;</span>
			<span style="color: #000000; font-weight: bold;">var</span> xmlURL:URLRequest = <span style="color: #000000; font-weight: bold;">new</span> URLRequest<span style="color: #66cc66;">&#40;</span>xmlPath<span style="color: #66cc66;">&#41;</span>;
			xmlLoader.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span>Event.<span style="color: #006600;">COMPLETE</span>, intSlideShow, <span style="color: #000000; font-weight: bold;">false</span>, <span style="color: #cc66cc;">0</span>, <span style="color: #000000; font-weight: bold;">true</span><span style="color: #66cc66;">&#41;</span>;
			intLoading<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
			<span style="color: #000000; font-weight: bold;">function</span> intLoading<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
				xmlLoader.<span style="color: #0066CC;">load</span><span style="color: #66cc66;">&#40;</span>xmlURL<span style="color: #66cc66;">&#41;</span>;
			<span style="color: #66cc66;">&#125;</span>
		<span style="color: #66cc66;">&#125;</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> intSlideShow<span style="color: #66cc66;">&#40;</span>evt:Event<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span> <span style="color: #66cc66;">&#123;</span>
			evt.<span style="color: #0066CC;">target</span>.<span style="color: #006600;">removeEventListener</span><span style="color: #66cc66;">&#40;</span>Event.<span style="color: #006600;">COMPLETE</span>, intSlideShow<span style="color: #66cc66;">&#41;</span>;
			<span style="color: #000000; font-weight: bold;">var</span> xmlDoc:<span style="color: #0066CC;">XML</span> = <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #0066CC;">XML</span><span style="color: #66cc66;">&#40;</span>evt.<span style="color: #0066CC;">target</span>.<span style="color: #0066CC;">data</span><span style="color: #66cc66;">&#41;</span>;
			imgList = xmlDoc.<span style="color: #006600;">children</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
			loadImage<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> loadImage<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span> <span style="color: #66cc66;">&#123;</span>
			<span style="color: #000000; font-weight: bold;">var</span> imgLoader:Loader = <span style="color: #000000; font-weight: bold;">new</span> Loader<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
			<span style="color: #000000; font-weight: bold;">var</span> imgURL:URLRequest = <span style="color: #000000; font-weight: bold;">new</span> URLRequest<span style="color: #66cc66;">&#40;</span>imgList<span style="color: #66cc66;">&#91;</span>count<span style="color: #66cc66;">&#93;</span>.<span style="color: #66cc66;">@</span>src<span style="color: #66cc66;">&#41;</span>;
			imgLoader.<span style="color: #006600;">contentLoaderInfo</span>.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span>Event.<span style="color: #006600;">COMPLETE</span>, displayObject<span style="color: #66cc66;">&#41;</span>;
			imgLoader.<span style="color: #0066CC;">load</span><span style="color: #66cc66;">&#40;</span>imgURL<span style="color: #66cc66;">&#41;</span>;
			count++;
			<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span>count<span style="color: #66cc66;">&gt;</span>imgList.<span style="color: #0066CC;">length</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>-<span style="color: #cc66cc;">1</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
				count=<span style="color: #cc66cc;">0</span>;
			<span style="color: #66cc66;">&#125;</span>
		<span style="color: #66cc66;">&#125;</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> displayObject<span style="color: #66cc66;">&#40;</span>evt:Event<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span> <span style="color: #66cc66;">&#123;</span>
			evt.<span style="color: #0066CC;">target</span>.<span style="color: #006600;">removeEventListener</span><span style="color: #66cc66;">&#40;</span>Event.<span style="color: #006600;">COMPLETE</span>, displayObject<span style="color: #66cc66;">&#41;</span>;
			<span style="color: #000000; font-weight: bold;">var</span> slide:Sprite = <span style="color: #000000; font-weight: bold;">new</span> Sprite<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
			slide.<span style="color: #006600;">addChild</span><span style="color: #66cc66;">&#40;</span>evt.<span style="color: #0066CC;">target</span>.<span style="color: #006600;">content</span><span style="color: #66cc66;">&#41;</span>;
			slide.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span>Event.<span style="color: #006600;">ADDED_TO_STAGE</span>, addedToStage<span style="color: #66cc66;">&#41;</span>;
			<span style="color: #0066CC;">stage</span>.<span style="color: #006600;">addChild</span><span style="color: #66cc66;">&#40;</span>slide<span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> addedToStage<span style="color: #66cc66;">&#40;</span>evt:Event<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
			<span style="color: #000000; font-weight: bold;">var</span> animate:Tween = <span style="color: #000000; font-weight: bold;">new</span> Tween<span style="color: #66cc66;">&#40;</span>evt.<span style="color: #0066CC;">target</span>, <span style="color: #ff0000;">&quot;alpha&quot;</span>, None.<span style="color: #006600;">easeNone</span>, <span style="color: #cc66cc;">0</span>, <span style="color: #cc66cc;">1</span>, .4, <span style="color: #000000; font-weight: bold;">true</span><span style="color: #66cc66;">&#41;</span>;
			animate.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span>TweenEvent.<span style="color: #006600;">MOTION_FINISH</span>, finishedTween<span style="color: #66cc66;">&#41;</span>;
			antiGC<span style="color: #66cc66;">&#91;</span>animate<span style="color: #66cc66;">&#93;</span> = animate;
		<span style="color: #66cc66;">&#125;</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> finishedTween<span style="color: #66cc66;">&#40;</span>evt:TweenEvent<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
			antiGC<span style="color: #66cc66;">&#91;</span>evt.<span style="color: #006600;">currentTarget</span><span style="color: #66cc66;">&#93;</span> = <span style="color: #000000; font-weight: bold;">null</span>;
			<span style="color: #0066CC;">delete</span> antiGC<span style="color: #66cc66;">&#91;</span>evt.<span style="color: #006600;">currentTarget</span><span style="color: #66cc66;">&#93;</span>;
			<span style="color: #000000; font-weight: bold;">var</span> delay:Timer = <span style="color: #000000; font-weight: bold;">new</span> Timer<span style="color: #66cc66;">&#40;</span>seconds, <span style="color: #cc66cc;">1</span><span style="color: #66cc66;">&#41;</span>;
			delay.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span>TimerEvent.<span style="color: #006600;">TIMER_COMPLETE</span>, hideObject<span style="color: #66cc66;">&#41;</span>;
			delay.<span style="color: #0066CC;">start</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
			<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">stage</span>.<span style="color: #006600;">numChildren</span>-<span style="color: #cc66cc;">1</span><span style="color: #66cc66;">&gt;</span><span style="color: #cc66cc;">1</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
				<span style="color: #0066CC;">stage</span>.<span style="color: #006600;">removeChildAt</span><span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">1</span><span style="color: #66cc66;">&#41;</span>;
			<span style="color: #66cc66;">&#125;</span>
		<span style="color: #66cc66;">&#125;</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> hideObject<span style="color: #66cc66;">&#40;</span>evt:Event<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span> <span style="color: #66cc66;">&#123;</span>
			loadImage<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
	<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span></pre></div></div>

<h3>Demo</h3>
<p>
<a class="demo" href="http://dolfo.org/demos/03262009/">Simple Slide Demo</a>
</p>
<h3>Download</h3>
<p>
<a class="download" href="http://dolfo.org/downloads/03262009.zip">Simple Slide v1</a>
</p>
<h3>Credits</h3>
<p>
I use <a href="http://code.google.com/p/swfobject/">SWFObject</a> to embed the swf and pass the required parameters to the stage.
</p>
<p>
Also I used a method found <a href="http://www.scottgmorgan.com/blog/index.php/2007/11/18/as3-garbage-collection-the-reason-your-tweens-are-ending-early/">here</a> to force the Tween to fully complete.</p>
]]></content:encoded>
			<wfw:commentRss>http://dolfo.org/2009/03/flash-slideshow-in-actionscript-3/feed/</wfw:commentRss>
		</item>
		<item>
		<title>JavaScripted Tooltips</title>
		<link>http://dolfo.org/2009/03/javascripted-tooltips/</link>
		<comments>http://dolfo.org/2009/03/javascripted-tooltips/#comments</comments>
		<pubDate>Tue, 24 Mar 2009 15:21:41 +0000</pubDate>
		<dc:creator>Jose Cuadra</dc:creator>
		
		<category><![CDATA[Reference]]></category>

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

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

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

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

		<guid isPermaLink="false">http://dolfo.org/?p=295</guid>
		<description><![CDATA[
Here is a simple attempt at some JavaScripted tooltips. I expect there to be bugs when you have two &#8220;sticky&#8221; tooltips overlapping each other.



http://dolfo.org/demos/03242008/


I will elaborate more, maybe with a guide or tutorial, when I have some time to properly release this as a finished product.(Consider this Beta 1) If you surf the CSS, JS, [...]]]></description>
			<content:encoded><![CDATA[<p>
Here is a simple attempt at some JavaScripted tooltips. I expect there to be bugs when you have two &#8220;sticky&#8221; tooltips overlapping each other.
</p>
<p><span id="more-295"></span></p>
<p>
<a href="http://dolfo.org/demos/03242009/">http://dolfo.org/demos/03242008/</a>
</p>
<p>
I will elaborate more, maybe with a guide or tutorial, when I have some time to properly release this as a finished product.(Consider this Beta 1) If you surf the CSS, JS, and XHTML sources you will realize they are straightforward to implement.
</p>
<p>
For a quick alternative check out my <a href="http://dolfo.org/2008/08/javascriptless-tool-tips/">JavaScriptless Tooltips</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://dolfo.org/2009/03/javascripted-tooltips/feed/</wfw:commentRss>
		</item>
	</channel>
</rss>
