HTML/JS/Jquery: Mimmick iOS Homescreen drag between pages - javascript

I've tried a few libraries and Jquery plugins for sliding "pages" through the viewport using touch gestures, but none of them have "physics" similar to the iOS homescreen.
My goal is to assign a three-finger gesture that works on both touchscreens and touchpads that will simply move through a set of "pages" horizontally in realtime, and when the touch is released, "snap" to the currently most-visible page in the viewport. Just like the iOS homescreen.

SwipeView will give you that. It's an infinite scroller that only loads three pages at a time. It's very quick (the company I work for uses it for one of their products.)
You'll need to customise it to work on three fingers rather than just one. If you need any help using it, I'll be glad to help =)

Related

jScrollPane on touch devices - drag button is in reverse

I've implemented jScrollPane and I'm having an issue on touch devices.
The example I'm using is http://jscrollpane.kelvinluck.com/drag_size.html where I have a vertical scroll using a circular button image for the scroll on the track. The class that's added to this is jspDrag.
On desktop, when you click and scroll the vertical button, it drags down and the content scrolls up, which is natural in my eyes.
The issue I'm facing is on touch devices (check the example URL above in Chrome using iPhone/iPad emulation in dev. tools) where you can't actually drag the button down - you actually have to scroll it up for the content to scroll?!
Users are definitely not going to know this as it's a button rather than a content block that you're using as a control.
I'd like to be able to touch and drag the button down on touch devices, rather than up, to make the content scroll.
Has any one come across this issue and managed to solve it? I've searched SO and Google Groups with no luck.
Thanks.
Unfortunately jScrollPane seems to just work like this, with an annoying caveat, which is unfortunate - I really liked the plugin.
I came across http://manos.malihu.gr/jquery-custom-content-scroller/ which functions the way it should and runs super smooth on touch devices.

Android Phonegap Scroll is Very Choppy

I'm building a very basic webapp that displays ferry schedules.
I'm using phonegap to port it to a "native" app on Android and I'm have a bit of trouble with the scrolling.
It works perfectly in Chrome on the device, as well as on the android browser. I've tested on several devices and they all work great in browser. As soon as I put the project into Phonegap however the scroll becomes very "choppy" and skips and sticks. I've added a video link to show you the behaviour:
http://youtu.be/D18s9kgnD7g
I'll give you a brief explanation of how it works:
We're using translate3d CSS methods for transitions when we switch content in view so that we avoid using page transitions. Because of this we're not scrolling the actual page we're scrolling individual content divs so that we avoid weird scrolling bugs when switching between content views. Basically we have three "content views" on one page that switch out when we want to switch views.
Here's a link to the app:
http://ferriesapp.ca/app/
Things I've tried
We're using "overscroll: scroll;" one these content divs, which I know had some incompatibilty with Android pre 2.3 but should be good now.
We've tried a few big libraries, like iScroll and Scrollable, and things like that to no avail.
I've tried preventing default actions for touchmove.
We've coded correct touch events using Zepto's touch module.
I've tested on devices from the Nexus one (4.0.4) to the Nexus 7 (4.3) and it's the same story on all those devices.
Any help would be STRONGLY appreciated
I've been struggling with this for a while now and I can't seem to find anything on the internet that hits on this "choppy" scrolling bug.
EDIT: Here's a logcat from installation to when the scrolling bug happens:
http://pastebin.com/Aa7mDeAX
You got a pretty nasty style sheet there. First, you do not want any box shaddow because mobile does not like that. Then, since you have a lot of blank spaces, you want to help touch to work better with those blanks with user-select: html.
* {
margin: 0;
padding: 0;
-webkit-user-select:html;
-khtml-user-select:html;
-moz-user-select:html;
-ms-user-select:html;
user-select:html;
}
That should help with your scrolling, but you still have tons of thing to clean up with that CSS. Another issue is that you don't even have cordova loaded correctly, but that probably doesn't really matter for scrolling.
Actually, what is zepto_002.js? That seem to be the one that is causing the main scrolling issue.
As a fellow google play developer, having "three "content views" on one page that switch out when we want to switch views" is not a good idea. my only input though if you want to go this path would be to check this out http://pocketnow.com/2012/05/25/what-is-force-gpu-rendering-in-ice-cream-sandwich

Sliding panel for mobile page

I have a div which is mostly off page but uses translation on hover to display on the main page.
This is my site.
However, on mobile devices this isn't the best solution to display this div. Hover doesn't work well and I have to click often to get it to show up. I'm wondering if it's possible to do it like mobile applications where if I move the page to the right edge enough, this content will display or with a button. Something like this:
Any thoughts on if this is possible or how'd id solve this?
This pattern is called 'Off Canvas layout'. Documented (with some CSS) at http://jasonweaver.name/lab/offcanvas/
There are multiple implementations you could have a look at, perhaps start with this nice demo from Zurb: http://www.zurb.com/playground/off-canvas-layouts
As regards the use of hover, you're better off using a tap/click on both desktop and mobile for consistency. The 3-bar menu button is fairly universally understood these days.

What is the event that toggles appbar in javascript Windows 8 Metro Style App?

I am looking for the event that toggles the appbar in javascript. So it's basically the "edge-swipe" gesture event on the top/bottom edge of the screen.
For example, I want to show a text "edge swiped" on the page when the user swipe the upper or butto edge of the screen, without declaring a app bar in the page. How will I be able to do that?
I tried crossslide event and it doesn't seem to be right.
you can see the documentation for AppBar here
Appbar has four events: afterhide, aftershow, beforehide and beforeshow.
Check the documentation for more details
Cross-slide won't work for you because it's a gesture that can start anywhere.
There's no edge-slide event that is exposed to a Metro app. Windows 8 detects the edge-slide and raises the app bar for you automatically (when you have one).
Maybe they'll add one in the future, but who know's if or when, so you'll probably want to do your own gesture tracking. I'd suggest you have look at the PointerPoint class and building your own custom gesture recognizer.
A basic edge swipe should be easy enough to recognize, though you'll have to pay attention to all the pointers on screen. For example, if I have a tablet that tracks 5 fingers and one of them edge-slides, do you recognize the gesture regardless or only if there is a single touch point active at the time? That's up to you.

Sencha Touch do not set scale and allow scrolling and resize on iPhone or iPad

I am playing around with Sencha Touch, especially with examples like http://dev.sencha.com/deploy/touch/examples/
However I am faced with a problem, when using the component the scale is set on the iPhone and the user cannot scroll the page or zoom in or out.
How may I disable these settings as I would like to have the carousel on a page which can be scrolled, and zoomed in/out.
Thanks.
[Sencha person] You can't zoom in or out of a Sencha component. Having fixed UI Chrome is one of the reasons to even use a UI framework (otherwise you'd might use a simple mobile-optimized web page).
You can have a scrollable area within a carousel, but you might want to consider whether that's really the best UX, since the carousel is already a scroller (it just scrolls in fixed increments) Take a look at touchstyle.mobi/app for an example of a data-store backed carousel.
I could be wrong, but it seems to me that the goal of sencha is to make full screen apps, so it seems logical that you cannot zoom/scroll the page ?
There are methods and plugins for zooming if you want.
Carousel ImageViewer (plugin) - Zoom feature
Pinch-to-zoom in panels
Pinch emulator (plugin)

Categories