<?xml version="1.0" encoding="utf-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
		>
<channel>
	<title>Comments on: Unobtrusive JavaScript</title>
	<atom:link href="http://www.wait-till-i.com/2005/05/20/unobtrusive-javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.wait-till-i.com/2005/05/20/unobtrusive-javascript/</link>
	<description>For a better web with more professional jobs - can talk, will travel</description>
	<lastBuildDate>Thu, 09 Sep 2010 14:50:00 +0000</lastBuildDate>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
	<item>
		<title>By: Joe P</title>
		<link>http://www.wait-till-i.com/2005/05/20/unobtrusive-javascript/comment-page-2/#comment-3344</link>
		<dc:creator>Joe P</dc:creator>
		<pubDate>Wed, 08 Nov 2006 21:42:55 +0000</pubDate>
		<guid isPermaLink="false">http://www.wait-till-i.com/?p=86#comment-3344</guid>
		<description>After working through the Self Training exercises, I tried to transfer some of my knowledge to a website that I am working on.  I have created a rollover button script similar to the one described in the training and it seems to work well.  My only problem is this, the delay between the original image and the display of the &quot;mouseOver&quot; image is very noticeable even over highspeed connections.  I believe that I need to cache the images so that the rollover is smoother, but every attempt I have made fails to preload the images and/or smooth out the rollover effect.

Basically, my scripting calls a setupPage() function for window.onload.  The setupPage() function executes the image preload script and the rollover setup script.

My preload image scripts are as follows:

function newImage(arg) {
	if (document.images) {
		rslt = new Image();
		rslt.src = arg;
		return rslt;
	}
}

function preLoadImages() {
	if(document.images) {
		image1 = newImage(&quot;img/test.jpg&quot;);
        }
}

Am I missing something on the preload script or the call to the script?

