<?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>Ladysign Dev Blog &#187; external link icon</title>
	<atom:link href="http://www.ladysign-apps.com/blog/tag/external-link-icon/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.ladysign-apps.com/blog</link>
	<description>Girls can code.</description>
	<lastBuildDate>Mon, 12 Dec 2011 16:58:15 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.5</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Add a external icon and link target dynamicly</title>
		<link>http://www.ladysign-apps.com/blog/code/css/add-a-external-icon-and-link-target-dynamicly/</link>
		<comments>http://www.ladysign-apps.com/blog/code/css/add-a-external-icon-and-link-target-dynamicly/#comments</comments>
		<pubDate>Sun, 26 Apr 2009 17:52:00 +0000</pubDate>
		<dc:creator>Lee</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[DOM]]></category>
		<category><![CDATA[dynamic]]></category>
		<category><![CDATA[external link]]></category>
		<category><![CDATA[external link icon]]></category>
		<category><![CDATA[link target]]></category>

		<guid isPermaLink="false">http://ladysign-apps.com/blog/?p=646</guid>
		<description><![CDATA[<p><strong>Difficulty:</strong> 1 out of 5 stars</p>
<p>Setting target=&#8221;_blank&#8221; is not strict valid (x)html. But you want to open all your external URL&#8217;s in an[......]</p><p class='read-more'><a href='http://www.ladysign-apps.com/blog/code/css/add-a-external-icon-and-link-target-dynamicly/'>继续阅读</a></p>]]></description>
			<content:encoded><![CDATA[<p><strong>Difficulty:</strong> 1 out of 5 stars</p>
<p>Setting target=&#8221;_blank&#8221; is not strict valid (x)html. But you want to open all your external URL&#8217;s in another window. And have you seen that nice icon on <a href="http://en.wikipedia.org/wiki/Hyperlink">Wikipedia</a> for all the external hyperlinks, which are created dynamicly?<br />
Well today I wrote a Javascript function which does this functionality for you.</p>
<p>Just implement this Javascript (file) between your <head> tags:</p>
<pre class="brush: jscript; title: ;">
/**
 * Ladysign Standard Javascript
 */
function externalLinks() {
    var host = window.location.host;

    var anchors = document.getElementsByTagName(&quot;a&quot;);
    for (var i=0; i&lt;=anchors.length; i++) {
        var domain = getDomain(anchors[i]);
        if (domain != undefined &amp;&amp; anchors[i].href &amp;&amp; host != domain){
           anchors[i].target = &quot;_blank&quot;;
           anchors[i].className = &quot;external&quot;;
        }
    }
}

function getDomain(url){
    var urlStr = url + &quot;&quot;;
    var split_domain = new Array();
    split_domain = urlStr.split(&quot;/&quot;);
    return split_domain[2];
}

window.onload = externalLinks;
</pre>
<p>And add a stylesheet class &#8220;external&#8221; together with a nice icon:</p>
<pre class="brush: css; title: ;">
  .external { background: transparent url(_img/external.png) no-repeat scroll right center; padding: 0 13px 0 0; }
</pre>
]]></content:encoded>
			<wfw:commentRss>http://www.ladysign-apps.com/blog/code/css/add-a-external-icon-and-link-target-dynamicly/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

