<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>TechTrouts.com &#187; how-tos</title>
	<atom:link href="http://techtrouts.com/topics/how-tos/feed/" rel="self" type="application/rss+xml" />
	<link>http://techtrouts.com</link>
	<description>Doin' the dev dance o/</description>
	<lastBuildDate>Thu, 23 Jul 2009 10:42:09 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Webkit: Entity &#8216;nbsp&#8217; not defined &#8211; Convert HTML entities to XML</title>
		<link>http://techtrouts.com/webkit-entity-nbsp-not-defined-convert-html-entities-to-xml/</link>
		<comments>http://techtrouts.com/webkit-entity-nbsp-not-defined-convert-html-entities-to-xml/#comments</comments>
		<pubDate>Fri, 24 Oct 2008 12:27:10 +0000</pubDate>
		<dc:creator>Carlos Ouro</dc:creator>
				<category><![CDATA[how-tos]]></category>
		<category><![CDATA[xml]]></category>

		<guid isPermaLink="false">http://techtrouts.com/webkit-entity-nbsp-not-defined-convert-html-entities-to-xml/</guid>
		<description><![CDATA[This is a very common XHTML mistake, now growing in visibility much due to the Google Chrome boom. Google Chrome is based on Webkit, an open source browser engine also used in Apple&#8217;s Safari; Webkit is very restrict on XHTML rules; This particular error is caused due to common HTML entities usage on XHTML outputs, [...]]]></description>
			<content:encoded><![CDATA[<p>This is a very common XHTML mistake, now growing in visibility much due to the <a href="http://www.google.com/chrome" target="_blank" title="Google Chrome - Download a new browser">Google Chrome</a> boom.<br />
Google Chrome is based on <a href="http://webkit.org/" target="_blank" title="The WebKit Open Source Project">Webkit</a>, an open source browser engine also used in <a href="http://www.apple.com/safari/" target="_blank" title="Apple - Safari">Apple&#8217;s Safari</a>; Webkit is very restrict on XHTML rules;</p>
<p>This particular error is caused due to common HTML entities usage on XHTML outputs, which follows XML entities rules.<br />Basically means you are using a &amp;nbsp;-like entity, when in XHTML you should use a &amp;#160;-like entity;<br />The only named entities for XML are &amp;amp;, &amp;gt; and &amp;lt;. For all others you need to use the Unicode character code (eg. &amp;#160;). </p>
<p>Here&#8217;s a HTML to XML entities conversion table: </p>
<table>
<tr>
<td style="padding:3px;border:1px #bbb solid;">Character</td>
<td style="padding:3px;border:1px #bbb solid;">HTML entity</td>
<td style="padding:3px;border:1px #bbb solid;">XML entity</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#34;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;quot;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#34;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#38;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;amp;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#38;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#60;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;lt;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#60;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#62;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;gt;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#62;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#160;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;nbsp;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#160;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#161;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;iexcl;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#161;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#162;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;cent;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#162;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#163;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;pound;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#163;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#164;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;curren;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#164;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#165;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;yen;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#165;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#166;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;brvbar;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#166;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#167;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;sect;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#167;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#168;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;uml;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#168;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#169;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;copy;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#169;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#170;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;ordf;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#170;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#171;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;laquo;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#171;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#172;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;not;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#172;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#173;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;shy;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#173;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#174;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;reg;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#174;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#175;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;macr;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#175;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#176;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;deg;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#176;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#177;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;plusmn;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#177;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#178;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;sup2;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#178;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#179;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;sup3;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#179;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#180;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;acute;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#180;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#181;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;micro;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#181;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#182;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;para;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#182;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#183;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;middot;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#183;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#184;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;cedil;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#184;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#185;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;sup1;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#185;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#186;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;ordm;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#186;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#187;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;raquo;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#187;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#188;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;frac14;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#188;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#189;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;frac12;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#189;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#190;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;frac34;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#190;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#191;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;iquest;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#191;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#192;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;Agrave;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#192;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#193;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;Aacute;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#193;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#194;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;Acirc;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#194;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#195;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;Atilde;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#195;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#196;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;Auml;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#196;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#197;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;Aring;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#197;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#198;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;AElig;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#198;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#199;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;Ccedil;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#199;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#200;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;Egrave;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#200;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#201;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;Eacute;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#201;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#202;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;Ecirc;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#202;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#203;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;Euml;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#203;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#204;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;Igrave;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#204;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#205;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;Iacute;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#205;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#206;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;Icirc;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#206;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#207;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;Iuml;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#207;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#208;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;ETH;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#208;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#209;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;Ntilde;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#209;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#210;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;Ograve;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#210;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#211;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;Oacute;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#211;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#212;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;Ocirc;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#212;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#213;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;Otilde;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#213;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#214;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;Ouml;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#214;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#215;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;times;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#215;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#216;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;Oslash;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#216;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#217;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;Ugrave;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#217;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#218;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;Uacute;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#218;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#219;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;Ucirc;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#219;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#220;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;Uuml;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#220;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#221;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;Yacute;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#221;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#222;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;THORN;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#222;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#223;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;szlig;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#223;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#224;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;agrave;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#224;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#225;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;aacute;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#225;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#226;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;acirc;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#226;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#227;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;atilde;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#227;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#228;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;auml;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#228;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#229;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;aring;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#229;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#230;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;aelig;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#230;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#231;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;ccedil;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#231;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#232;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;egrave;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#232;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#233;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;eacute;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#233;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#234;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;ecirc;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#234;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#235;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;euml;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#235;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#236;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;igrave;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#236;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#237;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;iacute;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#237;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#238;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;icirc;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#238;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#239;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;iuml;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#239;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#240;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;eth;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#240;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#241;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;ntilde;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#241;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#242;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;ograve;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#242;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#243;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;oacute;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#243;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#244;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;ocirc;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#244;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#245;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;otilde;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#245;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#246;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;ouml;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#246;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#247;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;divide;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#247;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#248;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;oslash;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#248;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#249;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;ugrave;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#249;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#250;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;uacute;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#250;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#251;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;ucirc;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#251;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#252;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;uuml;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#252;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#253;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;yacute;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#253;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#254;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;thorn;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#254;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#255;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;yuml;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#255;</td>
</tr>
<tr>
<td style="padding:3px;border:1px #bbb solid;">&#8364;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;euro;</td>
<td style="padding:3px;border:1px #bbb solid;">&amp;#8364;</td>
</tr>
</table>
]]></content:encoded>
			<wfw:commentRss>http://techtrouts.com/webkit-entity-nbsp-not-defined-convert-html-entities-to-xml/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Adium set away plugin for QuickSilver</title>
		<link>http://techtrouts.com/adium-set-away-plugin-for-quicksilver/</link>
		<comments>http://techtrouts.com/adium-set-away-plugin-for-quicksilver/#comments</comments>
		<pubDate>Thu, 17 Jul 2008 16:27:15 +0000</pubDate>
		<dc:creator>Carlos Ouro</dc:creator>
				<category><![CDATA[applescript]]></category>
		<category><![CDATA[how-tos]]></category>
		<category><![CDATA[mac]]></category>

		<guid isPermaLink="false">http://techtrouts.com/adium-set-away-plugin-for-quicksilver/</guid>
		<description><![CDATA[Ahhh, i tryed using some Adium away applescripts for QuickSilver posted at  blacktree but couldn&#8217;t get them to work, either no one ever tested it or they were designed for a really old Adium version. So i wrote a couple of simple QuickSilver plugins to support setting away and back on all accounts on Adium [...]]]></description>
			<content:encoded><![CDATA[<p>Ahhh,</p>
<p>i tryed using some Adium away applescripts for <a href="http://blacktree.com/" title="QuickSilver Homepage" target="_blank">QuickSilver</a> posted at  blacktree but couldn&#8217;t get them to work, either no one ever tested it or they were designed for a really old Adium version.<br />
So i wrote a couple of simple QuickSilver plugins to support setting away and back on all accounts on Adium 1.2+.</p>
<p><a href="http://techtrouts.com/downloads/QS_Adium_Away.zip" title="Adium set away plugin for QuickSilver">You can download them here!</a></p>
<p>Just unpack the zip and copy the applescript files to  &#8220;~/Library/Application Support/Quicksilver/Actions&#8221;, you might have to create the &#8220;Actions&#8221; folder.<br />
Restart Quicksilver and you&#8217;re done, just type &#8220;Adium set away&#8221; or &#8220;Adium Back from Away&#8221; in QS to use them :)</p>
]]></content:encoded>
			<wfw:commentRss>http://techtrouts.com/adium-set-away-plugin-for-quicksilver/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>mootools: how to drag through icon (two items simultaneously)</title>
		<link>http://techtrouts.com/mootools-how-to-drag-through-icon-two-items-simultaneously/</link>
		<comments>http://techtrouts.com/mootools-how-to-drag-through-icon-two-items-simultaneously/#comments</comments>
		<pubDate>Fri, 11 Jul 2008 15:44:16 +0000</pubDate>
		<dc:creator>Carlos Ouro</dc:creator>
				<category><![CDATA[development]]></category>
		<category><![CDATA[how-tos]]></category>
		<category><![CDATA[mootools]]></category>

		<guid isPermaLink="false">http://techtrouts.com/mootools-how-to-drag-through-icon-two-items-simultaneously/</guid>
		<description><![CDATA[If you have a box (div) and a dragging icon (a anchor) on it, and you want to drag the box by clicking on the icon you just have to make the box draggable and set the handle of the drag to the icon. Here it is, for: 1 2 3 &#60;div id=&#34;example&#34;&#62; &#60;a id=&#34;drag_button&#34; [...]]]></description>
			<content:encoded><![CDATA[<p>If you have a box (div) and a dragging icon (a anchor) on it, and you want to drag the box by clicking on the icon you just have to make the box draggable and set the handle of the drag to the icon.</p>
<p>Here it is, for:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;example&quot;</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;drag_button&quot;</span> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;cursor:pointer;cursor:hand;&quot;</span>&gt;</span>Drag<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span></pre></td></tr></table></div>

<p>Just use:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'example'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">makeDraggable</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>handle<span style="color: #339933;">:</span>$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'drag_button'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Notes on IE:<br />
The drag button element &#8220;&lt;a&gt;&#8221; can&#8217;t take href=&#8221;#&#8221; and can&#8217;t contain an image, as it will make it draggable by windows and will not work as supposed.<br />
If you require to insert an image into it then use it as a background image for the drag button element, and set the element&#8217;s height and width according to the image for proper appearance:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;example&quot;</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;example&quot;</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;drag_button&quot;</span> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;background:url(img_location.png) no-repeat;width:15px;height:15px;cursor:pointer;cursor:hand;&quot;</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span></pre></td></tr></table></div>

]]></content:encoded>
			<wfw:commentRss>http://techtrouts.com/mootools-how-to-drag-through-icon-two-items-simultaneously/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Mootools: nice portfolio by 9tree using kwicks (Fx.Elements) and slides</title>
		<link>http://techtrouts.com/mootools-nice-portfolio-by-9tree-using-kwicks-fxelements-and-slides/</link>
		<comments>http://techtrouts.com/mootools-nice-portfolio-by-9tree-using-kwicks-fxelements-and-slides/#comments</comments>
		<pubDate>Tue, 24 Jun 2008 16:05:26 +0000</pubDate>
		<dc:creator>Carlos Ouro</dc:creator>
				<category><![CDATA[development]]></category>
		<category><![CDATA[how-tos]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[mootools]]></category>

		<guid isPermaLink="false">http://techtrouts.com/mootools-nice-portfolio-by-9tree-using-kwicks-fxelements-and-slides/</guid>
		<description><![CDATA[Hello, I&#8217;m just finishing our new website and i&#8217;ve been posting here the effects i&#8217;ve created for it. This one is a little more &#8220;show off&#8221;; It&#8217;s the way we&#8217;ve set up our portfolio using Fx.Elements for the togglers and Slides for the presentation images. You can check how it works here. Using this html: [...]]]></description>
			<content:encoded><![CDATA[<p>Hello,</p>
<p>I&#8217;m just finishing <a href="http://9tree.net" title="9tree - Natural Revolution for the Web" target="_blank">our new website </a>and i&#8217;ve been posting here the effects i&#8217;ve created for it.<br />
This one is a little more &#8220;show off&#8221;;<br />
It&#8217;s the way we&#8217;ve set up our portfolio using Fx.Elements for the togglers and Slides for the presentation images.<br />
You can check how it works <a href="http://9tree.net/portfolio/" title="9tree, Portfolio" target="_blank">here</a>.</p>
<p>Using this html:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
</pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span>&gt;</span>	
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;kwicks_pics&quot;</span>&gt;</span>
		<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://4hsa.pt&quot;</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;kwicks_pic&quot;</span>&gt;</span>
		    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/portfolio/4hsa_big.png&quot;</span><span style="color: #66cc66;">/</span>&gt;</span>
		  <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span>
			<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://techtrouts.com&quot;</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;kwicks_pic&quot;</span>&gt;</span>
		    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/portfolio/techtrouts_big.png&quot;</span><span style="color: #66cc66;">/</span>&gt;</span>
		  <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span>
			<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://webandcookies.com&quot;</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;kwicks_pic&quot;</span>&gt;</span>
		    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/portfolio/wac_big.png&quot;</span><span style="color: #66cc66;">/</span>&gt;</span>
		  <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;kwicks&quot;</span>&gt;</span>
	  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://4hsa.pt&quot;</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;image&quot;</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;kwick&quot;</span>&gt;</span>
	    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/portfolio/4hsa1.png&quot;</span> <span style="color: #000066;">title</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;4HSA - Qualidade e Seguran&amp;ccedil;a Alimentar&quot;</span> <span style="color: #000066;">alt</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;4HSA - Qualidade e Seguran&amp;ccedil;a Alimentar&quot;</span><span style="color: #66cc66;">/</span>&gt;</span>
	  <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span>
		<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://techtrouts.com&quot;</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;kwick&quot;</span>&gt;</span>
	    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/portfolio/techtrouts1.png&quot;</span><span style="color: #66cc66;">/</span>&gt;</span>
	  <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span>
		<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://webandcookies.com&quot;</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;kwick&quot;</span>&gt;</span>
	    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/portfolio/webandcookies1.png&quot;</span><span style="color: #66cc66;">/</span>&gt;</span>
	  <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span></pre></td></tr></table></div>

<p>This css:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
</pre></td><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #cc00cc;">#kwicks_pics</span> <span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">visibility</span><span style="color: #00AA00;">:</span><span style="color: #993333;">hidden</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">clear</span><span style="color: #00AA00;">:</span><span style="color: #993333;">both</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">880px</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">300px</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;">center</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#kwicks_pics</span> <span style="color: #6666ff;">.kwicks_pic</span> <span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">block</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#kwicks</span> <span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">clear</span><span style="color: #00AA00;">:</span><span style="color: #993333;">both</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #993333;">auto</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">180px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#kwicks</span> <span style="color: #6666ff;">.kwick</span> <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: #808080; font-style: italic;">/*width should be the same as javascript's var szNormal*/</span>
	<span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span> <span style="color: #933;">55px</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>And this Javascript:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">window.<span style="color: #660066;">addEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'domready'</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>
&nbsp;
	<span style="color: #003366; font-weight: bold;">var</span> sequential <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//changed to true requires to pass every intermediate image on slide</span>
	<span style="color: #003366; font-weight: bold;">var</span> szNormal <span style="color: #339933;">=</span> <span style="color: #CC0000;">55</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//should be the same as css #kwicks .kwick{width}</span>
	<span style="color: #003366; font-weight: bold;">var</span> szSmall  <span style="color: #339933;">=</span> <span style="color: #CC0000;">50</span><span style="color: #339933;">,</span> szFull <span style="color: #339933;">=</span> <span style="color: #CC0000;">250</span><span style="color: #339933;">,</span> selected<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> kwicks <span style="color: #339933;">=</span> $$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#kwicks .kwick&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> fx <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Fx.<span style="color: #660066;">Elements</span><span style="color: #009900;">&#40;</span>kwicks<span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>wait<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">,</span> duration<span style="color: #339933;">:</span> <span style="color: #CC0000;">350</span><span style="color: #339933;">,</span> transition<span style="color: #339933;">:</span> Fx.<span style="color: #660066;">Transitions</span>.<span style="color: #000066;">Back</span>.<span style="color: #660066;">easeOut</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> kwickspics<span style="color: #339933;">=</span>$$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#kwicks_pics .kwicks_pic&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #003366; font-weight: bold;">var</span> kwickspics_obj<span style="color: #339933;">=</span><span style="color: #009900;">&#123;</span>
		movingTo<span style="color: #339933;">:</span><span style="color: #009900;">&#40;</span>kwickspics.<span style="color: #660066;">length</span><span style="color: #339933;">-</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
		selected<span style="color: #339933;">:</span><span style="color: #009900;">&#40;</span>kwickspics.<span style="color: #660066;">length</span><span style="color: #339933;">-</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
		next_i<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">,</span>
		checking<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">,</span>
		on_move<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">,</span>
		wait_delay_move<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">,</span>
		the_fxs<span style="color: #339933;">:</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
		init<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>
			kwickspics.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>kwickspic<span style="color: #339933;">,</span> i<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				kwickspics_obj.<span style="color: #660066;">the_fxs</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">new</span> Fx.<span style="color: #660066;">Slide</span><span style="color: #009900;">&#40;</span>kwickspic<span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>
					duration<span style="color: #339933;">:</span> <span style="color: #CC0000;">200</span><span style="color: #339933;">,</span>
					<span style="color: #006600; font-style: italic;">//transition: Fx.Transitions.Back.easeOut,  -- transitions here return error on IE7, no idea why :/</span>
					onComplete<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: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>kwickspics_obj.<span style="color: #660066;">wait_delay_move</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
						kwickspics_obj.<span style="color: #660066;">wait_delay_move</span><span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
						setTimeout<span style="color: #009900;">&#40;</span>kwickspics_obj.<span style="color: #660066;">checkStep</span><span style="color: #339933;">,</span><span style="color: #CC0000;">100</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
						<span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span>
					<span style="color: #009900;">&#125;</span>
					<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>kwickspics_obj.<span style="color: #660066;">next_i</span><span style="color: #339933;">!==</span><span style="color: #003366; font-weight: bold;">false</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
						kwickspics_obj.<span style="color: #660066;">wait_delay_move</span><span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
						kwickspics_obj.<span style="color: #660066;">the_fxs</span><span style="color: #009900;">&#91;</span>kwickspics_obj.<span style="color: #660066;">next_i</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">slideIn</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
						kwickspics_obj.<span style="color: #660066;">selected</span><span style="color: #339933;">=</span>kwickspics_obj.<span style="color: #660066;">next_i</span><span style="color: #339933;">;</span>
						kwickspics_obj.<span style="color: #660066;">on_move</span><span style="color: #339933;">=</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;">&#41;</span><span style="color: #339933;">;</span>
				kwickspics_obj.<span style="color: #660066;">the_fxs</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'kwicks_pics'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">style</span>.<span style="color: #660066;">visibility</span><span style="color: #339933;">=</span><span style="color: #3366CC;">'visible'</span><span style="color: #339933;">;</span>
			kwickspics_obj.<span style="color: #660066;">the_fxs</span><span style="color: #009900;">&#91;</span>kwickspics_obj.<span style="color: #660066;">selected</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">slideIn</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
		moveTo<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>i<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			kwickspics_obj.<span style="color: #660066;">movingTo</span><span style="color: #339933;">=</span>i<span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>kwickspics_obj.<span style="color: #660066;">checking</span><span style="color: #009900;">&#41;</span> kwickspics_obj.<span style="color: #660066;">checkStep</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
		checkStep<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: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>kwickspics_obj.<span style="color: #660066;">on_move</span> <span style="color: #339933;">||</span> kwickspics_obj.<span style="color: #660066;">movingTo</span><span style="color: #339933;">==</span>kwickspics_obj.<span style="color: #660066;">selected</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				kwickspics_obj.<span style="color: #660066;">checking</span><span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
				<span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
			kwickspics_obj.<span style="color: #660066;">checking</span><span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
			kwickspics_obj.<span style="color: #660066;">on_move</span><span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
&nbsp;
			<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>sequential<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				<span style="color: #006600; font-style: italic;">//requires to pass every image</span>
				kwickspics_obj.<span style="color: #660066;">next_i</span> <span style="color: #339933;">=</span> kwickspics_obj.<span style="color: #660066;">selected</span><span style="color: #339933;">&amp;</span>gt<span style="color: #339933;">;</span>kwickspics_obj.<span style="color: #660066;">movingTo</span> <span style="color: #339933;">?</span>  kwickspics_obj.<span style="color: #660066;">selected</span><span style="color: #339933;">-</span><span style="color: #CC0000;">1</span> <span style="color: #339933;">:</span> kwickspics_obj.<span style="color: #660066;">selected</span><span style="color: #339933;">+</span><span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
				<span style="color: #006600; font-style: italic;">//go directly to final image</span>
			<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> kwickspics_obj.<span style="color: #660066;">next_i</span><span style="color: #339933;">=</span>kwickspics_obj.<span style="color: #660066;">movingTo</span><span style="color: #339933;">;</span>
			kwickspics_obj.<span style="color: #660066;">the_fxs</span><span style="color: #009900;">&#91;</span>kwickspics_obj.<span style="color: #660066;">selected</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">slideOut</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: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
&nbsp;
	<span style="color: #009900;">&#125;</span>
	kwickspics_obj.<span style="color: #660066;">init</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>	
&nbsp;
	kwicks.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>kwick<span style="color: #339933;">,</span> i<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		kwick.<span style="color: #660066;">addEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;mouseenter&quot;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>event<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #003366; font-weight: bold;">var</span> o <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
			o<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>width<span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span>kwick.<span style="color: #660066;">getStyle</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;width&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">toInt</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> szFull<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#125;</span>
			kwicks.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>other<span style="color: #339933;">,</span> j<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>i <span style="color: #339933;">!=</span> j<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
					<span style="color: #003366; font-weight: bold;">var</span> w <span style="color: #339933;">=</span> other.<span style="color: #660066;">getStyle</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;width&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">toInt</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;">if</span><span style="color: #009900;">&#40;</span>w <span style="color: #339933;">!=</span> szSmall<span style="color: #009900;">&#41;</span> o<span style="color: #009900;">&#91;</span>j<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>width<span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span>w<span style="color: #339933;">,</span> szSmall<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			fx.<span style="color: #660066;">start</span><span style="color: #009900;">&#40;</span>o<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			kwickspics_obj.<span style="color: #660066;">moveTo</span><span style="color: #009900;">&#40;</span>i<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;kwicks&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">addEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;mouseleave&quot;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>event<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> o <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
		kwicks.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>kwick<span style="color: #339933;">,</span> i<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			o<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>width<span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span>kwick.<span style="color: #660066;">getStyle</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;width&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">toInt</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> szNormal<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#125;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		fx.<span style="color: #660066;">start</span><span style="color: #009900;">&#40;</span>o<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>Hope you&#8217;ll put it to good work ;)</p>
]]></content:encoded>
			<wfw:commentRss>http://techtrouts.com/mootools-nice-portfolio-by-9tree-using-kwicks-fxelements-and-slides/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Mootools: smooth font resize onmouseover (mouseenter) &#8220;bump&#8221;</title>
		<link>http://techtrouts.com/mootools-smooth-font-resize-onmouseover-mouseenter-bump/</link>
		<comments>http://techtrouts.com/mootools-smooth-font-resize-onmouseover-mouseenter-bump/#comments</comments>
		<pubDate>Tue, 24 Jun 2008 15:36:04 +0000</pubDate>
		<dc:creator>Carlos Ouro</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[how-tos]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[mootools]]></category>

		<guid isPermaLink="false">http://techtrouts.com/mootools-smooth-font-resize-onmouseover-mouseenter-bump/</guid>
		<description><![CDATA[Hello, this is the smooth font resize for css class &#8220;.bump&#8221; effect. Just put class=&#8221;bump&#8221; on the items you want and use the following javascript somewhere on your page. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 [...]]]></description>
			<content:encoded><![CDATA[<p>Hello,</p>
<p>this is the smooth font resize for css class &#8220;.bump&#8221; effect.<br />
Just put <em>class=&#8221;bump&#8221;</em> on the items you want and use the following javascript somewhere on your page.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">window.<span style="color: #660066;">addEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'domready'</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> 
&nbsp;
	<span style="color: #006600; font-style: italic;">//scaling values</span>
	<span style="color: #003366; font-weight: bold;">var</span> scale_px<span style="color: #339933;">=</span><span style="color: #CC0000;">6</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> scale_em<span style="color: #339933;">=</span><span style="color: #CC0000;">0.3</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #003366; font-weight: bold;">var</span> bumps<span style="color: #339933;">=</span>$$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.bump'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	bumps.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>bump<span style="color: #339933;">,</span> i<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> init_size<span style="color: #339933;">=</span>bump.<span style="color: #660066;">getStyle</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'font-size'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #003366; font-weight: bold;">var</span> units<span style="color: #339933;">=</span>init_size.<span style="color: #660066;">match</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/em/</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">!=</span><span style="color: #003366; font-weight: bold;">null</span> <span style="color: #339933;">?</span> <span style="color: #3366CC;">'em'</span> <span style="color: #339933;">:</span> init_size.<span style="color: #660066;">match</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/px/</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">!=</span><span style="color: #003366; font-weight: bold;">null</span> <span style="color: #339933;">?</span> <span style="color: #3366CC;">'px'</span> <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>units<span style="color: #339933;">===</span><span style="color: #003366; font-weight: bold;">false</span><span style="color: #009900;">&#41;</span> <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #003366; font-weight: bold;">var</span> size_up<span style="color: #339933;">=</span><span style="color: #009900;">&#40;</span>init_size.<span style="color: #660066;">toFloat</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">+</span><span style="color: #009900;">&#40;</span>units<span style="color: #339933;">==</span><span style="color: #3366CC;">'em'</span> <span style="color: #339933;">?</span> scale_em <span style="color: #339933;">:</span> scale_px<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">+</span>units<span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> fx<span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">new</span> Fx.<span style="color: #660066;">Morph</span><span style="color: #009900;">&#40;</span>bump<span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>duration<span style="color: #339933;">:</span><span style="color: #CC0000;">90</span><span style="color: #339933;">,</span> wait<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">,</span> transition<span style="color: #339933;">:</span>Fx.<span style="color: #660066;">Transitions</span>.<span style="color: #000066;">Back</span>.<span style="color: #660066;">easeOut</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		bump.<span style="color: #660066;">addEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;mouseenter&quot;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>event<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			fx.<span style="color: #660066;">start</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
				<span style="color: #3366CC;">'font-size'</span><span style="color: #339933;">:</span>size_up
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		bump.<span style="color: #660066;">addEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;mouseleave&quot;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>event<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			fx.<span style="color: #660066;">start</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
				<span style="color: #3366CC;">'font-size'</span><span style="color: #339933;">:</span>init_size
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>Note: In order for this to work on IE7 you need to have some font-size defined in your css for every &#8220;.bump&#8221; on your page. Otherwise font-size will return &#8220;100%&#8221;, and it get&#8217;s impossible to know how to resize &#8211; i&#8217;ve tried it &#8211; damn IE :/</p>
<p>You can check it working <a href="http://9tree.net/" title="9tree - Natural Revolution for the Web" target="_blank">here</a>, on the links under &#8220;We Provide:&#8221;.<br />
Tanks :)</p>
]]></content:encoded>
			<wfw:commentRss>http://techtrouts.com/mootools-smooth-font-resize-onmouseover-mouseenter-bump/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>MooTools: smoothscroll highlight element id and highlight anchor onload</title>
		<link>http://techtrouts.com/mootools-on-complete-smoothscroll-highlight-element-id/</link>
		<comments>http://techtrouts.com/mootools-on-complete-smoothscroll-highlight-element-id/#comments</comments>
		<pubDate>Mon, 23 Jun 2008 23:25:04 +0000</pubDate>
		<dc:creator>Carlos Ouro</dc:creator>
				<category><![CDATA[development]]></category>
		<category><![CDATA[how-tos]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[mootools]]></category>

		<guid isPermaLink="false">http://techtrouts.com/mootools-on-complete-smoothscroll-highlight-element-id/</guid>
		<description><![CDATA[Hi, i&#8217;ve created a little script for highlighting an element onComplete of the Mootools&#8217; SmoothScroll. I&#8217;ve also added a line to highlight the selected anchor onload, in case the url already contains the anchor hash on page load. Here it is: Mootools 1.1 Version: 1 2 3 4 5 6 7 8 9 10 11 [...]]]></description>
			<content:encoded><![CDATA[<p>Hi,</p>
<p>i&#8217;ve created a little script for highlighting an element onComplete of the Mootools&#8217; SmoothScroll.<br />
I&#8217;ve also added a line to highlight the selected anchor onload, in case the url already contains the anchor hash on page load.</p>
<p>Here it is:</p>
<p>Mootools 1.1 Version:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">window.<span style="color: #660066;">addEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'domready'</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> 
&nbsp;
	<span style="color: #006600; font-style: italic;">//default colors - if 'background-color' or 'color' aren't defined in css</span>
	<span style="color: #003366; font-weight: bold;">var</span> default_bg_color<span style="color: #339933;">=</span><span style="color: #3366CC;">'#fff'</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> default_color<span style="color: #339933;">=</span><span style="color: #3366CC;">'#000'</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">//highlight colors</span>
	<span style="color: #003366; font-weight: bold;">var</span> h_bg_color<span style="color: #339933;">=</span><span style="color: #3366CC;">'#eeeebb'</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> h_color<span style="color: #339933;">=</span><span style="color: #3366CC;">'#999'</span><span style="color: #339933;">;</span>
&nbsp;
	highlight_anchors<span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>item_id<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>$<span style="color: #009900;">&#40;</span>item_id<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">typeof</span> $$<span style="color: #009900;">&#40;</span>item_id<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">'undefined'</span> <span style="color: #339933;">||</span> <span style="color: #000066; font-weight: bold;">typeof</span> $$<span style="color: #009900;">&#40;</span>item_id<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">id</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">'undefined'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> item_id<span style="color: #339933;">=</span>$$<span style="color: #009900;">&#40;</span>item_id<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">id</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
		<span style="color: #003366; font-weight: bold;">var</span> fx <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Fx.<span style="color: #660066;">Styles</span><span style="color: #009900;">&#40;</span>item_id<span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>duration<span style="color: #339933;">:</span><span style="color: #CC0000;">400</span><span style="color: #339933;">,</span> wait<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">false</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #003366; font-weight: bold;">var</span> has_bg_color <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span>item_id<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">getStyle</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'background-color'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> $<span style="color: #009900;">&#40;</span>item_id<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">getStyle</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'background-color'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">!=</span><span style="color: #3366CC;">'transparent'</span><span style="color: #339933;">?</span><span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> has_color <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span>item_id<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">getStyle</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'color'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> $<span style="color: #009900;">&#40;</span>item_id<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">getStyle</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'color'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">!=</span><span style="color: #3366CC;">'inherit'</span><span style="color: #339933;">?</span><span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> cur_bg_color<span style="color: #339933;">=</span> has_bg_color <span style="color: #339933;">?</span> $<span style="color: #009900;">&#40;</span>item_id<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">getStyle</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'background-color'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> default_bg_color<span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> cur_color<span style="color: #339933;">=</span> has_color <span style="color: #339933;">?</span> $<span style="color: #009900;">&#40;</span>item_id<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">getStyle</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'color'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> default_color<span style="color: #339933;">;</span>
		fx.<span style="color: #660066;">start</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
				<span style="color: #3366CC;">'background-color'</span><span style="color: #339933;">:</span> h_bg_color<span style="color: #339933;">,</span>
				<span style="color: #3366CC;">'color'</span><span style="color: #339933;">:</span> h_color
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">chain</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">start</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
					<span style="color: #3366CC;">'background-color'</span><span style="color: #339933;">:</span> cur_bg_color<span style="color: #339933;">,</span>
					<span style="color: #3366CC;">'color'</span><span style="color: #339933;">:</span> cur_color
				<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">chain</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
					<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>has_bg_color<span style="color: #009900;">&#41;</span> $<span style="color: #009900;">&#40;</span>item_id<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">setStyle</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'background-color'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'transparent'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>has_color<span style="color: #009900;">&#41;</span> $<span style="color: #009900;">&#40;</span>item_id<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">setStyle</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'color'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'inherit'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</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;">true</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">//if anchor hash already exists, highlight onload</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;">location</span>.<span style="color: #660066;">hash</span> <span style="color: #339933;">!=</span> <span style="color: #3366CC;">'undefined'</span><span style="color: #009900;">&#41;</span> highlight_anchors<span style="color: #009900;">&#40;</span>window.<span style="color: #660066;">location</span>.<span style="color: #660066;">hash</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">//setup smoothscroll</span>
	<span style="color: #003366; font-weight: bold;">new</span> SmoothScroll<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span> duration<span style="color: #339933;">:</span> <span style="color: #CC0000;">1000</span><span style="color: #339933;">,</span> onComplete<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>
		highlight_anchors<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">anchor</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>Mootools 1.2 version:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">&nbsp;
window.<span style="color: #660066;">addEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'domready'</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> 
&nbsp;
	<span style="color: #006600; font-style: italic;">//default colors - if 'background-color' or 'color aren't defined in css</span>
	<span style="color: #003366; font-weight: bold;">var</span> default_bg_color<span style="color: #339933;">=</span><span style="color: #3366CC;">'#fff'</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> default_color<span style="color: #339933;">=</span><span style="color: #3366CC;">'#000'</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">//highlight colors</span>
	<span style="color: #003366; font-weight: bold;">var</span> h_bg_color<span style="color: #339933;">=</span><span style="color: #3366CC;">'#eeeebb'</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> h_color<span style="color: #339933;">=</span><span style="color: #3366CC;">'#999'</span><span style="color: #339933;">;</span>
&nbsp;
	highlight_anchors<span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>item_id<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>item_id<span style="color: #339933;">==</span><span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</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: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>$<span style="color: #009900;">&#40;</span>item_id<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">typeof</span> $$<span style="color: #009900;">&#40;</span>item_id<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">'undefined'</span> <span style="color: #339933;">||</span> <span style="color: #000066; font-weight: bold;">typeof</span> $$<span style="color: #009900;">&#40;</span>item_id<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">id</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">'undefined'</span> <span style="color: #339933;">||</span> $$<span style="color: #009900;">&#40;</span>item_id<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">id</span><span style="color: #339933;">==</span><span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> item_id<span style="color: #339933;">=</span>$$<span style="color: #009900;">&#40;</span>item_id<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">id</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
&nbsp;
		<span style="color: #003366; font-weight: bold;">var</span> fx <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Fx.<span style="color: #660066;">Morph</span><span style="color: #009900;">&#40;</span>item_id<span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>duration<span style="color: #339933;">:</span><span style="color: #CC0000;">400</span><span style="color: #339933;">,</span> wait<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">false</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #003366; font-weight: bold;">var</span> has_bg_color <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span>item_id<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">getStyle</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'background-color'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> $<span style="color: #009900;">&#40;</span>item_id<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">getStyle</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'background-color'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">!=</span><span style="color: #3366CC;">'transparent'</span><span style="color: #339933;">?</span><span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> has_color <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span>item_id<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">getStyle</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'color'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> $<span style="color: #009900;">&#40;</span>item_id<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">getStyle</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'color'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">!=</span><span style="color: #3366CC;">'inherit'</span><span style="color: #339933;">?</span><span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> cur_bg_color<span style="color: #339933;">=</span> has_bg_color <span style="color: #339933;">?</span> $<span style="color: #009900;">&#40;</span>item_id<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">getStyle</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'background-color'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> default_bg_color<span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> cur_color<span style="color: #339933;">=</span> has_color <span style="color: #339933;">?</span> $<span style="color: #009900;">&#40;</span>item_id<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">getStyle</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'color'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> default_color<span style="color: #339933;">;</span>
		fx.<span style="color: #660066;">start</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
				<span style="color: #3366CC;">'background-color'</span><span style="color: #339933;">:</span> h_bg_color<span style="color: #339933;">,</span>
				<span style="color: #3366CC;">'color'</span><span style="color: #339933;">:</span> h_color
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">chain</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">start</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
					<span style="color: #3366CC;">'background-color'</span><span style="color: #339933;">:</span> cur_bg_color<span style="color: #339933;">,</span>
					<span style="color: #3366CC;">'color'</span><span style="color: #339933;">:</span> cur_color
				<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">chain</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
					<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>has_bg_color<span style="color: #009900;">&#41;</span> $<span style="color: #009900;">&#40;</span>item_id<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">setStyle</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'background-color'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'transparent'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>has_color<span style="color: #009900;">&#41;</span> $<span style="color: #009900;">&#40;</span>item_id<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">setStyle</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'color'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'inherit'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</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;">true</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">//if anchor hash already exists, highlight onload</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;">location</span>.<span style="color: #660066;">hash</span> <span style="color: #339933;">!=</span> <span style="color: #3366CC;">'undefined'</span><span style="color: #009900;">&#41;</span> highlight_anchors<span style="color: #009900;">&#40;</span>window.<span style="color: #660066;">location</span>.<span style="color: #660066;">hash</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">//setup smoothscroll</span>
	<span style="color: #003366; font-weight: bold;">new</span> SmoothScroll<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span> duration<span style="color: #339933;">:</span> <span style="color: #CC0000;">1000</span><span style="color: #339933;">,</span> onComplete<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>
		highlight_anchors<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">anchor</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>You can check it working <a href="http://9tree.net/services/#optimizacao_seo" title="9Tree, Web Design And Development Services" target="_blank">here</a>.<br />
Hope it will get useful for someone ;)</p>
]]></content:encoded>
			<wfw:commentRss>http://techtrouts.com/mootools-on-complete-smoothscroll-highlight-element-id/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>What about backward compatibility modules?</title>
		<link>http://techtrouts.com/what-about-backward-compatibility-modules/</link>
		<comments>http://techtrouts.com/what-about-backward-compatibility-modules/#comments</comments>
		<pubDate>Sat, 21 Jun 2008 18:32:53 +0000</pubDate>
		<dc:creator>Carlos Ouro</dc:creator>
				<category><![CDATA[development]]></category>
		<category><![CDATA[how-tos]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[management]]></category>
		<category><![CDATA[mootools]]></category>
		<category><![CDATA[naturePhp]]></category>
		<category><![CDATA[opinion]]></category>

		<guid isPermaLink="false">http://techtrouts.com/what-about-backward-compatibility-modules/</guid>
		<description><![CDATA[Hi again, being working a lot with mootools, dojo, wordpress and some other frameworks and toolkits lately, my question today is this: Why, most of the times, don&#8217;t frameworks and toolkits developers launch any backward compatibility modules at all? It might seem pretty complicated getting old deprecated funcionalities working  on newer, better versions, but, apart [...]]]></description>
			<content:encoded><![CDATA[<p>Hi again,</p>
<p>being working a lot with <a href="http://mootools.net/" title="MooTools - a compact javascript framework">mootools</a>, <a href="http://dojotoolkit.org/" title="The Dojo Toolkit" target="_blank">dojo</a>, <a href="http://wordpress.org/" title="WordPress › Blog Tool and Weblog Platform" target="_blank">wordpress</a> and some other frameworks and toolkits lately, my question today is this:<br />
Why, most of the times, don&#8217;t frameworks and toolkits developers launch any <a href="http://en.wikipedia.org/wiki/Backward_compatibility" title="Backward compatibility - Wikipedia, the free encyclopedia" target="_blank">backward compatibility</a> modules at all?</p>
<p>It might seem pretty complicated getting old deprecated funcionalities working  on newer, better versions, but, apart from some real specific embembed funcionalities, it really shouldn&#8217;t be that hard.</p>
<p>For the following example i&#8217;ll use Mootools as an explanatory example:</p>
<p>All you need is a nicely designed dynamic version transitioning system.<br />
One that allows you to, anytime on the execution, define which version will the following code run on.</p>
<p>Imagine you design a backward compatibility plugin from version B to version A.<br />
On version C you&#8217;ll design a backward compatibility plugin to version B.</p>
<p>So now, on a page running &#8220;mootools-C.js&#8221; you should include the backward compatibility modules &#8220;mootools-back-C-B.js&#8221; and &#8220;mootools-back-B-A.js&#8221;, or a compiled version (having just a copy paste of both previous files content) &#8220;mootools-back-C-to-A.js&#8221;.</p>
<p>So if you run something like &#8220;Mootools.use_version(&#8216;A&#8217;);&#8221; the dynamic version transitioning system would automatically look for it&#8217;s previous version compatilities execution for version B at, let&#8217;s suppose, &#8220;MootoolsBack_C_B();&#8221; and then rerun the same command (&#8220;Mootools.use_version(&#8216;A&#8217;);&#8221;) while already running on version B to travel back to version A (the dynamic version transitioning system, already on version B would run something like &#8220;MootoolsBack_B_A();&#8221;).</p>
<p>This method would, in theory, work for multiple version transitions without having to design a specific plugin for each version to version compatibility. It would save developers hours in trying to put two different tools, based on two different framework/toolkit versions, together on the same execution &#8211; like using both <a href="http://www.e-magine.ro/web-dev-and-design/41/moodalbox_1_3_b2/" title="MOOdalBox 1.3 is now cooking (Beta 2 is here)" target="_blank">MOOdalbox 1.3 beta 2</a> and <a href="http://www.outcut.de/MooFlow/" title="Mooflow (aka Coverflow)" target="_blank">mooflow v0.2</a> in the same page.</p>
<p>The system would work both ways, as you could &#8220;Mootools.version_reset();&#8221; or &#8220;Mootools.use_version(&#8216;C&#8217;);&#8221; to travel back to version C on the rest of the execution, the system would run the consecutive version travel functions eg. &#8220;MootoolsBack_A_B();&#8221; and &#8220;MootoolsBack_B_C();&#8221; and the rest of the code would be running on Mootools version C.</p>
<p>This &#8220;dynamic version transitioning system&#8221; will be used for every release transition on <a href="http://naturephp.org/" title="NaturePhp - An Open Source Natural PHP Toolkit" target="_blank">NaturePhp</a>.<br />
It might not work perfectly at first, but it will certainly relieve many developers&#8217; headaches.</p>
<p>I hope in the future more and more projects start using a system like this.</p>
]]></content:encoded>
			<wfw:commentRss>http://techtrouts.com/what-about-backward-compatibility-modules/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>clear file contents on an unix command line</title>
		<link>http://techtrouts.com/clear-file-contents-on-a-unix-command-line/</link>
		<comments>http://techtrouts.com/clear-file-contents-on-a-unix-command-line/#comments</comments>
		<pubDate>Tue, 17 Jun 2008 12:05:16 +0000</pubDate>
		<dc:creator>Carlos Ouro</dc:creator>
				<category><![CDATA[how-tos]]></category>
		<category><![CDATA[linux]]></category>
		<category><![CDATA[servers]]></category>

		<guid isPermaLink="false">http://techtrouts.com/clear-file-contents-on-a-unix-command-line/</guid>
		<description><![CDATA[this one is pretty useful. in order to clear the contents of &#8220;file.ext&#8221;, just: $&#62;file.ext You&#8217;re actually just putting a null content on the file, but it&#8217;s a very effective way to quickly clear a file contents on unix, especially if you want to keep permissions, etc. Very useful for clearing error logs.]]></description>
			<content:encoded><![CDATA[<p>this one is pretty useful.<br />
in order to clear the contents of &#8220;file.ext&#8221;, just:</p>
<pre>$&gt;file.ext</pre>
<p>You&#8217;re actually just putting a null content on the file, but it&#8217;s a very effective way to quickly clear a file contents on unix, especially if you want to keep permissions, etc.</p>
<p>Very useful for clearing error logs.</p>
]]></content:encoded>
			<wfw:commentRss>http://techtrouts.com/clear-file-contents-on-a-unix-command-line/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>how to install yum on Red Hat Enterprise Linux 4</title>
		<link>http://techtrouts.com/how-to-install-yum-on-red-hat-enterprise-linux-4/</link>
		<comments>http://techtrouts.com/how-to-install-yum-on-red-hat-enterprise-linux-4/#comments</comments>
		<pubDate>Mon, 16 Jun 2008 15:14:59 +0000</pubDate>
		<dc:creator>Carlos Ouro</dc:creator>
				<category><![CDATA[how-tos]]></category>
		<category><![CDATA[linux]]></category>
		<category><![CDATA[servers]]></category>

		<guid isPermaLink="false">http://techtrouts.com/how-to-install-yum-on-red-hat-enterprise-linux-4/</guid>
		<description><![CDATA[This case applies to most Red Hat Enterprise Linux 4, from i386 to i686 machines, i&#8217;ve successfully used it on our Red Hat Enterprise Linux ES release 4 (Nahant Update 6): To use it for other systems / architectures, check the packages given at (check). 1. Get the main packages (check) http://dag.wieers.com/rpm/packages/yum/ $wget http://dag.wieers.com/rpm/packages/yum/yum-2.4.2-0.4.el4.rf.noarch.rpm (check) [...]]]></description>
			<content:encoded><![CDATA[<p>This case applies to most Red Hat Enterprise Linux 4, from i386 to i686 machines, i&#8217;ve successfully used it on our Red Hat Enterprise Linux ES release 4 (Nahant Update 6):<br />
To use it for other systems / architectures, check the packages given at (check).</p>
<p><strong>1. Get the main packages</strong></p>
<p>(check) <a href="http://dag.wieers.com/rpm/packages/yum/" title="yum rpm packages" rel="nofollow" target="_blank">http://dag.wieers.com/rpm/packages/yum/</a></p>
<pre>$wget http://dag.wieers.com/rpm/packages/yum/yum-2.4.2-0.4.el4.rf.noarch.rpm</pre>
<p>(check) <a href="http://rpmfind.net/linux/rpm2html/%3Cbr%3E%3C/a%3Esearch.php?query=libsqlite.so.0&amp;submit=Search+...&amp;system=&amp;arch=" title="libsqlite rpm packages" rel="nofollow" target="_blank">http://rpmfind.net/linux/rpm2html/<br />
search.php?query=libsqlite.so.0&amp;submit=Search+&#8230;&amp;system=&amp;arch=</a></p>
<pre>$wget ftp://fr2.rpmfind.net/linux/PLD/dists/ac/ready/i386/libsqlite-2.8.15-1.i386.rpm</pre>
<p>(check) <a href="http://rpmfind.net/linux/rpm2html/%3Cbr%3E%3C/a%3Esearch.php?query=python-elementtree&amp;submit=Search+...&amp;system=&amp;arch=" title="python-elementtree rpm packages" rel="nofollow" target="_blank">http://rpmfind.net/linux/rpm2html/<br />
search.php?query=python-elementtree&amp;submit=Search+&#8230;&amp;system=&amp;arch=</a></p>
<pre>$wget ftp://rpmfind.net/linux/dag/redhat/el4/en/i386/dag/RPMS/python-elementtree-1.2.6-7.el4.rf.i386.rpm</pre>
<p>(check) <a href="http://rpmfind.net/linux/rpm2html/%3Cbr%3E%3C/a%3Esearch.php?query=python-sqlite&amp;submit=Search+...&amp;system=&amp;arch=" title="python-sqlite rpm packages" rel="nofollow" target="_blank">http://rpmfind.net/linux/rpm2html/<br />
search.php?query=python-sqlite&amp;submit=Search+&#8230;&amp;system=&amp;arch=</a></p>
<pre>$wget ftp://rpmfind.net/linux/dag/redhat/el4/en/i386/dag/RPMS/python-sqlite-0.5.0-1.2.el4.rf.i386.rpm</pre>
<p>(check) <a href="http://rpmfind.net/linux/rpm2html/%3Cbr%3E%3C/a%3Esearch.php?query=urlgrabber&amp;submit=Search+...&amp;system=&amp;arch=" title="python-urlgrabber rpm packages" rel="nofollow" target="_blank">http://rpmfind.net/linux/rpm2html/<br />
search.php?query=urlgrabber&amp;submit=Search+&#8230;&amp;system=&amp;arch=</a></p>
<pre>$wget ftp://rpmfind.net/linux/dag/redhat/el4/en/x86_64/dag/RPMS/python-urlgrabber-2.9.7-1.2.el4.rf.noarch.rpm</pre>
<p><strong>2. Install Rpm&#8217;s</strong></p>
<pre>$rpm -ivh libsqlite-2.8.15-1.i386.rpm
$rpm -ivh python-elementtree-1.2.6-7.el4.rf.i386.rpm
$rpm -ivh python-sqlite-0.5.0-1.2.el4.rf.i386.rpm
$rpm -ivh python-urlgrabber-2.9.7-1.2.el4.rf.noarch.rpm
$rpm -ivh yum-2.4.2-0.4.el4.rf.noarch.rpm</pre>
<p><strong>3. Setup the Repository</strong><br />
(check) <a href="http://dag.wieers.com/rpm/packages/rpmforge-release/" title="rpmforge-release rpm packages" rel="nofollow" target="_blank">http://dag.wieers.com/rpm/packages/rpmforge-release/</a></p>
<pre>$wget http://dag.wieers.com/rpm/packages/rpmforge-release/rpmforge-release-0.3.6-1.el4.rf.i386.rpm
$rpm -ivh rpmforge-release-0.3.6-1.el4.rf.i386.rpm</pre>
<p><strong>4. Yum update all packages</strong></p>
<pre>$yum update</pre>
]]></content:encoded>
			<wfw:commentRss>http://techtrouts.com/how-to-install-yum-on-red-hat-enterprise-linux-4/feed/</wfw:commentRss>
		<slash:comments>45</slash:comments>
		</item>
		<item>
		<title>php cycle through object properties</title>
		<link>http://techtrouts.com/php-cycle-through-object-properties/</link>
		<comments>http://techtrouts.com/php-cycle-through-object-properties/#comments</comments>
		<pubDate>Fri, 13 Jun 2008 10:35:05 +0000</pubDate>
		<dc:creator>Carlos Ouro</dc:creator>
				<category><![CDATA[development]]></category>
		<category><![CDATA[how-tos]]></category>
		<category><![CDATA[naturePhp]]></category>
		<category><![CDATA[php]]></category>

		<guid isPermaLink="false">http://techtrouts.com/php-cycle-through-object-properties/</guid>
		<description><![CDATA[for the example object: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 class Test&#123; &#160; //public props public $var1=&#34;Value 1&#34;; public $var2=&#34;Value 2&#34;; public $var3=&#34;Value 3&#34;; &#160; //private props private $var4=&#34;Value 4&#34;; &#160; //public method public function public_function&#40;&#41;&#123; return true; &#125; &#160; [...]]]></description>
			<content:encoded><![CDATA[<p>for the example object:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">class</span> Test<span style="color: #009900;">&#123;</span>
&nbsp;
    <span style="color: #666666; font-style: italic;">//public props</span>
    <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000088;">$var1</span><span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;Value 1&quot;</span><span style="color: #339933;">;</span>
    <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000088;">$var2</span><span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;Value 2&quot;</span><span style="color: #339933;">;</span>
    <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000088;">$var3</span><span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;Value 3&quot;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #666666; font-style: italic;">//private props</span>
    <span style="color: #000000; font-weight: bold;">private</span> <span style="color: #000088;">$var4</span><span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;Value 4&quot;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #666666; font-style: italic;">//public method</span>
    <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">function</span> public_function<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
         <span style="color: #b1b100;">return</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
&nbsp;
    <span style="color: #666666; font-style: italic;">//private method</span>
    <span style="color: #000000; font-weight: bold;">private</span> <span style="color: #000000; font-weight: bold;">function</span> private_function<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
         <span style="color: #b1b100;">return</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>You can cycle  through the public object properties as you would with an array:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000088;">$test</span><span style="color: #339933;">=</span><span style="color: #000000; font-weight: bold;">new</span> Test<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #b1b100;">foreach</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$test</span> <span style="color: #b1b100;">as</span> <span style="color: #000088;">$prop_name</span><span style="color: #339933;">=&gt;</span><span style="color: #000088;">$prop_value</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    <span style="color: #b1b100;">print</span> <span style="color: #000088;">$prop_name</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'=&amp;gt;'</span><span style="color: #339933;">.</span><span style="color: #000088;">$prop_value</span><span style="color: #339933;">;</span>
    <span style="color: #b1b100;">print</span> <span style="color: #0000ff;">&quot;&lt;br&quot;</span><span style="color: #339933;">.</span><span style="color: #0000ff;">&quot;&gt;&quot;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>The result will be:</p>
<pre>
var1=&gt;Value 1
var2=&gt;Value 2
var3=&gt;Value 3</pre>
]]></content:encoded>
			<wfw:commentRss>http://techtrouts.com/php-cycle-through-object-properties/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
