<?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>From Accessibility to Zope &#187; Javascript</title>
	<atom:link href="http://blog.mauveweb.co.uk/category/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.mauveweb.co.uk</link>
	<description>experiments in contemporary web development</description>
	<lastBuildDate>Thu, 18 Aug 2011 23:26:00 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Big World Travelog</title>
		<link>http://blog.mauveweb.co.uk/2007/01/03/big-world-travelog/</link>
		<comments>http://blog.mauveweb.co.uk/2007/01/03/big-world-travelog/#comments</comments>
		<pubDate>Wed, 03 Jan 2007 10:58:06 +0000</pubDate>
		<dc:creator>mauve</dc:creator>
				<category><![CDATA[Artwork]]></category>
		<category><![CDATA[Blogging]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://blog.mauveweb.co.uk/2007/01/03/big-world-travelog/</guid>
		<description><![CDATA[I finished updated my brother's blog over New Year, and I'm now quite happy with it. I spent ages on a graphical title block in Inkscape. I'm not totally satisfied with the caricatures who are a little more cartoony than I would have liked. The new theme is based on K2, which I do think [...]]]></description>
			<content:encoded><![CDATA[<p>I finished updated <a href="http://worldtour.echit.co.uk/">my brother's blog</a> over New Year, and I'm now quite happy with it. I spent ages on a graphical title block in Inkscape. I'm not totally satisfied with the caricatures who are a little more cartoony than I would have liked. The new theme is based on K2, which I do think is pretty.</p>
<p>I had a strange bug with the Google Maps on the gallery which I found after a bit of searching was caused by Google Maps not supporting embedding within <acronym title="eXtensible HyperText Markup Language">XHTML</acronym>. But I'm pleased that the thumbnailing/unthumbnailing works so well. Previously the map enlarged and reduced; this is much less intrusive in either state.</p>
<p>I did have to disable all of K2's shiny Javascript features to make it work with my Javascript (for map markers) <img src='http://blog.mauveweb.co.uk/wp-includes/images/smilies/icon_sad.gif' alt=':(' class='wp-smiley' />  But they were a <acronym title="User Interface">UI</acronym> disaster anyway. One of the advantages to <acronym title="JavaScript">JS</acronym> over Flash is that it allows us not to create horrific new <acronym title="User Interface">UI</acronym> paradigms. So going to great lengths to do so is missing the point.</p>]]></content:encoded>
			<wfw:commentRss>http://blog.mauveweb.co.uk/2007/01/03/big-world-travelog/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>IE7 scores a point over FF2</title>
		<link>http://blog.mauveweb.co.uk/2006/12/08/ie7-scores-a-point-over-ff2/</link>
		<comments>http://blog.mauveweb.co.uk/2006/12/08/ie7-scores-a-point-over-ff2/#comments</comments>
		<pubDate>Fri, 08 Dec 2006 18:46:48 +0000</pubDate>
		<dc:creator>mauve</dc:creator>
				<category><![CDATA[Browsers]]></category>
		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://blog.mauveweb.co.uk/2006/12/08/ie7-scores-a-point-over-ff2/</guid>
		<description><![CDATA[If anyone's keeping score, I've found my first snippet of code which IE7 handles flawlessly but FF2 does not.
It's code for creating multiple recipient email fields with Javascript, such that creates as many as necessary and keeps the last field spare. Specifically this code is for deleting fields, which happens when you backspace or delete [...]]]></description>
			<content:encoded><![CDATA[<p>If anyone's keeping score, I've found my first snippet of code which <acronym title="Windows Internet Explorer 7">IE7</acronym> handles flawlessly but FF2 does not.</p>
<p>It's code for creating multiple recipient email fields with Javascript, such that creates as many as necessary and keeps the last field spare. Specifically this code is for deleting fields, which happens when you backspace or delete from a field which you've already emptied. This is modelled on how Thunderbird/Icedove's compose window behaves.</p>
<pre><code><span style="color: #003366; font-weight: bold;">function</span> autoCompleteContact<span style="color: #66cc66;">&#40;</span>e<span style="color: #66cc66;">&#41;</span>
<span style="color: #66cc66;">&#123;</span>
&nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">var</span> event=<span style="color: #66cc66;">&#40;</span>window.<span style="color: #006600;">event</span><span style="color: #66cc66;">&#41;</span>?window.<span style="color: #006600;">event</span>:e;
&nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">var</span> target=<span style="color: #66cc66;">&#40;</span>window.<span style="color: #006600;">event</span><span style="color: #66cc66;">&#41;</span>?window.<span style="color: #006600;">event</span>.<span style="color: #006600;">srcElement</span>:e.<span style="color: #006600;">target</span>;

&nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//catch backspace or delete on an empty field as deleting the field</span>
&nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #66cc66;">&#40;</span>target.<span style="color: #006600;">value</span> == <span style="color: #3366CC;">''</span> &amp;&amp; <span style="color: #66cc66;">&#40;</span>e.<span style="color: #006600;">keyCode</span> == <span style="color: #CC0000;">8</span> || e.<span style="color: #006600;">keyCode</span> == <span style="color: #CC0000;">46</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>
&nbsp; &nbsp; <span style="color: #66cc66;">&#123;</span>
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//don't delete the last field if it's empty</span>
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #66cc66;">&#40;</span>target == recips<span style="color: #66cc66;">&#91;</span>recips.<span style="color: #006600;">length</span> <span style="color: #CC0000;">-1</span><span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#41;</span>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">return</span>;

&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//find the container element for all recipient input fields</span>
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">var</span> recips_container=document.<span style="color: #006600;">getElementById</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'recipients'</span><span style="color: #66cc66;">&#41;</span>;
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #66cc66;">&#40;</span>!recips_container<span style="color: #66cc66;">&#41;</span> <span style="color: #000066; font-weight: bold;">return</span>;

&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//Javascript doesn't seem to provide an array remove()</span>
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//so do effectively newrecips=recips.remove(target) manually</span>
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">var</span> newrecips=<span style="color: #003366; font-weight: bold;">new</span> Array;
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">for</span> <span style="color: #66cc66;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i=<span style="color: #CC0000;">0</span>; i &lt; recips.<span style="color: #006600;">length</span>; i++<span style="color: #66cc66;">&#41;</span>
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#123;</span>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #66cc66;">&#40;</span>recips<span style="color: #66cc66;">&#91;</span>i<span style="color: #66cc66;">&#93;</span> != target<span style="color: #66cc66;">&#41;</span>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; newrecips.<span style="color: #006600;">push</span><span style="color: #66cc66;">&#40;</span>recips<span style="color: #66cc66;">&#91;</span>i<span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span>

&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//Don't remove the last field</span>
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #66cc66;">&#40;</span>newrecips.<span style="color: #006600;">length</span> &gt; <span style="color: #CC0000;">0</span><span style="color: #66cc66;">&#41;</span>
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#123;</span>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; recips_container.<span style="color: #006600;">removeChild</span><span style="color: #66cc66;">&#40;</span>target<span style="color: #66cc66;">&#41;</span>;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; recips=newrecips;
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span>

&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900; font-style: italic;">//Focus the last field</span>
&nbsp; &nbsp; &nbsp; &nbsp; recips<span style="color: #66cc66;">&#91;</span>recips.<span style="color: #006600;">length</span><span style="color: #CC0000;">-1</span><span style="color: #66cc66;">&#93;</span>.<span style="color: #000066;">focus</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span>

&nbsp; &nbsp; ...</code></pre>
<p><acronym title="Windows Internet Explorer 7">IE7</acronym> does it perfectly, FF2's layout breaks and it starts showing the contents of the INPUT elements in the wrong place.</p>]]></content:encoded>
			<wfw:commentRss>http://blog.mauveweb.co.uk/2006/12/08/ie7-scores-a-point-over-ff2/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

