Web and WebWorks Development

[TheMarco]

Does anyone know how I prevent the user from being able to drag the app? See this video for a demo of the problem.

[levidehaan]

I know your not using jQuery Mobile, but if you did, first it doesnt allow scrolling past the app, it moves the screen back to the app space, however there is also this.

http://snipt.net/blackdynamo/swipe-up-and-down-support-for-jquery-mobile

with some hacking and grabbing code from jQuery mobile you could probably implement your own event handler for scrolling.

[TheMarco33]

The thing is, I DON'T want any scrolling, not implement scrolling

Also the weird thing is: I think this problem got introduced to my app with the new SDK, just like all the other problems. I don't remember ever seeing this in 0.9.3?

[levidehaan]

Wow that Is very strange, I would say though, that in that code you can capture the scroll even and stop it, its here: 

 // prevent scrolling
                        if (Math.abs(start.coords[1] - stop.coords[1]) > 10) {
                            event.preventDefault();
                        }

[TheMarco33]

Thanks, I'll try this and report back!

About the scrolling not occurring in 0.9.3: That's kind of the expected behavior if you ask me. I locked down the viewport to be exactly 1024x600 pixels so there really shouldn't be any kind of scrolling possible, right?

[levidehaan]

I would agree that it should stick to the size of the display, kind of strange that they chose not to do that anymore. though maybe its interacting with somethingn and causing disproportionate values?

whats the output from : $(window).height() and $(window).width() ?

[ddluk]

I've got the same problem. I've got in my css:

body {
    background: url('../images/tlo.png') top left no-repeat;
    z-index: -1;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 1024px;
    height: 600px;
}

I also locked my viewport:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no" />

 The output from $(window).height() is 1280, for $(window).width() is 1024 which is very strange.

[ddluk]

Ok. I found the solution

Just add this line to your html file into head:

<meta name="viewport" content="width=device-1024, height=600, initial-scale=1.0, user-scalable=no" />

[TheMarco]

Why device-1024?

I put:

	<meta name="viewport" id="viewport" content="width=1024,height=600,initial-scale=1.0,user-scalable=no" />

Which fixed it.

[ddluk]

Yes, off course it should be:

<meta name="viewport" id="viewport" content="width=1024,height=600,initial-scale=1.0,user-scalable=no" />

Sorry for that mistake