Here's my code :
if ($('document').scrollTop() < 0) {
//Automatic Scroll
setTimeout(function () {
$('html, body').animate({
scrollTop: $('.main-header').offset().top - 0
}, 1800, 'easeInOutQuad');
},8000);
}
If a user does not scroll, the page scrolls automatically to a certain div.
But I don't know how to trigger when a user do not scroll.
Thanks for your help !
To detect if a user hasn't scrolled, what I would do is set up a hasScrolled variable.
var hasScrolled = false;
Then change that variable to 'true' if the user scrolls:
document.addEventListener("scroll", function(){ hasScrolled = true; });
Then do your setTimeout to see if, in 8 seconds, the user has scrolled, and if not, do your thing:
setTimeout(triggerScroll,8000);
And in your triggerScroll function, the first line could be if (hasScrolled) return so that it doesn't run if they've scrolled
https://jsfiddle.net/eergdw3v/
try this
document.body.scrollTop === 0
You need to create a timer at the scroll event using setTimeout
function setUnscrollEvent( scrollTimeout, callback )
{
$( window).scroll(function() {
if ( window.scrollTimer )
{
clearTimeout( window.scrollTimer ); //if the scroll has already started then clear the timeout
}
window.scrollTimer = setTimeout( function(){
callback(); //invoke the callback in case scroll has been idle for srollTimeout ms
}, scrollTimeout );
});
}
You need to invoke it this way
setUnscrollEvent( 100, function(){
console.log( "no scrolling for 100ms" );
});
DEMO
function setUnscrollEvent( scrollTimeout, callback )
{
$( window).scroll(function() {
if ( window.scrollTimer )
{
clearTimeout( window.scrollTimer ); //if the scroll has already started then clear the timeout
}
window.scrollTimer = setTimeout( function(){
callback(); //invoke the callback in case scroll has been idle for srollTimeout ms
}, scrollTimeout );
});
}
setUnscrollEvent( 100, function(){
console.log( "no scrolling for 100ms" );
});
.container
{
width: 1000px;
height: 1000px;
background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
</div>
let scrollHandler = function(e) {
//do your stuff
}
$(window).on("scroll",scrollHandler);
That will detect scrolling for you, to answer the question in your title. I don't follow what you're trying to say under your code though
Export your function, so that you can call it when you want :
if ($('document').scrollTop() < 0) {
//Automatic Scroll
setTimeout(triggerScroll,8000);
}
function triggerScroll() {
$('html, body').animate({
scrollTop: $('.main-header').offset().top - 0
}, 1800, 'easeInOutQuad');
}
// Manual trigger :
triggerScroll();
Related
I'm trying to make customize section-scroll where scroll event is disabled while animation is in motion.
I tried with overflow hidden and other similar functions to apply while scroll animation is in progress but no luck.
JS fiddle example
CSS
.stop-scrolling {
height: 100%;
overflow: hidden;
}
JS example:
$('html').on('wheel', function(event) {
if (event.originalEvent.deltaY > 0) {
//scroll down
counter++;
$('body').addClass('stop-scrolling');
console.log("Start animacije");
setTimeout(function () {
$('body.stop-scrolling').removeClass('stop-scrolling');
console.log("End animation");
}, 800);
if (!(counter > maxSections)) {
$('html, body').animate({
scrollTop: $( $("#sect-"+counter) ).offset().top
}, 800);
}
} else {
//scroll up
counter--;
$('body').addClass('stop-scrolling');
console.log("Start animation");
setTimeout(function () {
$('body.stop-scrolling').removeClass('stop-scrolling');
console.log("End animation");
}, 800);
if (!(counter < 1)) {
$('html, body').animate({
scrollTop: $( $("#sect-"+counter) ).offset().top
}, 800);
}
}
if (counter <= 0) {
counter = 1;
}
else if (counter >= 3) {
counter = maxSections;
}
console.log(counter);
});
If you scroll while animation is in progress, scroll will continue until you reach end of sections.
Is possible to disable scroll event while animation is in progress?
Here's simple fix with less code modification.
Just declare a variable that represents scrolling state. And using this state you can ignore incoming scroll events if currently scrolling.
let scrolling = false;
$('html').on('wheel', function(event) {
if (scrolling) {
return;
} else {
scrolling = true;
setTimeout(function () {
scrolling = false;
}, 800 /* animation duration */);
}
...
Here's final fiddle link.
Using setTimeout function you can reset scrolling state to false so, new events will be received.
Instead of using CSS, you can use your script to block scroll events.
You can use the onComplete parameter of the .animate method to run a callback after animation ends.
With this, you can use a flag variable to determine whether or not the page is scrolling.
The whole process would be something like:
Animation started.
Flag animating = true.
Block scrolling.
Animation ended.
Flag animating = false.
Unblock scrolling.
Here's a minimal and reproducible example. It may have some bugs, but it should solve your main problem.
$(document).ready(function(){
'use strict';
// Flag to decide whether or not scroll is allowed.
let animating = false;
$(window).on('scroll', (e) => {
if (animating){
// Block scroll
e.preventDefault();
}
});
$('.section').on('wheel', e => {
e.stopPropagation();
// Do not run this function again when animation is happening.
if (animating){
return;
}
const $target = $(e.target);
const isScrollDown = e.originalEvent.deltaY > 0;
// Choose whether to scroll to next or previous section.
const $targetSection = isScrollDown ? $target.next('.section') : $target.prev('.section');
// Check whether or not there is a target
const hasTargetSection = $targetSection.length > 0;
// Only animate when there is a target.
if (hasTargetSection){
// Flag animation start
animating = true;
$('html, body').animate(
// Animation properties
{
scrollTop: $targetSection.offset().top
},
// Animation duration
800,
// Function to run after animation ends
() => {
// Flag animation ended
animating = false;
}
);
}
});
});
html, body, #app {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.section {
width: 100%;
height: 100%;
font-size: 3em;
display: flex;
justify-content: center;
align-items: center;
}
.a {
background-color: #f008;
}
.b {
background-color: #0f08;
}
.c {
background-color: #00f8;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="app">
<div class="section a">Section A</div>
<div class="section b">Section B</div>
<div class="section c">Section C</div>
</div>
What you are asking for is called throttling. I recommend you read this link to understand it better.
So to fix your code, you only need to enable throttling for your wheel event listener.
Like this:
let throttle = (fn, timedelay) => {
let pass = true;
return function () {
if (pass) {
setTimeout(() => {
fn.apply(this, arguments);
pass = true;
}, timedelay);
pass = false;
}
};
};
let scrollFunction = throttle(function(event) {
// your code
}, 200); // 200 miliseconds sounds good
$('html').on('wheel', scrollFunction);
Here is a working code: https://jsfiddle.net/d1fcL5en/
I have a simple JS that would smoothly autoscroll to another div whenever mousewheel is moved up or down.
Here's the script:
$(document).bind('mousewheel', function(evt) {
var delta = evt.originalEvent.wheelDelta
if(delta < 0){
$('html, body').animate({
scrollTop: $("#content-wrapper").offset().top
}, 3000);
}
else {
$('html, body').animate({
scrollTop: $("#bgheader").offset().top
}, 3000);
}
});
My problem is that if i play for a few seconds with the mousewheel it would start scrolling here and there forever, since every move recorded is queued as additional script launch.
Is there any way to put some sort of 'cooldown' to the script? So that after using once it would become avaiable to use again in, let's say' 3 seconds? Or once the animation is finished?
You can unbind the wheel event listener, and then use jQuery's .animate() callback function to re attach the event listener after it is done, like so:
function scrollHandler (event) {
$(document).off("mousewheel.custom");
var delta = event.originalEvent.wheelDelta
if(delta < 0){
$('html, body').animate({
scrollTop: $("#content-wrapper").offset().top
}, 3000, function () {
// animation callback function
$(document).on("mousewheel.custom", scrollHandler);
}));
}
else {
$('html, body').animate({
scrollTop: $("#bgheader").offset().top
}, 3000, function () {
// animation callback function
$(document).on("mousewheel.custom", scrollHandler);
});
}
}
// namespace the event so we can easily .off() it
$(document).on('mousewheel.custom', scrollHandler);
I've used timeouts.
var maxPoll = 3000,
eventActive = false;
$(document).bind('mousewheel', function(evt) {
if(eventActive) {
return
} else {
setTimeout(maxPoll, function() { eventActive = True })
}
var delta = evt.originalEvent.wheelDelta
if(delta < 0){
$('html, body').animate({
scrollTop: $("#content-wrapper").offset().top
}, maxPoll);
}
else {
$('html, body').animate({
scrollTop: $("#bgheader").offset().top
}, maxPoll);
}
});
It's rough and it uses globals, but it basically turns off your event while the animation is running.
I'm using Prototype.js to load an html element when the user performs a mouseover on certain list items. I'm using setTimeout() to load the content only if the mouse is still over the list item after a given amount of time. I want to use clearTimeout when the user performs a mouseout on the same list item.
clearTimeout() is not clearing my timeout. I am pretty sure this is because of a common variable scope issue hidden from me by my lack of familiarity with Prototype.js
Can someone point out the flaw in this code or determine what I need to add to make the clearTimeout() function work properly?
document.observe( 'dom:loaded', function() {
var timeout;
$$('.nav-primary li.category').each( function( item ) {
item.observe('mouseover', function(event) {
event.stopPropagation();
categoryId = event.currentTarget.id;
getCategoryBlurb(categoryId);
timeout = setTimeout( function() {
showCategoryInfo(categoryData, categoryId);
}, waitTime);
});
item.observe('mouseout', function(event) {
event.stopPropagation();
clearTimeout(timeout);
});
});
});
Updated Code
$$('.nav-primary li.category').each( function( item ) {
var timeout = null;
item.observe('mouseover', function(event) {
event.stopPropagation();
categoryId = event.currentTarget.id;
getCategoryBlurb(categoryId);
if( timeout === null ) {
timeout = setTimeout( function() {
showCategoryInfo(categoryData, categoryId);
}, waitTime);
}
console.log(timeout);
});
item.observe('mouseout', function(event) {
if( timeout !== null ) {
console.log(timeout);
clearTimeout(timeout);
timeout = null;
}
});
});
clear the timeout before you set it
if (timeout) { clearTimeout(timeout); }
timeout = setTimeout( function() { /* code here */ });
I want to start and stop an animation when click on the same div.
$('div').click(function(){
//if is the first click -->do animation in loop
//if is the second click--->stop animation
});
How do u do it?
I had resolve only the animation start with loop:
var play = 0;
function myAnimateGreen(){
$('green').animate(
{left:'+250px'},
1000,
);
while(play==1) {myAnimateGreen();}
}
$('green').click(function(){
play = 1;
myAnimateGreen();}
});
But I can't resolve the stop!
You can use the :animated selector to detect if the animation is currently happening
$('div').click(function(){
if( !$(".green").is(':animated') ) {
//Do animation
} else {
//Stop animation
}
});
function animateGreen(el) {
var delay = 500,
time = 1000,
distance = 150;
el.animate({left:'+='+distance+'px'}, time, "linear");
el.data("anim_green", setTimeout(animateGreen, time+delay, el));
}
$('green').click(function() {
var self = $(this);
if (self.data("anim_green")) {
clearTimeout(self.data("anim_green"));
self.data("anim_green", false);
return;
}
animateGreen(self);
});
Should do it, just paste! Proof: http://jsbin.com/ajagij/3/edit
My webpage animates scrolling when users click on links to the same page. I want to cancel this animation as soon as the user tries to scroll (otherwise the user and the browser are fighting for control) – no matter whether with the mouse wheel, the keyboard or the scrollbar (or any other way – are there other ways of scrolling?). I managed to cancel the animation after the mouse wheel or keyboard are used, how do I get this working with the scrollbar?
Here is how my code looks for the keyboard:
$(document.documentElement).keydown( function (event) {
if(event.keyCode == 38 || 40) stopScroll();
});
function stopScroll() {
$("html, body").stop(true, false);
}
I also tried a more elegant way of doing this by using scroll(), the problem is that scroll() catches everything including the animated and automated scrolling. I could not think of any way to let it catch all scrolling except the animated scrolling.
you need animation marker, something like this
$("html, body").stop(true, false).prop('animatedMark',0.0).animate({scrollTop : top, animatedMark: '+=1.0'})
Here is the code, the code was mix of GWT and javascript so moved it to js, not fully tested, please try it
var lastAnimatedMark=0.0;
function scrollToThis(top){
// Select/ stop any previous animation / reset the mark to 0
// and finally animate the scroll and the mark
$("html, body").stop(true, false).prop('animatedMark',0.0).
animate({scrollTop : top, animatedMark: '+=1.0'}
,10000,function(){
//We finished , nothing just clear the data
lastAnimatedMark=0.0;
$("html, body").prop('animatedMark',0.0);
});
}
//Gets the animatedMark value
function animatedMark() {
var x=$("html, body").prop('animatedMark');
if (x==undefined){
$("html, body").prop('animatedMark', 0.0);
}
x=$("html, body").prop('animatedMark');
return x;
};
//Kills the animation
function stopBodyAnimation() {
lastAnimatedMark=0;
$("html, body").stop(true, false);
}
//This should be hooked to window scroll event
function scrolled(){
//get current mark
var currentAnimatedMark=animatedMark();
//mark must be more than zero (jQuery animation is on) & but
//because last=current , this is user interaction.
if (currentAnimatedMark>0 && (lastAnimatedMark==currentAnimatedMark)) {
//During Animation but the marks are the same !
stopBodyAnimation();
return;
}
lastAnimatedMark=currentAnimatedMark;
}
Here is the blog about it
http://alaamurad.com/blog/#!canceling-jquery-animation-after-user-interaction
Enjoy!
Here's a jquery function that should do the trick:
function polite_scroll_to(val, duration, callback) {
/* scrolls body to a value, without fighting the user if they
try to scroll in the middle of the animation. */
var auto_scroll = false;
function stop_scroll() {
if (!auto_scroll) {
$("html, body").stop(true, false);
}
};
$(window).on('scroll', stop_scroll);
$("html, body").animate({
scrollTop: val
}, {
duration: duration,
step: function() {
auto_scroll = true;
$(window).one('scroll', function() {
auto_scroll = false;
});
},
complete: function() {
callback && callback();
},
always: function() {
$(window).off('scroll', stop_scroll);
}
});
};
It's not very elegant, but you could use a flag of some kind to detect what type of scrolling you're dealing with (animated or 'manual') and always kill it when it's animated. Here's an untested example:
var animatedScroll = false;
// you probably have a method looking something like this:
function animatedScrollTo(top) {
// set flag to true
animatedScroll = true;
$('html').animate({
scrollTop : top
}, 'slow', function() {
// reset flag after animation is completed
animatedScroll = false;
});
}
function stopScroll() {
if (animatedScroll) {
$("html, body").stop(true, false);
}
}