We Keep Coding

Run a certain script JS after x seconds that the page is loaded

I have this script:
<script>
var Webflow = Webflow || [];
Webflow.push(function() {
MemberStack.onReady.then(function(member) {
if(member.memberPage){
window.location.replace(member.memberPage);
}else{
setTimeout(function() { location.reload(true); }, 3000);
}
})
});
</script>
I would like this script to run after 5 seconds after the page loads, how could it be solved?

How about window.onload along with setTimeout ?
Example:
window.onload = function() {
setTimeout(function () {
// Do stuff here
}, 5000);
}
or, you may also use event listeners
function delayAndExecute() {
setTimeout(function () {
// Do stuff here
}, 5000);
}
// Everything but IE
window.addEventListener("load", function() {
delayAndExecute();
}, false);
// IE
window.attachEvent("onload", function() {
delayAndExecute();
});

<script>
var Webflow = Webflow || [];
window.onload = function () {
setTimeout(function () {
Webflow.push(function () {
MemberStack.onReady.then(function (member) {
if (member.memberPage) {
window.location.replace(member.memberPage);
} else {
setTimeout(function () { location.reload(true); }, 10);
}
})
});
}, 5000);
}
</script>
So i I tried to do this but the script repeats itself every 5 seconds without taking setTimeout (function () {location.reload (true);}, 10)into consideration; I would like the script to start only the first time in 5 seconds later loading the script

5 seconds after window.onload you are pushing a function into the webflow Array.
But you are never calling it. Add webflow[0](); to your code;
var Webflow = Webflow || [];
window.onload = function () {
setTimeout(function () {
Webflow.push(function () {
MemberStack.onReady.then(function (member) {
if (member.memberPage) {
window.location.replace(member.memberPage);
} else {
setTimeout(function () { location.reload(true); }, 10);
}
})
});
webflow[0]();
}, 5000);
}

How to stop function on blur()

myfucntion = send request after 5 sec
document.ready(myfucntion)
$(window).focus(myfucntion)
$(window).blur(stop(myfucntion))
is this possible to stop a function on blur called previously in document.ready

Have a global timer:
var intervalId;
And it would be better to have two functions:
startfunction() {
intervalId = setTimeout(function () {
// send request after 5 seconds
}, 5000);
}
stopfunction() {
clearTimeout(intervalId);
}
And use them like this:
$(document).ready(startfunction);
$(document).ready(function () {
$(window).focus(startfunction);
$(window).blur(stopfunction);
});

Here is an example of how to make what you want work
var timer; // make it global so it can be accessed inside functions
var myFunction = function () {
timer = setTimeout(function() {
//do something after 5 seconds
}, 5000);
}
var stopMyFunction = function () {
clearTimeout(timer);
}
$(document).ready(myFunction)
$(window).focus(myFunction)
$(window).blur(stopMyFunction))

Jquery functions Delay shortens with each Interval

I am not sure how to ask this question. I made a jQuery function for a banner.
$(document).ready(function() {
ionanim();
setInterval(ionanim, 12000);
function ionanim() {
$(function () {
$('.ion1anim').fadeIn(500, function () {
$(this).delay(5000).fadeOut(500);
});
});
$(function () {
$('.ion2anim').delay(6000).fadeIn(500, function () {
$(this).delay(5000).fadeOut(500);
});
});
};
});
Link for the full animation : http://jsfiddle.net/L8XHL/11/
But with each intervatl on the setInverval the animations go close to each other after some time they overlap each other.
Did i do anything wrong?

Intervals and animations aren't exact enough to handle the timing that you require. I'd suggest using a self-executing function instead so that it will never overlap.
Also, you are over-using the document ready handler. Please stop.
http://jsfiddle.net/L8XHL/13/
$(document).ready(function () {
ionanim();
function ionanim() {
$('.ion1anim').fadeIn(500, function () {
$(this).delay(5000).fadeOut(500, function () {
$('.ion2anim').fadeIn(500, function () {
$(this).delay(5000).fadeOut(500,ionanim);
});
});
});
}
});
I would further modify this to work more like a slider so that you can add an infinite number of items without having a huge pyramid of code.
http://jsfiddle.net/L8XHL/17/
$(document).ready(function () {
$(".ionbanner .bottom div").first().siblings().hide();
anim();
function anim() {
var curr = $(".ionbanner .bottom :visible");
var next = curr.next();
if (next.length == 0) {
next = curr.siblings().first();
}
curr.delay(5000).fadeOut(500,function(){
next.fadeIn(500,anim);
});
}
});

Or you could try something like this: http://jsfiddle.net/L8XHL/16/
$(document).ready(function() {
var anim1 = function() {
$('.ion1anim').fadeIn(1000, anim1Callback);
},
anim1Callback = function() {
$('.ion1anim').fadeOut(1000, anim2);
},
anim2 = function() {
$('.ion2anim').fadeIn(1000, anim2Callback);
},
anim2Callback = function() {
$('.ion2anim').fadeOut(1000, anim1);
};
anim1();
});

Detect Mousemovent inside of blur function Jquery

