Question

Right, I’m sure a lot of you are aware that absolute positioning doesn’t work for the ipad. However their are fixes. Sort of.

My current script is for a uni project, its at its bare minimums at the moment you can view the markup here http://jsfiddle.net/OwenMelbz/tqdMS/ feel free to fiddle.

The idea is when a use “clicks” the screen it makes something (This will later get a lot more complicated) however it needs to spawn where the user clicks, hence me using absolute positioning.

Now the big issue. This is an iPad Web App. when you click/tap/touch the screen it spawns my object at left:0; as the css positioning doesn’t work.

My whole final year project sort of relies on this. so any support will be amazing.

thanks

Owen

Answer 1

Absolute positioning works, however fixed positioning is more difficult…

The problem you are having has nothing to do with positioning. The touchstart event object contains a list of touches, and you need to get the pageX/pageY for the first touch. Something like:

var posY = (spawn.touches ? spawn.touches[0].pageY : spawn.pageY) - 50;
var posX = (spawn.touches ? spawn.touches[0].pageX : spawn.pageX) - 50;

BUT, this won’t work if you are binding using jQuery since it normalizes the event object. So you need to do something like:

var posY = (spawn.originalEvent.touches ? spawn.originalEvent.touches[0].pageY : spawn.pageY) - 50;
var posX = (spawn.originalEvent.touches ? spawn.originalEvent.touches[0].pageX : spawn.pageX) - 50;

That’s a bit verbose, but you can figure out a nicer way of writing that out 🙂