Thanks in advance for any help.</description>
		<content:encoded><![CDATA[<p>After working through the Self Training exercises, I tried to transfer some of my knowledge to a website that I am working on.  I have created a rollover button script similar to the one described in the training and it seems to work well.  My only problem is this, the delay between the original image and the display of the &#8220;mouseOver&#8221; image is very noticeable even over highspeed connections.  I believe that I need to cache the images so that the rollover is smoother, but every attempt I have made fails to preload the images and/or smooth out the rollover effect.</p>
<p>Basically, my scripting calls a setupPage() function for window.onload.  The setupPage() function executes the image preload script and the rollover setup script.</p>
<p>My preload image scripts are as follows:</p>
<p>function newImage(arg) {<br />
if (document.images) {<br />
rslt = new Image();<br />
rslt.src = arg;<br />
return rslt;<br />
}</p>
<p>}</p>
<p>function preLoadImages() {<br />
if(document.images) {<br />
image1 = newImage(&#8220;img/test.jpg&#8221;);<br />
}</p>
<p>}</p>
<p>Am I missing something on the preload script or the call to the script?</p>
<p>Thanks in advance for any help.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Amy</title>
		<link>http://www.wait-till-i.com/2005/05/20/unobtrusive-javascript/comment-page-2/#comment-3318</link>
		<dc:creator>Amy</dc:creator>
		<pubDate>Tue, 31 Oct 2006 12:22:25 +0000</pubDate>
		<guid isPermaLink="false">http://www.wait-till-i.com/?p=86#comment-3318</guid>
		<description>A really good one to cover is how to use the same javascript code on the same page even after we include more than one into the same onload. Because most identical javascripts won&#039;t work on the same page.</description>
		<content:encoded><![CDATA[<p>A really good one to cover is how to use the same javascript code on the same page even after we include more than one into the same onload. Because most identical javascripts won&#8217;t work on the same page.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Glorya Rutter</title>
		<link>http://www.wait-till-i.com/2005/05/20/unobtrusive-javascript/comment-page-2/#comment-2918</link>
		<dc:creator>Glorya Rutter</dc:creator>
		<pubDate>Mon, 07 Aug 2006 13:51:14 +0000</pubDate>
		<guid isPermaLink="false">http://www.wait-till-i.com/?p=86#comment-2918</guid>
		<description>Chris - I missed this submit comment area to the unobtrusive javascript, so I emailed you.  Would you kindly check your email as I requested use of your script on a commercial site for a contact page.  Many thanks. Glorya</description>
		<content:encoded><![CDATA[<p>Chris &#8211; I missed this submit comment area to the unobtrusive javascript, so I emailed you.  Would you kindly check your email as I requested use of your script on a commercial site for a contact page.  Many thanks. Glorya</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Giorgio</title>
		<link>http://www.wait-till-i.com/2005/05/20/unobtrusive-javascript/comment-page-2/#comment-2810</link>
		<dc:creator>Giorgio</dc:creator>
		<pubDate>Tue, 18 Jul 2006 08:57:56 +0000</pubDate>
		<guid isPermaLink="false">http://www.wait-till-i.com/?p=86#comment-2810</guid>
		<description>Dear Chris,
I will use your fantastic script in a working xhtml page .
It work fairly but I get an error and I wasn’t be able to debug a runtime error (Row 37 Character 4 Error Argument not valid Code 0).
Can you help me? All the best from Italy.

JS
function collapse()
		{
			if(!document.createTextNode){return;}
			var p=document.createElement(&#039;p&#039;);
			p.appendChild(document.createTextNode(&#039;Click on the headlines to collapse and expand the section&#039;));
			var heads=document.getElementsByTagName(&#039;h4&#039;);
			for(var i=0;i&lt;heads .length;i++)
			{
					var tohide=heads[i].nextSibling;
					while(tohide.nodeType!=1)
					{
						tohide=tohide.nextSibling;
					}
					cssjs(&#039;add&#039;,tohide,&#039;hidden&#039;)
					cssjs(&#039;add&#039;,heads[i],&#039;trigger&#039;)
					heads[i].tohide=tohide;
					heads[i].onmouseover=function()
					{
						cssjs(&#039;add&#039;,this,&#039;hover&#039;);
					}
					heads[i].onmouseout=function()
					{
						cssjs(&#039;remove&#039;,this,&#039;hover&#039;);
					}
					heads[i].onclick=function()
					{
						if(cssjs(&#039;check&#039;,this.tohide,&#039;hidden&#039;))
						{
							cssjs(&#039;swap&#039;,this,&#039;trigger&#039;,&#039;open&#039;);			
							cssjs(&#039;swap&#039;,this.tohide,&#039;hidden&#039;,&#039;shown&#039;);			
						} else {
							cssjs(&#039;swap&#039;,this,&#039;open&#039;,&#039;trigger&#039;);			
							cssjs(&#039;swap&#039;,this.tohide,&#039;shown&#039;,&#039;hidden&#039;);			
						}
					}
			document.body.insertBefore(p,document.getElementsByTagName(&#039;h4&#039;)[0]);
			}
			function cssjs(a,o,c1,c2)
			{
				switch (a){
					case &#039;swap&#039;:
						o.className=!cssjs(&#039;check&#039;,o,c1)?o.className.replace(c2,c1):o.className.replace(c1,c2);
					break;
					case &#039;add&#039;:
						if(!cssjs(&#039;check&#039;,o,c1)){o.className+=o.className?&#039; &#039;+c1:c1;}
					break;
					case &#039;remove&#039;:
						var rep=o.className.match(&#039; &#039;+c1)?&#039; &#039;+c1:c1;
						o.className=o.className.replace(rep,&#039;&#039;);
					break;
					case &#039;check&#039;:
						return new RegExp(&#039;\\b&#039;+c1+&#039;\\b&#039;).test(o.className)
					break;
				}
			}
		}
		window.onload=collapse;

XHTML  1.0 Strict
&lt;head&gt;
&lt;script type=&quot;text/javaScript&quot; src=&quot;tus_script/scripts.js&quot;&gt;&lt;/script&gt;

&lt;body&gt;
&lt;h4 title=&quot;Click on to collapse and expand&quot;&gt;Spots&#160;&amp;&#160;Dots&#8230;&lt;/h4&gt;
&lt;p class=&quot;quote&quot;&gt;&lt;img src=&quot;tus_decoration/quotefirebrick.gif&quot; width=&quot;24&quot; height=&quot;13&quot; border=&quot;0&quot;&gt;To Tuscany.&lt;br /&gt;
What game will I find there?&lt;br /&gt;
Thousands of wild goats
&#8230;&lt;img src=&quot;tus_decoration/unquotefirebrick.gif&quot; width=&quot;24&quot; height=&quot;13&quot; border=&quot;0&quot;&gt;&lt;br /&gt;&lt;br /&gt;
Alexandre Dumas, &lt;em&gt;The Count of Monte Cristo&lt;/em&gt;&lt;br /&gt;&lt;br /&gt;
&lt;a href=&quot;htpp://www.amazon.com&quot; title= &quot;Buy this book&quot; class=&quot;offsite&quot;&gt;Buy Now&lt;/a&gt;
&lt;/p&gt;
….
&lt;/body&gt;&lt;/heads&gt;</description>
		<content:encoded><![CDATA[<p>Dear Chris,<br />
I will use your fantastic script in a working xhtml page .<br />
It work fairly but I get an error and I wasn&#8217;t be able to debug a runtime error (Row 37 Character 4 Error Argument not valid Code 0).<br />
Can you help me? All the best from Italy.</p>
<p>JS<br />
function collapse()<br />
{</p>
<p>if(!document.createTextNode){return;}<br />
var p=document.createElement(&#8216;p&#8217;);<br />
p.appendChild(document.createTextNode(&#8216;Click on the headlines to collapse and expand the section&#8217;));<br />
var heads=document.getElementsByTagName(&#8216;h4&#8217;);<br />
for(var i=0;i<heads .length;i++)<br />
{</p>
<p>var tohide=heads[i].nextSibling;<br />
while(tohide.nodeType!=1)<br />
{</p>
<p>tohide=tohide.nextSibling;<br />
}</p>
<p>cssjs(&#8216;add&#8217;,tohide,&#8217;hidden&#8217;)<br />
cssjs(&#8216;add&#8217;,heads[i],&#8217;trigger&#8217;)<br />
heads[i].tohide=tohide;<br />
heads[i].onmouseover=function()<br />
{</p>
<p>cssjs(&#8216;add&#8217;,this,&#8217;hover&#8217;);<br />
}</p>
<p>heads[i].onmouseout=function()<br />
{</p>
<p>cssjs(&#8216;remove&#8217;,this,&#8217;hover&#8217;);<br />
}</p>
<p>heads[i].onclick=function()<br />
{</p>
<p>if(cssjs(&#8216;check&#8217;,this.tohide,&#8217;hidden&#8217;))<br />
{</p>
<p>cssjs(&#8216;swap&#8217;,this,&#8217;trigger&#8217;,&#8217;open&#8217;);<br />
cssjs(&#8216;swap&#8217;,this.tohide,&#8217;hidden&#8217;,&#8217;shown&#8217;);<br />
} else {<br />
cssjs(&#8216;swap&#8217;,this,&#8217;open&#8217;,&#8217;trigger&#8217;);<br />
cssjs(&#8216;swap&#8217;,this.tohide,&#8217;shown&#8217;,&#8217;hidden&#8217;);<br />
}</p>
<p>}<br />
document.body.insertBefore(p,document.getElementsByTagName(&#8216;h4&#8217;)[0]);<br />
}</p>
<p>function cssjs(a,o,c1,c2)<br />
{</p>
<p>switch (a){<br />
case &#8216;swap&#8217;:<br />
o.className=!cssjs(&#8216;check&#8217;,o,c1)?o.className.replace(c2,c1):o.className.replace(c1,c2);<br />
break;<br />
case &#8216;add&#8217;:<br />
if(!cssjs(&#8216;check&#8217;,o,c1)){o.className+=o.className?&#8217; &#8216;+c1:c1;}<br />
break;<br />
case &#8216;remove&#8217;:<br />
var rep=o.className.match(&#8217; &#8216;+c1)?&#8217; &#8216;+c1:c1;<br />
o.className=o.className.replace(rep,&#8217;&#8216;);<br />
break;<br />
case &#8216;check&#8217;:<br />
return new RegExp(&#8216;\b&#8217;+c1+&#8217;\b&#8217;).test(o.className)<br />
break;<br />
}</p>
<p>}<br />
}</p>
<p>window.onload=collapse;</p>
<p><span class="caps">XHTML  1</span>.0 Strict<br />
<head><br />
<script type="text/javaScript" src="tus_script/scripts.js"></script></head></p>
<p><body></p>
<h4 title="Click on to collapse and expand">Spots&nbsp;&&nbsp;Dots&#8230;</h4>
<p></p>
<p class="quote"><img src="tus_decoration/quotefirebrick.gif" width="24" height="13" border="0"/>To Tuscany.</p>
<p>What game will I find there?</p>
<p>Thousands of wild goats<br />
&#8230;<img src="tus_decoration/unquotefirebrick.gif" width="24" height="13" border="0"/></p>
<p>
Alexandre Dumas, <em>The Count of Monte Cristo</em></p>
<p>
<a href="htpp://www.amazon.com" title= "Buy this book" class="offsite">Buy Now</a>
</p>
<p>
&#8230;.<br />
</body></p>
]]></content:encoded>
	</item>
	<item>
		<title>By: tim</title>
		<link>http://www.wait-till-i.com/2005/05/20/unobtrusive-javascript/comment-page-2/#comment-2782</link>
		<dc:creator>tim</dc:creator>
		<pubDate>Fri, 14 Jul 2006 14:47:28 +0000</pubDate>
		<guid isPermaLink="false">http://www.wait-till-i.com/?p=86#comment-2782</guid>
		<description>Anyone got any ideas how to change pseudo classes with JS? I want to change the a:link, a:hover, and a:visited...</description>
		<content:encoded><![CDATA[<p>Anyone got any ideas how to change pseudo classes with JS? I want to change the a:link, a:hover, and a:visited&#8230;</p>
]]></content:encoded>
	</item>
</channel>
</rss>
