We Keep Coding

jQuery scrollTop won't let me scroll after executed

I have a landing image, that has two functions - one is a click function that once the landing image is clicked it scrolls down to reveal the next section. The second function is a scroll function, where the user scrolls/ swipes down and the scroll is hijacked to the next section. Once one of these functions is activated the landing image is hidden and cannot be seen again until a new tab is opened.
I have the click and scroll function working, the issue is once the scroll effect is finished I cannot resume scrolling the rest of the page.
I realize that the scroll function may still be running which is keeping the scroll at the top, but do not know what to add to my code?
Additionally, I am using the Divi theme, so difficult to add HTML markup
(function ($) {
$(document).ready(function () {
let header = $('.cf_bal-header');
let page = $('html, body');
// Check for first timers
if (!sessionStorage.returnVisitor) {
// No flag, this is the first visit.
// Set a flag so that next time we know they have been here before.
sessionStorage.returnVisitor = 'true';
// Handle Hero image click.
$('.cf_news_link').click(function () {
$(page).animate({
scrollTop: $(".news").offset().top
}, 1000);
return false;
});
// Handle scrolling (this is our scroll jacker)
$(window).on('scroll', function () {
if ($(page).animate({
scrollTop: $(".news").offset().top
}, 1000));
return false;
});
} else {
// Not our first time, hide header.
header.hide();
}
});
})(jQuery);

Scroll down window using javascript

I'm trying to simulate a user pressing the pagedown key - and waiting for a second (waiting for the web page to show more results), simulate pressing pagedown again (waiting for the web page to show more) etc.
for(var s= 0;s< 5;s++){
window.scrollBy(0,500); // horizontal and vertical scroll increments
setTimeout(function() {}, 1000);
}
It just seems to trigger the page down once, with little/no delay.
I want the script to stop at the setTimeout and not execute anything else for a second, before carrying on.
Any advice would be great,
Thanks, Mark

I think you want something like this:
function scrollDown(num_times) {
num_times -= 1;
if (num_times === 0) {
return;
}
window.scrollBy(0,500); // horizontal and vertical scroll increments
setTimeout(function() {
scrollDown(num_times);
}, 1000);
}
scrollDown(5); // scroll down 5 times
The setTimeout function needs to get the function you want to execute after the delay.

How to stop jQuery delay timer based animation?

So I'm building this modal / timed animation with slide navigation from scratch.
I have a function for the buttons that navigate the slides, and also a function to animate the frames every 5 secs. My problem is I'm not sure how to "break" the delay function if the user decides to take over by clicking the navigation buttons. As soon as the user clicks any of those buttons the delay based animation function needs to stop working.
// Timer for Animating Frames
// Need a kill timer function
var animateFramesTimer = function(){
$('#tour_1')
.delay(5000).fadeOut('fast', function() {
$('#tour_2')
.fadeIn('fade').delay(5000).fadeOut('fast', function() {
$('#tour_3')
.fadeIn('fade').delay(5000).fadeOut('fast', function() {
$('#tour_4')
.fadeIn('fade').delay(5000).fadeOut('fast', function() {
$('#tour_modal').fadeOut('fast');
// END
});
});
});
});
}
animateFramesTimer();
So I run animateFramesTimer and if a certain button is clicked I need the function to stop working, I tried a while loop which seemed like the correct path to go, but it kept breaking in the browser :(
var autoAnimate = true;
while(autoAnimate){
// delay animation
}
Do you know of a better way to accomplish this?

$('[id^="tour_"]').stop(true, true); // kills current animations
animateFramesTimer = function() {}; // removes function

Displaying popup window if it is taking more than 3 seconds to load a page

Need to Display a popup before page load if page is loading more than 3 seconds. Used below code but it displays popup if page load is less tahn 3 seocnds also. Popup need to displayed if the page loading takes more time not less time.
<script type="text/javascript">
setTimeout(fnShowPopup, 1000);
function fnShowPopup() {
var answer = confirm("It may take few time to open this docuemnt. Click YES if you want to open the docuemnt in native format or click on CANCEL to continue viewing the docuemnt")
if (answer)
window.open(NativeView())
}
</script>

setTimeout(func, delay) comes with a method to abort the timer: clearTimeout(timeoutID)
<script>
var myTimer = setTimeout(fnShowPopup, 3000);
if (typeof(window.addEventListener) === 'function') {
// standard conforming browsers
window.addEventListener('load', function () {
clearTimeout(myTimer);
}, true);
} else {
// legacy, IE8 and less
window.attachEvent('onload', function () {
clearTimeout(myTimer);
});
}
</script>
Put this in the <head> of your page, before any other <script>s, <style>s or <link>s.
In your fnShowPopup function you may want to stop the page loading if the user chooses the "native format".
See https://stackoverflow.com/a/10415265/

Disable a next/previous button(link) temporarily when clicked in jQuery Cycle plugin (not necessarily a jquery cycle issue)

I need to prevent link from being clicked for let's say 2 seconds.
Here is an example http://jsbin.com/orinib/4/edit
When you look at the rendered mode you see next and prev links. When you click next, it slides with a nice transition. However if you click multiple times there is no transition sort of, which is expected. But my question: is this how can I prevent clicking on the next link, for about 2 seconds (or what ever time it takes for transition to happen) so that no matter what transition will occur.
This is what I tried to use, but did not work:
function(){
var thePreventer = false;
$("#next").bind($(this),function(e){
if(!thePreventer){
thePreventer = true;
setTimeout(function(){
thePreventer = false;
}, 2000);
}else{
e.preventDefault();
}
});
}
Which I got from here "Disable" a link temporarily when clicked? I think. I believe that i cannot achieve this effect with this code (although it works on other links). I believe this is due to the fact that cycle-plugin got a hold of that link, and I understand that I have to bind/tap-into this functionality of the plugin. Please note: that this code may not work I just used it to show that I tried it and it did not work, you can reuse it if you have to or give me your own stuff.
Please help, if you can.
EDIT:
As mrtsherman proposed this simple yet elegant ANSWER: http://jsfiddle.net/LCWLb.

Take a look at the cycle options page. There are a number of ways to do this. I would consider using the pager event onPrevNextEvent. You can assign a callback function.
$('#slideshow').cycle({
pager: '#nav',
onPrevNextEvent: function(isNext, zeroBasedSlideIndex, slideElement) {
//disable controls
},
after: function(currSlideElement, nextSlideElement, options, forwardFlag) {
//reenable controls
}
});

The following will temporarily prevent clicks while a slideshow is running, as shown in this fiddle:
$.fn.extend({
delayClick: function(callback) {
this.bind('click', function(e) {
$self = $(this);
if( $self.hasClass('disabled') ) {
$('#log').append('<p>click prevented on '+$self.attr('id')+'</p>');
}
else {
$self.addClass('disabled');
callback.call(this, [arguments]);
setTimeout(function() {
$self.removeClass('disabled');
}, 1000);
}
return false;
});
}
});