StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Yeah, there are many, many ways a page's layout can alter between loads. Different window sizes, different font sizes, different font availability, different browser/settings (even a small change in layout or font preference can throw out the wrapping). Storing page-relative co-ordinates is unlikely to be that useful unless your page is almost entirely fixed-size images.</p> <p>You could try looking up the ancestors of the clicked element to find the nearest easily-identifiable one, then make a plot from that element down to the element you want based on which child number it is.</p> <p>Example using simple <a href="http://www.w3.org/TR/xpath/" rel="noreferrer">XPath</a> syntax:</p> <pre><code>document.onclick= function(event) { if (event===undefined) event= window.event; // IE hack var target= 'target' in event? event.target : event.srcElement; // another IE hack var root= document.compatMode==='CSS1Compat'? document.documentElement : document.body; var mxy= [event.clientX+root.scrollLeft, event.clientY+root.scrollTop]; var path= getPathTo(target); var txy= getPageXY(target); alert('Clicked element '+path+' offset '+(mxy[0]-txy[0])+', '+(mxy[1]-txy[1])); } function getPathTo(element) { if (element.id!=='') return 'id("'+element.id+'")'; if (element===document.body) return element.tagName; var ix= 0; var siblings= element.parentNode.childNodes; for (var i= 0; i<siblings.length; i++) { var sibling= siblings[i]; if (sibling===element) return getPathTo(element.parentNode)+'/'+element.tagName+'['+(ix+1)+']'; if (sibling.nodeType===1 && sibling.tagName===element.tagName) ix++; } } function getPageXY(element) { var x= 0, y= 0; while (element) { x+= element.offsetLeft; y+= element.offsetTop; element= element.offsetParent; } return [x, y]; } </code></pre> <p>You can see it in action using this JSFiddle: <a href="http://jsfiddle.net/luisperezphd/L8pXL/" rel="noreferrer">http://jsfiddle.net/luisperezphd/L8pXL/</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload