<?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>Matt Shelton &#187; xhtml</title>
	<atom:link href="http://www.mattshelton.net/tags/xhtml/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.mattshelton.net</link>
	<description>scribbling geekery, things and stuff</description>
	<lastBuildDate>Fri, 27 Jan 2012 17:24:48 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>XHTML 1.1 Strict New Window Links With jQuery</title>
		<link>http://www.mattshelton.net/2009/07/04/xhtml-11-strict-new-window-links-with-jquery/</link>
		<comments>http://www.mattshelton.net/2009/07/04/xhtml-11-strict-new-window-links-with-jquery/#comments</comments>
		<pubDate>Sat, 04 Jul 2009 14:45:49 +0000</pubDate>
		<dc:creator>matt</dc:creator>
				<category><![CDATA[code]]></category>
		<category><![CDATA[how-to]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[xhtml]]></category>

		<guid isPermaLink="false">http://www.mattshelton.net/?p=503</guid>
		<description><![CDATA[<p>Posted in <a href="http://www.mattshelton.net/topics/code/" title="code">code</a><a href="http://www.mattshelton.net/topics/how-to/" title="how-to">how-to</a></p>I was throwing together a prototype site last night and I thought it might be nice to aim for XHTML 1.1 Strict compliance, really just for kicks. Most of the time, this is no big deal, but I was stuck &#8230; <a href="http://www.mattshelton.net/2009/07/04/xhtml-11-strict-new-window-links-with-jquery/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>I was throwing together a prototype site last night and I thought it might be nice to aim for <a href="http://www.w3.org/TR/xhtml11/" title="XHTML 1.1 - Module-based XHTML">XHTML 1.1</a> Strict compliance, really just for kicks. Most of the time, this is no big deal, but I was stuck on one need that the site had: open off-site links in a new window. The <code>target</code> attribute is a big no-no in <abbr title="Extensible HyperText Markup Language">XHTML</abbr> Strict and while I&#8217;m not <em>really</em> a purist, it was somewhat bothersome that I only had one error left without a good markup-based solution.</p>
<p>One of the tenets of XHTML is to force (strictly!) the user-agent to be responsible for the agent-specific actions on the page. In this case, since a modern browser on a modern OS can handle a &#8220;new window&#8221;, the browser should handle it. But, the same site, when rendered in a different browser (e.g. Safari on the iPhone) might not be able to handle a new window, so the markup itself shouldn&#8217;t add such an instruction. Sounds annoyingly simple enough, except when I <em>want</em> the non-standard action.<br />
<span id="more-503"></span><br />
Enter JavaScript, which shouldn&#8217;t surprise me since I want to manipulate the <abbr title="Document Object Model">DOM</abbr> within browsers that can handle it. A quick google led me to an <a href="http://www.sitepoint.com/article/standards-compliant-world/3/" title="New-Window Links in a Standards-Compliant World [HTML &amp; XHTML Tutorials]">example</a> over at <a href="http://www.sitepoint.com/" title="SitePoint : New Articles, Fresh Thinking for Web Developers and Designers">Sitepoint</a> using Javascript to add the <code>target="_blank"</code> attribute after the page loads:</p>
<pre class="brush: jscript; title: ; notranslate">
function externalLinks() {
 if (!document.getElementsByTagName) return;
 var anchors = document.getElementsByTagName(&quot;a&quot;);
 for (var i=0; i&lt;anchors.length; i++) {
   var anchor = anchors[i];
   if (anchor.getAttribute(&quot;href&quot;) &amp;&amp;
       anchor.getAttribute(&quot;rel&quot;) == &quot;external&quot;)
     anchor.target = &quot;_blank&quot;;
 }
}
window.onload = externalLinks;
</pre>
<p>This really seemed inelegant to me. I&#8217;m already using <a href="http://jquery.com/" title="jQuery: The Write Less, Do More, JavaScript Library">jQuery</a> on the site for something else, so I re-wrote the above into a jQuery chain, which just feels better:</p>
<pre class="brush: jscript; title: ; notranslate">
$(&quot;a[rel='external']&quot;).attr(&quot;target&quot;,&quot;_blank&quot;);
</pre>
]]></content:encoded>
			<wfw:commentRss>http://www.mattshelton.net/2009/07/04/xhtml-11-strict-new-window-links-with-jquery/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

