How do I customized iscroll.js to have 2-finger scrolling. Below is the URL for the JS library;
http://cubiq.org/iscroll-4
I want to simulate the same scrolling for 2-finger (as one gets for 1-finger)...Reason being 1-finger is used for drag action in my case..
You can't do that. iScroll 4 is designed to scroll content on touchstart (1 finger triggers it).
If you want to scroll with 2 fingers, do not use iScroll...
After checking the code of iScroll 4, it is not possible to trigger scroll with 2fingers as it is used to zoom in/out...
You can use native scroll to handle with what you want...
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 am trying to create an effect like the iphone touch screen drag scroll with inertia but for a desktop browser.
It seems like this is the code that I'm after:
smoothstep_eo(t) = 2*smoothstep((t+1)/2) - 1
From here - https://stackoverflow.com/a/196209/348174
But I'm having difficulty working out how to implement it.
I imagine using that code somehow to calculate the movement of a click, drag and release and then applying the value to scrollToTop() frame by frame.
Any advice on how to approach this.
I suggest you use Cubiq.org's iScroll 5.
It's a jQuery plugin that works really well and does all the emulating of touch-by-mouse perfectly fine.
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 am designing a code snippet which will allow the user to scroll the items inside a div. Its more of a spinning wheel / slot machine. I know an existing solution for iPhone / iPod, but I wanted to have a simple stripped down code.
I have not used any images, and I believe this would involve CSS3 animations.
So far here is my code in jsbin. I have tried binding the touchmove event using jquery, but the alert is not popping up?
My main aim is to enable the user to scroll / swipe Up & down the items inside the div, without making the page scroll up and down. Any suggestion / edits to the code are appreciated.
My intended use for this is for mobile devices (iPhone / Android)
Thanks in advance.
you've almost been on the right side:
http://cubiq.org/iscroll-4
try iScroll.
only limitation that i encountered during my test was that you have to wrap your code in a list (ul) - though that could have been my bad
I think what you are looking for can be achieved by simply using the deafult behavior on IOS Safari (iPhone/iPad)
Just give some fixed height to the container div with overflow
e.g.
<div id="container" style="height:400px;overflow:auto">
Your content
</div>
It would scroll using 2-fingers on versions prior to IOS5 and with a single-finger move for IOS5 and later..
I have a web-based application that includes a component that the user can scroll up and down with their finger. I use the event's preventDefault method to prevent the default behavior where the touch move shifts the whole screen around on iOS devices.
Unfortunately this does not seem to work anymore in iOS 5 which I just upgraded to this morning. I have to assume that this is just done differently in iOS 5, but I have yet to be able to find a resource that provides instructions.
Update #1: I haven't been able to find an answer to my specific question, but I was able adjust my code a bit to use the -webkit-overflow-scrolling style (set to a value of "touch") and implement the snazzy inertial scrolling capability (where the content scrolls faster depending on the velocity of your swipe and will "rubber band bounce" back if it hits the boundaries. Pretty cool looking...
Update #2: I have another strange problem now. For some odd reason that overflow scrolling behavior gets mixed up sometimes whereby you have to drag your finger left and right across the containing element in order to make its contents move up and down. I have yet to be able to figure out why this happens - does anyone have any ideas?
I found a very simple solution. When the event hits your element that is allowed to scroll, just flag the event. On the event listener on the document just check if the flag is set and only stop the event if the flag isn't set:
this.$scrollableEl.on('touchmove', function(event){
event.comesFromScrollable = true;
// when you have containers that are srollable but
// doesn't have enough content to scroll sometimes:
// event.comesFromScrollable = el.offsetHeight < el.scrollHeight;
});
$(document).on('touchmove', function(event){
if (!event.comesFromScrollable){
event.preventDefault();
}
});
You could also use event.stopImmediatePropagation instead, so you dont need the eventListener on the document element, but this breaks zepto.js tap in my case:
this.$scrollableEl.on('touchmove', function(event){
event.stopImmediatePropagation();
});
First, I can verify that e.preventDefault() disables all scrolling in iOS 5 using the following code:
document.ontouchmove = function(e){ e.preventDefault(); }
Unfortunately, however, this disables the scrolling on overflow:scroll divs. (If anyone has a solution that leaves the inner element scrolling enabled, please share.)
Regarding update#2, I have noticed strange behavior when there is a scrollable element nested in another scrollable element (including the page itself). Sometimes the device hesitates on which element the user intends to scroll. In particular I've noticed this problem using position:fixed. My solution was to make sure the body has 100% height and that the scrollable elements use position:absolute where possible.