This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Johannes Eckert
Posted Aug 31 - Read on Facebook

why is "print event.y" NaN on mobile safari when running inside Events.DragMove, (event) ->
it works fine on chrome/safari on the desktop

18 Comments

Alex Hazel

Something similar was asked earlier today. This was the response.

"NaN is not a number so you are trying to calculate with things that are not numbers. If I had to guess you are likely counting an event to have a number that is only available on desktop (maybe clientX iirc).

Debugging is easy. Look for "Safari on iOS"

https://developer.apple.com/library/mac/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html

Johannes Eckert

so you're saying some of the the dragging examples don't work on mobile because event.x is not supported? that sounds wild.
http://examples.framerjs.com/#draggable-basics.framer

Edward Sanchez

Yeah I was very disappointed with that too - getting the same NaN error when using event.x and clientX. Hammer.js was also no use. :-(

Johannes Eckert

so … how can you change the draggable layer's speedX and speedY then. If I calculate the dragged distance by comparing the layer's x or y WHILE also changing the speedX and speedY according to those values, my layers jump around because of a circular reference (I guess). the way the framer team does that on the example site is by calculating the dragged distance based on the event difference

Tisho Georgiev

The reason x and y don't exist in mobile safari is that there's no single source for these values. On desktop, you have only one mouse so x and y map to wherever it clicked. In a multi-touch environment, x/y information is saved on the particular touch and since there can be many of those at the same time, a single x/y property doesn't make sense. You can get a normalized version of the event that would work on both mobile and desktop with the following:

event = Events.touchEvent(event)
print event.x # should now exist

Edward Sanchez

Nice explanation Tisho, thanks! I assume I just add that to my coffee file? Or does it need to go into the framework or something? (Sorry, noob here)

Tisho Georgiev

You need to add it to the event handler:

myLayer.on Events.Click, (event) ->
event = Events.touchEvent(event)
... Rest of your code ...

Edward Sanchez

Ooh gotcha thank you!

Johannes Eckert

Thanks a lot, @Tisho! I almost lost faith in this when my frustration rised. I think framer will result in a lot of these situations that should be better handled by a framework, but I'm very certain the team knows that

Edward Sanchez

Johannes Eckert, did it work for you? i'm still getting NaN :-(

Tisho Georgiev

Just FYI, after the event = Event.touchEvent(event), you should now use event.clientX and event.clientY, and NOT event.x and event.y. Edward, maybe that's the problem you're having?

Edward Sanchez

ooooh that's gonna be why!

Edward Sanchez

Now I'm getting TypeError: 'undefined' is not an object (evaluating 'event.touches'

Tisho Georgiev

Can you paste in your code? Looks like you're not actually passing in anything to Events.touchEvent. You should be passing in the original event object.

Edward Sanchez

Dragger.on Events.Click, (event) ->
event = Events.touchEvent(event)
Dragger.animateStop()
if isDragging == false && isHolding == false
Dragger.animate
curve: curve1
properties:
x: (Math.ceil((StripPosition-(event.clientX*2)+267)/89)*89)

Tisho Georgiev

What you have there should work. Can you download this: https://dl.dropboxusercontent.com/u/3320134/EventTest.framer.zip and then tell me if you're seeing two numbers show up when you click the rectangle in the middle? Try it out on desktop and on mobile and let me know what you're seeing.

Edward Sanchez

So I got what I did wrong, I had event = Events.touchEvent(event) in a setInterval when there were no events being fired. #noob
Thanks for all your help!

Read the entire post on Facebook