Develop Reference

IOS Safari, in javascript get absolute position from screen of mouseclick, excluding scroll-area

Lets say i have in iOS a big vertical space of pictures, so the user can scroll.
The vertical space is 2000 long.
I would like to get the mouse position the user clicks via document.
document.body.addEventListener("click", function (event) {
console.log( event);
// event.screenY gives the Y including the scrolled area.
}, true);
So if the iphone has a height of 700 , I want to get the screenY, if i scroll to the bottom and click, equal little less than 700 and not less than 2000.
On android it works correctly. on iOS not so.
go to wikipedia and test on debugger/browserstack via pasting my code there in debugger.

There are five different x and y positions on a webpage:
screenX and screenY
pageX and pageY
clientX and clientY
layerX and layerY
offsetX and offsetY
If screenY is not working try some of the others out and find the one that works.

Page zoom (scale) at cursor location

I'm working on a Chrome App that injects Javascript into a webview (similar to an iframe). The JS listens for a right-click inside the webview, and zooms in (scales) the contents of the webview, centering the scale at the cursor location. In other words, if I were to frame StackOverflow.com inside the webview and right-click on the S.O. logo near the top left of the page, the webview should then center on the S.O. logo, with it zoomed in.
I'm getting relatively close, but my math (or logic) is apparently a little bit off. Here is the JS I'm injecting into the webview ("window", "document", etc. below refers to the webpage inside the webview, not the parent window)...
window.oncontextmenu = function (){ // when the webview content is right-clicked...
var page = document.getElementsByTagName('body')[0]; // get the webview body element
// get cursor location inside webview...
var cursorX = event.clientX;
var cursorY = event.clientY;
// get scrollbar offset inside webview...
var scrollX = page.scrollLeft;
var scrollY = page.scrollTop;
// scrollbar offset + cursor location (I'm *not* sure if this is the correct logic, but it gets me fairly close)...
var x = scrollX + cursorX;
var y = scrollY + cursorY;
page.style.transformOrigin = x + 'px ' + y + 'px'; // set CSS transform origin (the pixel location where the scales centers)
page.style.transform = 'scale(10)'; // Zoom in 10X
return false;
}
FYI, the size of the webview in my app will vary, depending on the end user's screen size, so I need code that takes that into consideration. If the webview was a fixed size, then I think the math would be a little easier.
Thank you.

DIV X and Y position different in internet explorer

having trouble with a small issue which is affecting Internet Explorer (latest). In Firefox and Chrome, when I click the div the coordinates are 494, 438. In Internet Explorer, if I click in the same place I receive 371, 298.
My code:
$('body').on('click', '.map area', function(e)
{
var x = e.pageX - this.offsetLeft - 30;
var y = e.pageY - this.offsetTop - 80;
});
Any help would be very appreciated. If this is being caused by something other than the JS, let me know and I will gladly provide CSS, HTML etc.
Thanks in advance!

Is there a way to improve the performance of this draggable world map?

I implemented a simple draggable world map for a game but the performance differs when using different browsers - which is kinda obvious. I used 256x256 pixle tiles and the script dynamically renders the number to fill the whole window plus borders.
Prototype: http://mt111102.students.fhstp.ac.at/draggable/game.html
Currently I'm doing it simply by setting the top and left style attributes on mousemove. Heres a snippet:
mouseDown : function(e) {
Map.myPreventDefault(e);
dx = map.offsetLeft - e.clientX;
dy = map.offsetTop - e.clientY;
map.addEventListener('mousemove', Map.divMove, false);
},
divMove : function(e) {
Map.myPreventDefault(e);
map.style.position = "absolute";
map.style.cursor = "move";
map.style.left = e.clientX + dx + "px";
map.style.top = e.clientY + dy + "px";
}
Later when dragging to the borders I'm gonna load new tiles with XHR and delete old ones on the other end to retain performance so that the wrapper doesn't get to big.
My question is: Would it be more performant by using CSS translate instead of just setting the top and left attributes? And do you guys have any tips how to make it smoother?
In Firefox the prototype works almost perfectly smooth but in Webkit browsers like Chrome it doesn't look very good - it lags a bit. I just wonder how Google Maps managed it to work in every modern browser with the same smoothness.

A CSS transform, especially with a Z value (which will load the transform into the GPU), will almost always be faster and smoother - especially on devices like iPads, but elsewhere as well.
For more details you can check out this tutorial on GPU acceleration:
http://creativejs.com/2011/12/day-2-gpu-accelerate-your-dom-elements/

Mouse coordinates on Canvas without Jquery

I am currently using:
e.pageX - $("#canvas").offset().left
This is the only thing I am using Jquery for, so I would prefer to re-write this using just javascript.
What can I use to replace this?

The answer provided by N Rohler works well only in Internet Explorer (with some bugs prior to IE8 - but I guess it won't be a problem for you since you're using a canvas and pageX), and in Opera if the padding is 0, and in Safari/Chrome if the border width is 0 too. In Firefox, unfortunately, offsetX and offsetY are undefined.
http://www.quirksmode.org/dom/w3c_cssom.html#mousepos
Kaninepete, I think you should reconsider, for the sake of simplicity, the way of getting the mouse coordinates relatively to your canvas element. All you have to do is to calculate the position of the canvas, which is a pretty simple task using .getBoundingClientRect() (also, don't forget to add scroll offsets if necessary), and subtract it from pageX and pageY.

var x = e.offsetX,
y = e.offsetY;
Updated (again) for (correct) Firefox compatibility:
var rect = e.target.getBoundingClientRect();
var x = e.offsetX || e.pageX - rect.left - window.scrollX,
y = e.offsetY || e.pageY - rect.top - window.scrollY;

You can replace it by the below code
<canvas onmouseDown="mouseDown(event)" width="500" height="500"></canvas>
function mouseDown(e)
{
var x=e.clientX-canvas.offsetLeft;
var y=e.clientY-canvas.offsetTop;
}