<?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>benwatts.ca &#187; Javascript</title>
	<atom:link href="http://benwatts.ca/tag/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://benwatts.ca</link>
	<description>Designer and Frontend Developer in Ottawa, Canada</description>
	<lastBuildDate>Fri, 22 Jul 2011 19:00:09 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Resizable HTML AIR Applications</title>
		<link>http://benwatts.ca/2008/resizable-html-air-applications/</link>
		<comments>http://benwatts.ca/2008/resizable-html-air-applications/#comments</comments>
		<pubDate>Sun, 30 Nov 2008 22:40:03 +0000</pubDate>
		<dc:creator>Ben</dc:creator>
				<category><![CDATA[AIR]]></category>
		<category><![CDATA[air]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[resize]]></category>

		<guid isPermaLink="false">http://www.benwatts.ca/?p=262</guid>
		<description><![CDATA[Far easier than I thought it was: $&#40;'#resize'&#41;.mousedown&#40; function&#40;&#41;&#123; &#160; &#160; window.nativeWindow.startResize&#40;'BOTTOM_RIGHT'&#41;; &#160; &#160; // or: BOTTOM, BOTTOM_LEFT, BOTTOM_RIGHT, LEFT, RIGHT, TOP, TOP_LEFT, TOP_RIGHT, NONE &#125;&#41;; You can retrieve the width of the application using the width property of nativeWindow (so: window.nativeWindow.width ). It might be a good idea to prevent your app from getting [...]]]></description>
			<content:encoded><![CDATA[<p>Far easier than I thought it was:</p>
<div class="codecolorer-container javascript default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#resize'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">mousedown</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> <br />
&nbsp; &nbsp; window.<span style="color: #660066;">nativeWindow</span>.<span style="color: #660066;">startResize</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'BOTTOM_RIGHT'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #006600; font-style: italic;">// or: BOTTOM, BOTTOM_LEFT, BOTTOM_RIGHT, LEFT, RIGHT, TOP, TOP_LEFT, TOP_RIGHT, NONE</span><br />
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></div></div>
<p>You can retrieve the width of the application using the width property of nativeWindow (so:</p>
<div class="codecolorer-container text default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><div class="text codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">window.nativeWindow.width</div></div>
<p>). It might be a good idea to prevent your app from getting too small and using scrollbars. </p>
<p>From a development standpoint, with this in mind I guess the idea would be to set the default width of the app in the application descriptor file and then use percentage-widths while styling to keep the app flexible. Ta-da!</p>
]]></content:encoded>
			<wfw:commentRss>http://benwatts.ca/2008/resizable-html-air-applications/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>jQuery Input Text Replacement</title>
		<link>http://benwatts.ca/2008/jquery-input-text-replacement/</link>
		<comments>http://benwatts.ca/2008/jquery-input-text-replacement/#comments</comments>
		<pubDate>Sat, 19 Jul 2008 18:55:33 +0000</pubDate>
		<dc:creator>Ben</dc:creator>
				<category><![CDATA[code]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[function]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://localhost/benwatts.ca/?p=141</guid>
		<description><![CDATA[Edit (July 1, 2011): This snippet has been dated for years. A Modern Approach If you need something quick that targets modern browsers you might want to consider using the HTML5 placeholder attribute instead of a javascript solution. Cross-browser support isn&#8217;t the best (it doesn&#8217;t look like IE9 supports it at all, but if the [...]]]></description>
			<content:encoded><![CDATA[<p><strong class="notice">Edit (July 1, 2011): </strong>This snippet has been dated for <em>years</em>. </p>
<h2>A Modern Approach</h2>
<p>If you need something quick that targets modern browsers you might want to consider using the HTML5 <em>placeholder</em> attribute instead of a javascript solution. Cross-browser support isn&#8217;t the best (it doesn&#8217;t look like IE9 supports it at all, but if the placeholder text isn&#8217;t critical to the functionality it might be the right solution.</p>
<div class="codecolorer-container html4strict default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><div class="html4strict codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text&quot;</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;search&quot;</span> placeholder<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;Search&quot;</span> &nbsp;<span style="color: #66cc66;">/</span>&gt;</span></div></div>
<p><a href="http://diveintohtml5.org/forms.html#placeholder">Further reading</a> on the <em>placeholder</em> attribute. </p>
<p>If that won&#8217;t do it, check out this <a href="http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text" target="_blank">Cross-Browser HTML5 Placeholder Text on Web Designer Wall</a> if you&#8217;re looking for something more modern.</p>
<p>Finally, you can do it with jQuery (or plain ol&#8217; Javascript) as my original post from 2008 demonstrates&#8230;</p>
<p>Thought I&#8217;d save this handy dandy function for later.<br />
Makes the text in an input disappear when you click on the input.</p>
<h2>The Function</h2>
<div class="codecolorer-container javascript default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #003366; font-weight: bold;">function</span> textReplacement<span style="color: #009900;">&#40;</span>input<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp;<span style="color: #003366; font-weight: bold;">var</span> originalvalue <span style="color: #339933;">=</span> input.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp;input.<span style="color: #000066;">focus</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><br />
&nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span> $.<span style="color: #660066;">trim</span><span style="color: #009900;">&#40;</span>input.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">===</span> originalvalue <span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> input.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><br />
&nbsp; &nbsp;<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp;input.<span style="color: #000066;">blur</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><br />
&nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span> $.<span style="color: #660066;">trim</span><span style="color: #009900;">&#40;</span>input.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">===</span> <span style="color: #3366CC;">&quot;&quot;</span> <span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> input.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span>originalvalue<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><br />
&nbsp; &nbsp;<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<span style="color: #009900;">&#125;</span></div></div>
<h2>Using It</h2>
<div class="codecolorer-container javascript default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">textReplacement<span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#inputname'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></div></div>
<p><script type="text/javascript">// <![CDATA[
window.onload = function(){ 
  function textReplacement(input){var originalvalue = input.val();input.focus( function(){if( $.trim(input.val()) == originalvalue ){ input.val(''); }});input.blur( function(){if( $.trim(input.val()) == '' ){ input.val(originalvalue); }});}$(document).ready( function(){textReplacement($('#inputname'));});
}
// ]]&gt;</script></p>
<h2>Example</h2>
<input id="inputname" style="padding: 3px; width: 200px;" value="Click to Disappear" />
]]></content:encoded>
			<wfw:commentRss>http://benwatts.ca/2008/jquery-input-text-replacement/feed/</wfw:commentRss>
		<slash:comments>13</slash:comments>
		</item>
		<item>
		<title>Find Anchors</title>
		<link>http://benwatts.ca/2008/find-anchors/</link>
		<comments>http://benwatts.ca/2008/find-anchors/#comments</comments>
		<pubDate>Sun, 11 May 2008 17:02:27 +0000</pubDate>
		<dc:creator>Ben</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[anchor]]></category>
		<category><![CDATA[function]]></category>
		<category><![CDATA[url]]></category>

		<guid isPermaLink="false">http://seaturtle.rainiscold.ca/?p=23</guid>
		<description><![CDATA[Handy little function &#8230; finds an anchor and returns its text, or returns false. function findAnchor&#40;&#41;&#123; &#160; &#160; var url = document.location.toString&#40;&#41;; &#160; &#160; if&#40; url.match&#40;'#'&#41; &#41;&#123; &#160; &#160; &#160; &#160; return url.split&#40;'#'&#41;&#91;1&#93;; &#160; &#160; &#125; else &#123; &#160; &#160; &#160; &#160; return false; &#160; &#160; &#125; &#125;]]></description>
			<content:encoded><![CDATA[<p>Handy little function &#8230; finds an anchor and returns its text, or returns false.</p>
<div class="codecolorer-container javascript default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #003366; font-weight: bold;">function</span> findAnchor<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">var</span> url <span style="color: #339933;">=</span> document.<span style="color: #660066;">location</span>.<span style="color: #660066;">toString</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span> url.<span style="color: #660066;">match</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">return</span> url.<span style="color: #660066;">split</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&#125;</span><br />
<span style="color: #009900;">&#125;</span></div></div>
]]></content:encoded>
			<wfw:commentRss>http://benwatts.ca/2008/find-anchors/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>JS Object Iterator</title>
		<link>http://benwatts.ca/2008/js-object-iterator/</link>
		<comments>http://benwatts.ca/2008/js-object-iterator/#comments</comments>
		<pubDate>Fri, 02 May 2008 16:21:38 +0000</pubDate>
		<dc:creator>Ben</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[function]]></category>
		<category><![CDATA[tool]]></category>

		<guid isPermaLink="false">http://seaturtle.rainiscold.ca/?p=17</guid>
		<description><![CDATA[Extremely handy when you&#8217;re dealing with an Object and have no idea what it&#8217;s methods or properties are. ESPECIALLY when there&#8217;s no documentation and you get an alert saying [Object] or whatever. function deconstruct&#40;what&#41;&#123; &#160; &#160; obj = eval&#40;what&#41;; &#160; &#160; var temp = &#34;&#34;; &#160; &#160; for &#40;x in obj&#41; &#160; &#160; &#160; &#160; [...]]]></description>
			<content:encoded><![CDATA[<p>Extremely handy when you&#8217;re dealing with an Object and have no idea what it&#8217;s methods or properties are. ESPECIALLY when there&#8217;s no documentation and you get an alert saying [Object] or whatever.</p>
<div class="codecolorer-container javascript default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #003366; font-weight: bold;">function</span> deconstruct<span style="color: #009900;">&#40;</span>what<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; obj <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">eval</span><span style="color: #009900;">&#40;</span>what<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">var</span> temp <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;&quot;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span>x <span style="color: #000066; font-weight: bold;">in</span> obj<span style="color: #009900;">&#41;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; temp <span style="color: #339933;">+=</span> x <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;: &quot;</span> <span style="color: #339933;">+</span> obj<span style="color: #009900;">&#91;</span>x<span style="color: #009900;">&#93;</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #000066;">alert</span> <span style="color: #009900;">&#40;</span>temp<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<span style="color: #009900;">&#125;</span></div></div>
<p>I wish I remember the source for this because it has to be one of the handiest functions ever. </p>
]]></content:encoded>
			<wfw:commentRss>http://benwatts.ca/2008/js-object-iterator/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

