StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>How about saving not only the <code>x</code>/<code>y</code> coordinates of the click but also the <code>width</code>/<code>height</code> of the view-port. That way you can get the position of the click relative to the view-port and calculate where on the content the click actually occured:</p> <pre><code>$(document).on('click', function (event) { var x = event.pageX, y = event.pageY, w = $(window).width(), h = $(window).height(); }); </code></pre> <p>You could optimize this by only getting the view-port dimension when they change:</p> <pre><code>var windowWidth = 0, windowHeight = 0; $(window).on('resize', function () { windowWidth = $(this).width(); windowHeight = $(this).height(); }).trigger('resize');//this .trigger will get the dimensions on page-load $(document).on('click', function (event) { var x = event.pageX, y = event.pageY, w = windowWidth, h = windowHeight; }); </code></pre> <h2>Update</h2> <p>For pages that are centered you could get the coordinate from the center of the view-port:</p> <pre><code>var windowWidth = 0, windowHeight = 0; $(window).on('resize', function () { windowWidth = $(this).width(); windowHeight = $(this).height(); }).trigger('resize');//this .trigger will get the dimensions on page-load $(document).on('click', function (event) { var x = (event.pageX - (windowWidth / 2)), y = event.pageY; }); </code></pre> <p>This will result in positive <code>x</code> dimensions for anything on the right side of the page and negative <code>x</code> dimensions for anything on the left side of the page.</p> <p>Here is a demo: <a href="http://jsfiddle.net/aWBFM/" rel="nofollow">http://jsfiddle.net/aWBFM/</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