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!
Related
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.
I'm a total amateur at jQuery, HTML, css and everything and I'd be really grateful if anyone with some more knowledge could help me. This is a site I'm in the middle of making for my girlfriend: www.sharyncunneen.com.
If you click around on the buttons there you'll notice I've done some animated page transitions involving the opacity, size and position of the buttons. The problem is when I click the browser back button: if I click it at a reasonably slow pace the transitions still work fine but if I click several times fast in a row it's like the jQuery/javascript doesn't get time to catch up or something. I don't really know.
Do you need to see files or code? I won't include anything else yet. I think it's better to let you tell me what information would help you because I'm not sure about the best way to proceed on this forum and I'd like to learn from experienced users.
I don't see any transition at all o0
Anyway, you can use the jquery queue function.
Start a queue when starting the animation et clear it when your transition is finished. You can also limit the number of queued events to avoid the website getting crazy with speedy click.
I know this has probably been asked before but I couldn't find the right answer.
I'm trying to have a link, when you click it, scrolls the page to an element with an ID, with just javascript, and I get to control the speed.
I know about:
document.getElementById('youridhere').scrollIntoView();
and that didn't work. It just snapped into view. I also tried scrollBy but that didn't work since it works in increments. I can write it up to check the remaining distance to the element and if it's less than the increment, then only move what's left, but that seems way too bulky.
I tried scrollTo as well but that wasn't helping much either.
Is there a cleaner way of doing this?
This needs to be javascript only. Here is a jquery equivalent:
var top = target.offset().top;
$('html,body').animate({scrollTop: top}, 1000);
There is no built-in way to smooth scroll. I would use setInterval and scrollBy an increment on each iteration, then clearInterval when done.
You could also check the jQuery source to see how they do it.
I have the following working code to make a element of my scrollbox visible:
var next = elements.item(i+1);
var xpcomInterface = scroll.boxObject.QueryInterface(
Components.interfaces.nsIScrollBoxObject);
xpcomInterface.ensureElementIsVisible(elements);
But I would like to make a smooth-scroll (slow or not). Any idea how to do it?
update
By the way, it's for Mozilla environment.
The simplest way would be to just use a setTimeout function and just keep moving the top and left value on the element's div by a small number, until you get where you want to be.
You may want to experiment with how fast to make it move, as there is a trade-off with smooth, and the fact that it should reach the endpoint in some reasonable time.
Update:
I forgot, you will want to keep calling the setTimeout until you reach the final destination, otherwise it won't redraw the browser window.
I don't know exactly how to do it, but here's a Chrome Extension called "Smooth Scroll" where you can potentially pick through the code to see what they do and maybe get you in the right direction.
PS I love this extension.
jQuery .animate() with accelerated motion can be kind of smooth (see demo for animate with a relative move). And with a plug-in, there are other easing equations it can use.
I have written a scroller function which will scroll one div inside another one. The idea is to use the setInterval method to change the margin of the inner element to simulate a scrolling div.
The problem I am facing is that the scrolling is not entirely smooth. Sometimes it stops for a split-second and then it resumes. What can I do to remove these random hiccups? (I am moving 1px per 20 milliseconds)
three comments that might make an answer:
i see you are already using jQuery. it has scroll functions that have been smooth for me.
have you tried fractional positions? as in scrollerMarginTop -= 0.7;
also, you should probably clearInterval() unless the user can move the div and you want it to resume scrolling back into place.
if it works great until you interact with it, consider clearing the interval and waiting until interaction occurs and re-intervaling.
hth
It was quite some time ago that you asked this question, but if you haven't found a working solution you could try Smooth Div Scroll which is a jQuery plugin that does exactly what you describe: scroll one div inside another one.