I am trying to create a neat way to stop an AJAX called based upon if the browser is in focus, and if the mouse moves.. So here's what I want it to do:
If the user goes to a different tab in their browser, minimized the window, or goes somewhere else other than the web app, I want it to kill the AJAX calls in 1 minute. If the user moves the mouse anywhere in the web app, it should consider the user "focused" on the app, and thus continue the ajax calls. I put a timeout called "st" in there to take care of the "timeout" portion, but adding in a mouse detector is a little more advanced. Here's what I have:
var window_focus = true;
$(document).ready(function () {
$('#alertbox').click(function () {
$('#alertbox').slideUp("slow");
});
// Check focal point
$(window).focus(function () {
if (window_focus) {
return
}
window_focus = true;
waitForMsg();
}).blur(function () {
if (!window_focus) {
return
}
console.log('Init Suspension...');
// Set Timeout
$(function () {
st = setTimeout(function () {
clearTimeout(setTimeoutConst);
window_focus = false;
document.title = 'Timed Out | WEBSITE';
console.log('Suspended');
}, 60000);
});
});
waitForMsg();
});
I was going to try adding in something like this:
$(function () {
$().mousemove(function () {
console.log('Reinitialize');
clearTimeout(st);
waitForMsg();
});
});
But it didn't work. Thanks for your help.

http://jsfiddle.net/popnoodles/5mqMm/
You probably want this using .one(). This will see the mouse move, run your procedure and not run it again, until the window is reloaded or it's on another page.
Putting it inside of blur means blurring sets it up again.
}).blur(function () {
$(document).one('mousemove', function(){
// i react ONCE to the mouse being moved
console.log('Reinitialize');
clearTimeout(st);
waitForMsg();
// focus the window again as desired
$(window).trigger('focus');
});
if (!window_focus) {
return
}
console.log('Init Suspension...');
// Set Timeout
$(function () {
st = setTimeout(function () {
clearTimeout(setTimeoutConst);
window_focus = false;
document.title = 'Timed Out | WEBSITE';
console.log('Suspended');
}, 60000);
});
});

Try this jsfiddle
var window_focus = true, lastMouseMoveTime;
$(document).ready(function () {
lastMouseMoveTime = new Date().getTime();
$('#alertbox').click(function () {
$('#alertbox').slideUp("slow");
});
// Check focal point
$(window).focus(function () {
if (window_focus) {
return
}
window_focus = true;
waitForMsg();
}).blur(function () {
if (!window_focus) {
return
}
window_focus = false;
console.log('Init Suspension...');
// Set Timeout
});
waitForMsg();
$(document).mousemove(function(){
lastMouseMoveTime = new Date().getTime();
if(!window_focus ){
waitForMsg(); // restarting ajax if it stopped because of mousemove.
}
});
});
in your ajax call method
if( !window_focus){
if( new Date().getTime() - lastMouseMoveTime > 60*1000 ){
return;
}
}

Stop timer on hover

I'm not a JS coder my any means. I know enough to make things do what I want, but couldn't code from scratch. My issue is:
We have a shopping cart that when you add a product the cart shows itself for 4 secs unless the customer hovers over the cart. I can't seem to get it to stop the timeout when the cursor is hovered over it.
$(document).ready(function () {
setTimeout(function () { $('#ctl00_ctl00_ctlHeader_divOrderProducts').hide(); }, 4000);
});

Store the return of setTimeout() in a variable, and use that to clearTimeout():
// t is a global scope variable.
// Probably a good idea to use something better than 't'
var t;
$(document).ready(function () {
// Store the return of setTimeout()
t = setTimeout(function () { $('#ctl00_ctl00_ctlHeader_divOrderProducts').hide(); }, 4000);
});
$('cart-selector').hover(function() {
if (t) {
// Call clearTimeout() on hover()
clearTimeout(t);
}
});

You need to set your timer to a variable:
var timer1 = setTimeout(function () { ... })
then use:
clearTimeout(timer1)

You need to save the return value of setTimeout() so you can later use it with clearTimeout(). One way to that is like this:
$(document).ready(function () {
var hideTimer = setTimeout(function () {
$('#ctl00_ctl00_ctlHeader_divOrderProducts').hide();
}, 4000);
$('#ctl00_ctl00_ctlHeader_divOrderProducts').hover(function() {
if (hideTimer) {
clearTimeout(hideTimer);
hideTimer = null;
}
});
});
If you want to re-enable the timer when the mouse leaves the cart again (assuming #ctl00_ctl00_ctlHeader_divOrderProducts is the cart), you can do so like this:
$(document).ready(function () {
var hideTimer;
function delayHideCart() {
if (!hideTimer) {
hideTimer = setTimeout(function () {
$('#ctl00_ctl00_ctlHeader_divOrderProducts').hide();
}, 4000);
}
}
delayHideCart();
$('#ctl00_ctl00_ctlHeader_divOrderProducts').hover(function() {
if (hideTimer) {
clearTimeout(hideTimer);
hideTimer = null;
}
}, function() {
delayHideCart();
});
});

This should do it:
$(document).ready(function () {
var timeout = setTimeout(function () { $('#ctl00_ctl00_ctlHeader_divOrderProducts').hide(); }, 4000);
$('#ctl00_ctl00_ctlHeader_divOrderProducts').mouseover(function() {
clearTimeout(timeout);
});
});
You save the timeout as a variable and then call clearTimeout when you mouseover the cart and pass in that timeout.

var timer = window.setTimeout(function () {
$('#ctl00_ctl00_ctlHeader_divOrderProducts').hide();
if(someCondition)clearTimeout(timer);
}