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);
}
Related
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);
}
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))
i have this JS Code:
<script>
$(document).ready(function () {
window.setTimeout(function () {
$('#logout_warning').reveal();
}, 6000)
});
$(document).ready(function () {
window.setTimeout(function () {
location.href = "/login/logout.php?url=/index.php?r=inactivity";
}, 12000)
});
</script>
it displays a DIV after X Seconds then redirects the page after Y Seconds
is there a way to create a link that will reset the timer back to X seconds and without having to refresh the page?
You could write a wrapper for setTimeout like this
function myTimeout(fn, delay) {
var o = {i: null};
o.cancel = function () {
if (o.i) window.clearTimeout(o.i);
};
o.reset = function () {
if (o.i) window.clearTimeout(o.i);
o.i = window.setTimeout(fn, delay);
};
o.reset();
return o;
}
Then
// common (ancestor?) scope
var t;
// descendant scope, set
t = myTimeout(function () {
$('#logout_warning').reveal();
}, 6000);
// descendant scope where you attach listener to your link
$('#my_link').on('click', function () {
t.reset(); // re-start the timeout
return false;
});
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();
});
in this code:
$("a").live("click", function(e) {
e.preventDefault();
setTimeout(function () {
$.get(
"someOtherUrl",
{someVariable: "someValue"},
function(result) {
$(".result").html(render(result));
}
);
}, 1000);
$('a').live("touchmove", function(e) {clearTimeout()});
});
I want to stop the timeout when the user moves his finger on the screen. The thing is that clearTimeout() doesn't work because it is not linked to the timeout. How would I name the timeout and clear it quickly?
Am I using the right method?
Save the return value from "setTimeout()" in a variable, and then pass that value to "clearTimeout()" to clear it.
$("a").live("click", function(e) {
e.preventDefault();
var t = setTimeout(function () {
$.get(
"someOtherUrl",
{someVariable: "someValue"},
function(result) {
$(".result").html(render(result));
}
);
}, 1000);
$('a').live("touchmove", function(e) {clearTimeout(t);});
});
Now I would actually write that quite differently; as it is, you're adding a redundant "touchmove" handler on every click. Maybe something like this:
function setupAnchorClicks() {
var timer = null;
$("a").live("click", function(e) {
e.preventDefault();
timer = setTimeout(function() {
// ...
}, 1000);
}).live("touchmove", function() {
clearTimeout(timer);
});
}
setupAnchorClicks();
You'll have to save the handle received from setTimeout (it's a plain integer), and then pass it to clearTimeout as the argument.
var functionToCancel = function() {console.log("hello");}
var timeoutHandle = setTimeout(functionToCancel, 1000);
clearTimeout(timeoutHandle);