<?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>Perplexed Labs &#187; xhtml</title>
	<atom:link href="http://blog.perplexedlabs.com/tag/xhtml/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.perplexedlabs.com</link>
	<description>web development war stories from the frontlines to the backend</description>
	<lastBuildDate>Sat, 24 Jul 2010 16:27:40 +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>The Clickable SPAN</title>
		<link>http://blog.perplexedlabs.com/2008/02/05/the-clickable-span/</link>
		<comments>http://blog.perplexedlabs.com/2008/02/05/the-clickable-span/#comments</comments>
		<pubDate>Tue, 05 Feb 2008 17:08:59 +0000</pubDate>
		<dc:creator>Eric</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[xhtml]]></category>

		<guid isPermaLink="false">http://perplexedlabs.com/2008/02/05/the-clickable-span/</guid>
		<description><![CDATA[It seems like the standard pattern for calling a JavaScript function when text is clicked is the following: &#60;a href=&#34;#&#34; onclick=&#34;callSomeJSFunction();&#34;&#62;Click Me&#60;/a&#62; The problem I have often encountered is that clicking the link causes the browser to jump to the top of the page if you have scrolled at all. Users do not like unexpected [...]


Related posts:<ol><li><a href='http://blog.perplexedlabs.com/2008/11/07/real-time-ajax-javascript-progress-bar/' rel='bookmark' title='Permanent Link: Real-time &#8220;AJAX&#8221; JavaScript Progress Bar'>Real-time &#8220;AJAX&#8221; JavaScript Progress Bar</a></li>
<li><a href='http://blog.perplexedlabs.com/2008/11/11/remove-firefox-link-outline/' rel='bookmark' title='Permanent Link: Remove Firefox Link Outline'>Remove Firefox Link Outline</a></li>
<li><a href='http://blog.perplexedlabs.com/2009/02/06/javascript-roundto-nearest-thousandth-hundredth-tenth/' rel='bookmark' title='Permanent Link: JavaScript roundTo Nearest Thousandth, Hundredth, Tenth, *'>JavaScript roundTo Nearest Thousandth, Hundredth, Tenth, *</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>It seems like the standard pattern for calling a JavaScript function when text is clicked is the following:</p>
<pre class="brush: xml;">&lt;a href=&quot;#&quot; onclick=&quot;callSomeJSFunction();&quot;&gt;Click Me&lt;/a&gt;</pre>
<p>The problem I have often encountered is that clicking the link causes the browser to jump to the top of the page if you have scrolled at all.  Users do not like unexpected behavior like this.  I sometimes prefer to use a "clickable span" instead:</p>
<pre class="brush: css;">
span.clickable_span{
cursor: pointer;
color: #[whatever your link color is];
}
</pre>
<pre class="brush: xml;">&lt;span class=&quot;clickable_span&quot; onclick=&quot;callSomeJSFunction();&quot;&gt;Click Me&lt;/span&gt;</pre>
<p>The span will have the same style as regular link (hand icon when the user mouses over) and the JavaScript function will be called.</p>


<p>Related posts:<ol><li><a href='http://blog.perplexedlabs.com/2008/11/07/real-time-ajax-javascript-progress-bar/' rel='bookmark' title='Permanent Link: Real-time &#8220;AJAX&#8221; JavaScript Progress Bar'>Real-time &#8220;AJAX&#8221; JavaScript Progress Bar</a></li>
<li><a href='http://blog.perplexedlabs.com/2008/11/11/remove-firefox-link-outline/' rel='bookmark' title='Permanent Link: Remove Firefox Link Outline'>Remove Firefox Link Outline</a></li>
<li><a href='http://blog.perplexedlabs.com/2009/02/06/javascript-roundto-nearest-thousandth-hundredth-tenth/' rel='bookmark' title='Permanent Link: JavaScript roundTo Nearest Thousandth, Hundredth, Tenth, *'>JavaScript roundTo Nearest Thousandth, Hundredth, Tenth, *</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://blog.perplexedlabs.com/2008/02/05/the-clickable-span/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>
