Android and iPhone drag (touchmove,sweep) - javascript

I'm developing HTML5 app for Android and iOS. All I need is to slide hidden menu by sweeping it right and hiding it back with a left sweep.
I can use CSS3 transition for the animation so what I'm looking for is really simple framework which provides the javascript events or if someone has experience.
Thanks in Advance.

If you're familiar with jQuery in any sense, then zepto.js would be good enough (and light-weighted) to get your problem solved.

Related

Animated Scrolling

I have been going through this website, I was wondering how to implement a scroll like this. I mean background picture is changing and you can see front image sliding nicely.
Same type of effect I saw at Apple Inc Website. Here if you scroll down, in middle of the page you see an image of iPhone getting separated from a lot and joining another one while scrolling. I just started learning jquery. Can anyone suggest me how to implement this type of animation as I am not sure how to search for such effect. Please, any help is appreciated.
There's another plugin for it, probably a bit more options and designed to work also in old browsers such as IE 9 or IE 8 (OnePageScroll doesn't) and which I believe is essential nowadays.
It is called fullPage.js
I believe it will fit you better.
The Apple website uses functionality similar to OnePageScroll.

Custom page slide transition for PhoneGap App without any UI Frameworks

I need a custom page slide transition for my new PhoneGap Project, Please help me to how to create a custom page slide transition using html5, css3 and javascript
Thanks advance..
I would recommend PageSlider by Christopher Conraets (an Adobe employee and strong proponent of PhoneGap - check out this talk by him about good rules for PhoneGap development if you're interested).
I'm using this at the moment. It feels good and is very easy to work with.
Check out this plugin pagingSlider.
Features
slide to pages with touch swipes
auto switch to pages by clicking menu item
animated mobile pagebrowser
integrated touch events with QuoJS
**
shafi plz use
**
transform translate3d 3d in css3
to translate the pages left to rigth and rigth to left
example
You can use Jquery Mobile transitions :
http://view.jquerymobile.com/1.3.2/dist/demos/widgets/transitions/
IScroll4 is a good tool for you。 http://cubiq.org/iscroll-4

IPad not scrollable on page with javascript UI Draggable page

Ok so I have a site that uses the javascript UI draggable mouse option for the web page but then when someone accesses the page from either their iphone or ipad the UI draggable script doesnt work? Is there any easy fixes for it? I was trying to find something like the iscroll for it but was unsure if I am going in the right direction.
Thanks for the help
Found the answer through this page
https://github.com/furf/jquery-ui-touch-punch

How is scrolling handled by PhoneGap?

How is scrolling implemented by PhoneGap? Is scrolling done by JavaScript plug-in like iScroll, is it done by a native scroll view, or in an other way?
The reason I ask, is because I am new to PhoneGap, and the biggest reason for chossing it is if it handles scrolling in a good way.
Since PhoneGap is a wrapper for deployment, not presentation, scrolling is dependent on the chrome from the browser on the platform you deploy to. If a device's native browser scrolling is an issue for you (like it sounds like it is on iOS), it will still be an issue in PhoneGap. Consider using a presentation library, like Sencha Touch, jQMobile or iScroll, to fix the issue on a specific deployment platform.
scrolling in phonegap wont ever come to the level of the native ones..
but iscroll brings it pretty close.

ipad Javascript slider

I'm looking to create a slider/scroller with javascript for the iPad. I created one using JQuery UI, but it's not supported on iPad.
I'm looking to create something simple, where the user can drag an image left and right along a track. I've looked all over the place for some simple insight on how to do that, all I find are tutorials or links to jquery plugins.
I'm not sure I can use the built-in slider from jquery-mobile, as I have specific images to use, and it doesn't look like it can be skinned.
Any help is welcome.
jQuery Tools Scrollable is iPad/touch friendly.
As an example, checkout the custom scrollable slider on trekk.com (works on iPad) that I built with jQuery Tools.
I recently used a plugin called Flexslider (http://flex.madebymufffin.com/) that supports swiping between images on iOS.

Categories

Resources