CODEWITHSUNDEEP
jquerycssipadcss-position
owenmelbz
owenmelbz

Reputation: 6544

iPad Absolute Positioning (a tad different this time)

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

Upvotes: 1

Views: 992

Answers (1)

David Hellsing
David Hellsing

Reputation: 108490

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 :)

Upvotes: 2

Related Questions