<?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>Blog &#187; html</title>
	<atom:link href="http://antimatter15.com/wp/tag/html/feed/" rel="self" type="application/rss+xml" />
	<link>http://antimatter15.com/wp</link>
	<description>this title probably isn&#039;t very original</description>
	<lastBuildDate>Fri, 23 Jul 2010 21:21:18 +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>XPath Bookmark Bookmarklet</title>
		<link>http://antimatter15.com/wp/2009/11/xpath-bookmark-bookmarklet/</link>
		<comments>http://antimatter15.com/wp/2009/11/xpath-bookmark-bookmarklet/#comments</comments>
		<pubDate>Sun, 01 Nov 2009 21:33:48 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Other]]></category>
		<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[bookmarklet]]></category>
		<category><![CDATA[elitist]]></category>
		<category><![CDATA[future]]></category>
		<category><![CDATA[hack]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[link]]></category>
		<category><![CDATA[userscript]]></category>
		<category><![CDATA[visionary]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[xpath]]></category>

		<guid isPermaLink="false">http://antimatter15.com/wp/?p=875</guid>
		<description><![CDATA[javascript:(function(){ //inspired by http://userscripts.org/scripts/show/8924 var s = document.createElement(&#8216;script&#8217;); s.setAttribute(&#8216;src&#8217;,'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js&#8217;); if(typeof jQuery==&#8217;undefined&#8217;) document.getElementsByTagName(&#8216;head&#8217;)[0].appendChild(s); (function() { if(typeof jQuery==&#8217;undefined&#8217;) setTimeout(arguments.callee, 100) else{ jQuery(&#8220;*&#8221;).one(&#8220;click&#8221;,function(event){ //http://snippets.dzone.com/posts/show/4349 for(var path = &#8221;, elt = jQuery(this)[0]; elt &#38;&#38; elt.nodeType==1; elt=elt.parentNode){ var idx = jQuery(elt.parentNode).children(elt.tagName).index(elt)+1; idx&#62;1 ? (idx=&#8217;['+idx+']&#8216;) : (idx=&#8221;); path=&#8217;/'+elt.tagName.toLowerCase()+idx+path; } window.location.hash = &#8220;#xpath:&#8221;+path event.stopImmediatePropagation() }) } })(); })() Sometimes you want to [...]]]></description>
			<content:encoded><![CDATA[<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">javascript:(function(){</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">//inspired by http://userscripts.org/scripts/show/8924</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">var s = document.createElement(&#8216;script&#8217;);</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">s.setAttribute(&#8216;src&#8217;,'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js&#8217;);</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">if(typeof jQuery==&#8217;undefined&#8217;) document.getElementsByTagName(&#8216;head&#8217;)[0].appendChild(s);</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">(function() {</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">if(typeof jQuery==&#8217;undefined&#8217;) setTimeout(arguments.callee, 100)</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">else{</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">jQuery(&#8220;*&#8221;).one(&#8220;click&#8221;,function(event){</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">//http://snippets.dzone.com/posts/show/4349</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">for(var path = &#8221;, elt = jQuery(this)[0]; elt &amp;&amp; elt.nodeType==1; elt=elt.parentNode){</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">var idx = jQuery(elt.parentNode).children(elt.tagName).index(elt)+1;</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">idx&gt;1 ? (idx=&#8217;['+idx+']&#8216;) : (idx=&#8221;);</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">path=&#8217;/'+elt.tagName.toLowerCase()+idx+path;</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">}</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">window.location.hash = &#8220;#xpath:&#8221;+path</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">event.stopImmediatePropagation()</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">})</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">}</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">})();</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">})()</div>
<p>Sometimes you want to link to a certain part of a web page. That&#8217;s great and works well if its a nice site that clearly defines anchor tags to link to, but what if there isn&#8217;t?</p>
<p>Today I just remembered something and I thought that I saw something earlier with a xpath URL hash. I googled it and couldn&#8217;t find anything native to the browser (please correct me if I&#8217;m wrong) but found this script: <a href="http://userscripts.org/scripts/show/8924">http://userscripts.org/scripts/show/8924</a> which is basically what I was thinking about. But it was allegedly hard to make those URLs, so I thought why not make a bookmarklet to make linking to those URLs simple? So I quickly hacked this together</p>
<p><a href="javascript:(function(){var a=document.createElement(&quot;script&quot;);a.setAttribute(&quot;src&quot;,&quot;http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js&quot;);if(typeof jQuery==&quot;undefined&quot;){document.getElementsByTagName(&quot;head&quot;)[0].appendChild(a)}(function(){if(typeof jQuery==&quot;undefined&quot;){setTimeout(arguments.callee,100)}else{jQuery(&quot;*&quot;).one(&quot;click&quot;,function(d){jQuery(this)[0].scrollIntoView();for(var e=&quot;&quot;,c=jQuery(this)[0];c&amp;&amp;c.nodeType==1;c=c.parentNode){var b=jQuery(c.parentNode).children(c.tagName).index(c)+1;b&gt;1?(b=&quot;[&quot;+b+&quot;]&quot;):(b=&quot;&quot;);e=&quot;/&quot;+c.tagName.toLowerCase()+b+e}window.location.hash=&quot;#xpath:&quot;+e;d.preventDefault();d.stopPropagation();jQuery(&quot;*&quot;).unbind(&quot;click&quot;,arguments.callee)})}})()})(); ">XPathLink</a> (Just drag it over to your bookmarks bar as with any other bookmarklet). To use, just click on the bookmark, and click on the element you want to link to. You should see the URL will update with a xpath hash showing you the copy-pastable link to that element. The code is quite simple and should work on Firefox, Chrome and all the other browsers (maybe even IE) but the ability to auto-scroll and actually use the links is only available to Firefox and potentially Opera and Chrome.</p>
<p>And I&#8217;m working on a Chrome Extension for the original userscript (which should work with Chrome&#8217;s userscript support, but I&#8217;m going to try packaging it as a chrome extension file) But sadly chromium for linux isnt up to speed especially with extension development.</p>
<p>The source can be found <a href="http://gist.github.com/223708">http://gist.github.com/223708</a>.</p>
<p><strong><em>Update:</em><span style="font-weight: normal;"> <em>Fixed the link for the path and added some stuff. <strong>Update 2</strong></em><em>: Fixed bookmarklet, now scrolls to clicked, executes only once, prevents default</em></span></strong></p>
]]></content:encoded>
			<wfw:commentRss>http://antimatter15.com/wp/2009/11/xpath-bookmark-bookmarklet/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
<!-- WP Super Cache is installed but broken. The path to wp-cache-phase1.php in wp-content/advanced-cache.php must be fixed! -->