The Expected Behavior
I am trying to incorporate basic swipe functionality for a slideshow of content. I swipe in either direction an it moves nicely to the next/previous slide. The slides do not move when at either end and swiping can continue from there.
The Problem
When swiping, I am receiving the following error in my log after the slides move correctly:
"Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted."
I also find that when I reach the end of my slides and try to slide into the stopped direction again, the error triggers. But when I try to then swipe back into the correct position, the swipe functionality no longer works. It's as if the window is expecting the slides to animate but nothing is, which then prevents any additional functionality from triggering.
I have found no information on this error and have tried numerous debugging attempts and solution ideas but have had no luck yet. Any advice on this would be greatly appreciated. Thank you.
function swipeleftHandler(event) {
changeInnerScene('left',true);
}
function swiperightHandler(event) {
changeInnerScene('right',true);
}
$(".frame-three").on({"swipeleft": swipeleftHandler, "swiperight": swiperightHandler});
I have a very similar use case, presenting the same bug. I have been reading about Chrome's throtled assynchronous touchmove events, and I thought that canceling the event at touchstart woudl fix it, but it didn't.
I am guessing that your element has its position set as absolute or fixed, am I right?
Changed it to relative and see if it works. In my case, it did.
Related
Is there a possibility to prevent pagePiling.js from moving the current pp-section when mousewheel is fired? Or even better, to force start moving after a delay?
My current issue is that i want to show an animation inside the pp-section before the pp-section starts to move. And for that i need a delay. Maybe I need something like an event beforeLoad which isn´t implemented there.
I work the first time with pagepiling.js so maybe i just dont think the right way, because i also didnt find any questions about this or a similar issue online. Any suggestions are welcome!
Im learning javascript and jquery and im trying to create my own carousel.
The current problem i have stumbled over is the following. When the user stop scrolling in the carousel, i have a function that runs and centers my targeted Carousel item to my desired point. I have illustrated this with a black line in my fiddle. Here is my function that centers that item:
jQuery.fn.CenterToPoint = function(){
return this.each(function(){
Offset = $(this).offset().left;
Width = $(this).width();
Illuminate_Point = 0.45 * $(window).width();
ScrollLeft = Illuminate_Point - (Offset+Width/2);
$Container.animate({scrollLeft: "-=" + ScrollLeft},450);
});
}
However, i want the user to be able to scroll even though the animation is running. How can i kill this animation when its running but the user either clicks, mousescroll or trackpad is used on my carousel?
Here is my jFiddle:
http://jsfiddle.net/ptp05jvo/
From what I understand, your problem are:
The box is twitching after the it reach to desired point (black line).
When animating (box moving towards the black line), user input will cause box to 'jump'. In this case, you would want user input to override animating scrolling.
I didn't solve the whole problem, but here's what I've got so far: http://jsfiddle.net/ptp05jvo/3/
I managed to stop the first problem (twitching) by adding the following option in .animate().
always: function() {
clearTimeout($Container.data('scrollTimeout'));
isSystemScroll = false;
}
When you animate with .animate() to scroll, jQuery scroll the element and it's considered as actually scrolling, so .scroll() event is triggered. This can be good / bad.
In your carousel case, it's sort of bad because you .CenterToPoint() is called within .scroll() event which means it will be called every time jQuery animate the box to center.
This is what causing the twitching problem. The .CenterToPoint() keeps getting called within `.scroll()' event. So, the option I added will stop this.
To separate the concern, I added new jQuery function, scrollStopped to handle scrolling stopped event.
There is also a new variable called isSystemScroll that I introduced to the code. The idea is to recognize whether the scroll is coming from user / animation. With this, we can prioritize user input to override animation scroll.
However, user input can be anything, keyboard arrow, mouse wheel scroll, mouse click on scroll bar, etc. In my example, I only handle keyboard arrow input which is shown in the following code:
$(document).keyup(function () {
isSystemScroll = false;
console.log("key up");
});
Obviously, you can add additional check to only capture left / right arrow keys instead of all keys.
This sort of solve the 2nd problem. But you still need to handle other user inputs, esp mouse moving scroll bar.
From the test, I found that Firefox render the animation better and smoother. In Firefox, user input with keyboard arrow will override animation perfectly. The transition is smooth between the two. However, in Chrome, there's a little bit lag / jump.
Also, in Chrome, horizontal scroll bar doesn't show up while in Firefox, it does.
It's worth to mention that Firefox doesn't show twitching problem. I can't be sure if this is caused by the CSS you have. I didn't modify your CSS.
I came across couple carousel library and did the same test to see how they handle the issue.
Owl Carousel
http://owlgraphic.com/owlcarousel/demos/custom.html
Only allows dragging input. Other user inputs are disabled (scroll bar, keyboard arrow, etc). However, if you try to drag the carousel (in Chrome browser) while it's animating, you will see same jump / lag problem. Again, Firefox shows better and smoother animation with this library.
Slick
http://kenwheeler.github.io/slick/
The 'autoplay' option prevents user input when carousel is animating. No scroll bar and you can only move with keyboard arrow.
Conclusion
As a conclusion from this long answer, few things you can do if you want to build your own carousel:
Limit user input, only allows certain input.
Disable scroll bar.
Or, you can use existing library out there.
I have been trying to search for different things, but I couldnt find the suiting solution for my problem.
I need to scroll to the next div, when you swipe up on the iPad, so the div's top snaps to the ipads top. I think this would be simply on .scroll in combination with .scrollTop(), right? So now when you scroll, it should detect either you scroll down or up, and when you do so, jump to the next or previous div.
Has anyone a ressource, where I can find a solution to this?
Thanks in advance
I've done the exact same thing a while ago for my Personal Website. (if you check it with a tablet or a smart phone you can see it in action)
what I used was:
jQuery Mobile: to detect touch moves and unbind the scroll
Touch Swipe Plugin: to detect the direction of swipe
And the rest is simple jQuery animation using scrollTop() and offset()
I'm working on horizontal website. I would like to create 2 buttons (left button and right button) which can help users to scroll to left and right.
The site that I'm working on
The functionality that I wanted to create is, when I mouseover the button the page will start and continue the scrolling action until the mouse move away from the button then the page stop scrolling.
I found something from codepen "http://goo.gl/uTQdzD" that is similar to what I looking for but that is not function in the way I wanted. It's required to keep clicking it only it can continue scroll, once it clicked then it only move a certain pixels distances and stop then have to click again... even I tried to change to mouseover, the same thing... I have to moving the mouse in and out the button only it can continue to scroll the page.
I'm not a professional web coder or developer but just a new guy. I Hope someone out here could help me out.
Thanks in advance.
Here you go: http://codepen.io/caseybaggz/pen/uBysA?editors=001
I changed the .click to a mouseenter event which is what you are looking for. Additionally, the increments that you noticed were happening because of the step variable being assigned 400. So, I just replaced the 400 with wWidth and within the mouseenter function, told it to scroll the bodyWidth.
I'm not totally sure why you would want to do this? The natural flow of web design is to design/build sites vertically. To have the user scroll horizontally is a little awkward regarding the UX and could be considered bad design…especially now that devices come into play.
Be sure to learn web-design and UX standards first before you get into a position for developing sites. It not only helps to contribute for bettering the web, but also the UX. ;)
Hope this helps and good luck!
I am looking for a scroller which auto scrolls to the end and stops and switches to manual navigation. I tried googling, there are thousands of scrollers but I need one with both autoplay and manual scroll functionality. Where user can also switch to manual scroll with a single click while it is auto scrolling, something like this.
But it must stop auto scrolling when it has reached end and then switch to manual scrolling.
jQuery Easy Slider 1.7 (Demo here) has both manual scrolling and automatic scrolling, which automatically turns off as soon as the user clicks on the slider. It's also really easy to customize and extend - and I've done so in a few past projects.
As for the autoscrolling to stop at the last slide, you could manually add the functionality using a timer that turns off autoscrolling after all the slides are done. Or you could play with it and just add an event that gets fired whenever the last slide is reached.
Edit:
Using SmoothDivScroll is even better, because it allows the user (you) to add a number of callbacks. So you can just turn off autosliding when the last slide is reached:
$("#makeMeScrollable").smoothDivScroll({
autoScrollingRightLimitReached: function(eventObj, data) {
$("#makeMeScrollable").smoothDivScroll("option","autoScrollingMode","");
}
});
Edit 2:
Sadly, it seems that callbacks not working are a known issue on their bugtracker. You could try and contact the creator of the script and see whether he's planning on fixing them.