I want to reload window after a this custom function finishes:
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function () {
$('#order_form').dolPopupHide({});
}, 3000);
//window.location.reload();
});
</script>
Is there a way I can add the reload to the setTimeout function so it doesn't run until the timeout is over?
reload needs to be inside your function:
$(document).ready(function(){
setTimeout(function () {
$('#order_form').dolPopupHide({});
window.location.reload();
}, 3000);
});
If you want to conceptually separate the work from the reload, you can do something like this:
$(document).ready(function(){
setTimeout(function () {
doWork();
window.location.reload();
}, 3000);
function doWork() {
$('#order_form').dolPopupHide({});
}
});
Or, to be even more general:
function reloadAfterExec(fn)
return function() {
fn();
window.location.reload();
}
}
$(document).ready(function(){
setTimeout( reloadAfterExec(function() {
$('#order_form').dolPopupHide({});
}), 3000);
});
Related
I have a jQuery function :
$(document).ready(function() {
setInterval(function() {
$.post("../user/getdashboard/", function(data) {
$("#users_available").html(data);
});
}, 3000);
}
I have to convert it into window.onload function.
How to do it?
If you want it vanilla js, use onload callback of the window object:
window.onload = function() {
setInterval(function() {
$.post("../user/getdashboard/", function(data) {
$("#users_available" ).html(data);
});
}, 3000);
}
But you could even use load event with jQuery, what is basically the same:
$(window).on('load', function() {
setInterval(function() {
$.post("../user/getdashboard/", function(data) {
$("#users_available").html(data);
});
}, 3000);
});
But keep in mind, that a jQuery ready state is not the same as window.onload. These are two different things. So this might have unexpected impacts to your project/page.
You can handle the readystatechange event,
document.onreadystatechange = function () {
if (document.readyState === "interactive") {
// Your code
}
}
window.onload waits for everything, including images, which probably is overkill.
I want to click a button automatically on every page refresh.But when i have the window.location.reload function the button click is not happening.I am really confused on this one.What to do to get a button clicked automatically on page refresh?
window.setTimeout(function () {
window.location.reload();
repeat();
}, 2000);
function repeat(){
document.getElementById("st").click();
}
window.setTimeout(function () { repeat();
window.location.reload();
}, 2000);
Call repeat before reload function.
This is working!
document.getElementById("st").onclick = function() {
alert('Clicked');
};
window.setTimeout(function() {
window.location.reload();
repeat();
}, 2000);
function repeat() {
document.getElementById("st").click();
}
<div id="st">Div</div>
I am opening a jquery popUp div using
$("#saveDialogSingleFeature").dialog();
I only want the div to appear for 3 seconds then close automatically
tried this using $("#saveDialogSingleFeature").dialog('close')}, 3000);
but this doesnt do anything....shouldnt it close?
$(function () {
$("#saveDialogSingleFeature").dialog();
$("#saveDialogSingleFeature").dialog('close')}, 3000);
});
$(function () {
$("#saveDialogSingleFeature").dialog();
setTimeout(function(){
$("#saveDialogSingleFeature").dialog('close')
}, 3000);
});
$(document).on('popupafteropen', '.ui-popup', function() {
setTimeout(function () {
$(this).popup('close');
}, 3000);
});
Plz Let me know this works for you or not
You can do it in "open" section with use of setTimeout:
$("#saveDialogSingleFeature").dialog({
open: function() {
var a = $(this);
setTimeout(function() {
a.dialog('close');
}, 3000);
}
});
This is my current code to run the series of setTimeout functions. How do I stop these when either the mouse moves, or is over a certain element?
$( document ).ready(function() {
clicky()
function clicky() {
setTimeout(function () {jQuery('#1500').trigger('click');}, 3000);
setTimeout(function () {jQuery('#1990').trigger('click');}, 6000);
setTimeout(function () {jQuery('#2010').trigger('click');}, 9000);
setTimeout(function () {jQuery('#battle').trigger('click');}, 12000);
setTimeout(function () {
jQuery('#water').trigger('click');clicky()
}, 15000);
}
});
You essentially need to save a reference to your timeouts so that they can be cleared when you need them to be. In the following example, I just used an object so that you could specify which timeout you wanted to affect, if desired.
Here's a working fiddle that will clear the timeouts on hover, then reset them when the mouse leaves: http://jsfiddle.net/6tQ4M/2/
And the code:
$(function(){
var timeouts = {};
function setTimeouts () {
timeouts['#1500'] = specifyTimeout('#1500', 3000);
timeouts['#1990'] = specifyTimeout('#1990', 6000);
timeouts['#2010'] = specifyTimeout('#2010', 9000);
timeouts['#battle'] = specifyTimeout('#battle', 12000);
timeouts['#water'] = specifyTimeout('#water', 15000, function(){
console.log('reset the timeouts');
clearTimeouts();
setTimeouts();
});
}
function clearTimeouts () {
for(var key in timeouts){
if(timeouts.hasOwnProperty(key)){
clearTimeout(timeouts[key]);
delete timeouts[key];
}
}
}
function specifyTimeout (id, time, callback) {
return setTimeout(function(){
$(id).trigger('click');
if(callback){
callback();
}
}, time);
}
$('a').on('click', function(){
$('#projects').append('clicky clicky!');
});
$('#map').on('mouseover', clearTimeouts);
$('#map').on('mouseleave', setTimeouts);
setTimeouts();
});
Let me know if you have any questions about the code at all!
Your setTimeout needs to be defined to a variable, so that it can be cleared by passing to clearTimeout(). Something like:
var interval = setTimeout(function() {
//msc
}, 8000);
window.clearTimeout(interval);
Well, according to what you ordered, when you hover an area, the setTimeOut should be fired, and when you are out of this region, the setTimeOut should be reset.
This is the code:
HTML
<div id="map"></div>
CSS
#map{
width:100px;
height:100px;
background-color: black;
}
Javascript
var timeoutHandle;
$('#map').mouseover(function(event){
window.clearTimeout(timeoutHandle);
});
$('#map').mouseout(function(event){
timeoutHandle = window.setTimeout(function(){ alert("Hello alert!"); }, 2000);
});
Basically you should keep a reference to the setTimeOut, in this case the variable is timeoutHandle, call clearTimeOut on mouse over and call setTimeOut again to reset the timer.
Here is the jsFiddle:
http://jsfiddle.net/bernardo_pacheco/RBnpp/4/
The same principle can be used for more than one setTimeOut timer.
You can see more technical details here:
Resetting a setTimeout
Hope it helps.
I have this simple fiddle as a working example-
Jsfiddle
I am trying to detect mouseout event from a div section.
When i mouseover on this image it shows caption; saying "Change Image". After 5 seconds caption goes fadeOut.
I am using setInterval to set it accordingly. Now if I do mouseout of this image, then only I want Interval function should be called.
How do i detect mouseout event in jQuery?
Tried-
$(function () {
$('.image-profile').mouseover(function () {
$('.change-image').stop().show();
if ($('.image-profile').mouseout()== true) {
TimeOut();
}
});
setInterval(function TimeOut() {
$('.change-image').fadeOut()
}, 5000
);
});
var ImageProfileTimer;
$('.image-profile').on('mouseenter',function(){
clearTimeout(ImageProfileTimer);
$('.change-image').stop().show();
}).on('mouseleave',function(){
ImageProfileTimer = setTimeout(function(){
$('.change-image').fadeOut()
}, 5000);
});
Use setTimeout and clearTimeout
Demo : http://jsfiddle.net/xMNTB/9/
$('.image-profile').on('mouseleave', function() {
setTimeout(function() {
$('.change-image').fadeOut()
}, 5000);
});
http://jsfiddle.net/xMNTB/7/
Now the div show up on mouse enter and disappears 5 seconds after mouse leave.
$(function () {
$('.image-profile').mouseenter(function () {
$('.change-image').stop().show();
});
$('.image-profile').mouseleave(function () {
setTimeout(function TimeOut() {
$('.change-image').fadeOut()
}, 5000);
});
});
Try This:
(function () {
$('.image-profile').mouseover(function () {
$('.change-image').stop().show();
if ($('.image-profile').mouseout() == true) {
TimeOut();
}
}).mouseout(function () {
setInterval(function TimeOut() {
$('.change-image').fadeOut()
}, 5000);
});
});
JSFIDDLE DEMO