I am new to jQuery Mobile, and I am trying to replicate a native iOS app.
The problem I am facing is the that I cannot find a way to smoothly swipe between pages which is common on iOS. In jQuery Mobile, it seems to register a swipe occurred and then swipes the page for you, but I like the feel of having the page follow your swipe.
In iOS, you could use a UIScrollView with page control, but it was also really easy to do yourself by listening to touch events in a UIView.
Are there any libraries/packages that will help me create smooth swiping transitions? If not, are there jQuery bindings to track where the finger is on screen as it moves, so I can move the page and create such a transition myself?
Thanks
Related
I have used the One Page Scroll Plugin on my website.Below is the plugin page
https://github.com/peachananr/onepage-scroll
The scroll works fine on desktops, but I am facing a problem on the ipad.
The swipe scroll on the ipad is scrolling 4 pages down when I scroll once on my website.
Please how do I fix this problem.
Well you have javascript DOM event object like :
ontouchcancel, ontouchend, ontouchmove and ontouchstart
which can make scroll effect.
Have in mind that jquery and etc are built on top of the javascript so the basically use similar functions.
Without the code or working platform provided by you... i can't really tell you anything but redirect you to w3schools.
w3schools javascript DOM Event Object
I'm trying to use http://wipetouch.codeplex.com/ to implement swiping on a Meteor app to shift between templates in Iron Router.
It works beautifully on iOS and Android but on Windows Phone, the OS' native swipe gesture (swiping right in the browser moves one page back in history) interferes with the user's swiping action.
Is there any way I can disable this?
Also which other platforms have similar functionality which would prevent the user from swiping in the web app effectively?
As an example, this app also uses the same library to implement swipe gestures.
Note: Using touch-action: none on the body tag does not work.
I encountered the same problem on a little web application : it which was a scratch game, where the player had to swipe the finger all over the "scratchable" zone to discover what he had won.
The game was supposed to run on Windows 8.1 tablets, with IE10 on it.
We put in the css this snippet :
*{
touch-action: none;
}
The result is to completely deactivate any touch events on the app (including the swipe backward / forward).
But we had to reactivate the touch event only on the scratch zone, to allow the player to play :)
For this we had to add this :
#playzone{
touch-action: chained;
}
The app still works perfectly, both on IE10 on tablets but also on Windows Phone 8.1.
(please forgive my English, it's not my mother tongue)
EDIT : After having tested more on IE, it seems that adding the touch-action:none; on the html element is enough to achieve what the OP wanted.
Lately i've seen a lot of iOS apps animating elements on 'drag'. The most universal example that I can think of which a lot of users would have access to would be Facebook on iOS (haven't tested Android).
On your news feed, do the usual drag down to refresh your feed. You'll see that if you drag your news feed down slowly, the loading gif is created as you drag, based on the position of the drag.
Does anybody know of any libraries that achieve such effects smoothly in JS?
Before you say this isn't possible, I know it is. Here's an example: http://victoriabeckham.landrover.com/INT
The main problem is that iOS freezes DOM manipulation on scroll, so you have to use some sort of technique to overcome the problem. The parallax plugin I was hoping to use is stellar.js, but the issue I am running into is that the "iOS demo" for that plugin isn't really usable on a desktop. I fiddled with it for 3 hours this morning, and couldn't get a setup that works correctly on both iOS and desktop.
I need some ideas, either a technique to configure stellar.js to work the same way on both (I'm not sure if that's possible), or another library that works on both, or maybe some insight on how I could program a workaround myself.
Any help is appreciated.
Step 1: Create and object like this
{
startFrameNumber: {
//first obj
id: idOfElement
duration: howeverManyFrames
startLeft: whatever
endLeft: whatever
startTop: stillWhatever
endTop: whateverAgain
},
nextStartFrameNumber: {
}
}
Step 2: Make the page unscrollable via CSS, ie 100% height and width with and overflow: hidden
Step 3: When the user scrolls (via custom scrollbar, keyboard action, or touch events) advance the animation x frames based on how far they scrolled or whatever. If your animation object you created has a key [frame] then add that to the queue of things that are visible and moving, and move all those things in the queue to their appropriate places and/or remove them from the queue of active objects
That's it. The function for moving things around should be pretty straight forward, except getting the animations smooth will take a little playing around with.
Simply scroll each layer of parallax effect manually and control them yourself without relying on browser's page scrolling.
I've successfully implemented cross device/browser parallax scrolling with the help of the Zynga Scroller js library.
It takes care of one of your main concerns which is the interoperability of click and touch events and scrolling on mobile webkit devices – this allows you to manipulate the DOM as you scroll.
Then, to create the parallax effect you have three options:
Simulating a real-world 3d parallax by using 3d transforms (with a parent/wrapper element that controls perspective and transform origin).
Using a 2d parallax library such as stellar.js or skrollr
Building your own parallax scrolling algorithm.
Here's a quick demo (using existing sample code) of option 1 showing how smooth parallax scrolling would work across desktop and mobile devices. Of course, you're limited to devices that have support for 3d transforms. Note that the Zynga Scroller works via click/touch and drag – it should probably not be used as a dekstop solution as the only thing that would be required is overflow: scroll in CSS.
Have a look at the jQuery-Plugin "Scroll Path" http://joelb.me/scrollpath and combine this with different layers and speeds. You will have recognized that the scrolling of the example page is not just a vertical parallax stage but also moves layers horizontally while you scroll up and down. This is possible with Scroll Path.
Try using http://cubiq.org/iscroll-4 and stellar.js together.
Do your parallax stuff for desktop normally and then add a 'touchmove' Event Listener to fire the scroll event:
document.body.addEventListener('touchmove', function(){$window.scroll()}, true);
Tested and working on iPad 2 with iOs 5.1.1
I have a requirement where I need to slide divs in and out of a screen given the users swipe gesture.
I am looking for a javaScript library/decent tutorial that will let me create an effect like the iPhone home screen where you can swipe left and right and have a card/screen slide in/out. It is important it is NOT a framework like Sencha or jqTouch. Essentially I need swipe gesture support and a smooth sliding transition.
Also any effects need to be smooth on the device. (use CSS3 animation (with hardware acceleration) as I need the experience to be smooth.
Targeted devices are Android and iPhone.
Any help or direction would be appreciated.
Here are some jQuery plugins you could use to achieve what you are looking to do without the full overhead of Sencha or jqTouch. These would still require jQuery and the plugin but I imagine if you are doing any reasonable web app or interface you are using jQuery :]
http://plugins.jquery.com/plugin-tags/touch
But here are multiple options, one should work to get the slide effect you are looking for or allow you to handle that gesture appropriately.