Can someone assist me on how I can delay this function?
$('#customer_quote').lightbox_me({
centered: true,
closeSelect: ".close",
onClose: function(){
$('div.error').remove()
}
})
});
I want this lightbox to open after 7 seconds.
Use setTimeout():
setTimeout(lightbox, 7000);
function lightbox() {
$('#customer_quote').lightbox_me({
centered: true,
closeSelect: ".close",
onClose: function(){
$('div.error').remove()
}
})
});
}
Give setTimeout a shot:
setTimeout(function() {
$('#customer_quote').lightbox_me({
centered: true,
closeSelect: ".close",
onClose: function() {
$('div.error').remove()
}
});
}, 7000);
setTimeout(function(){
$('#customer_quote').lightbox_me({
centered: true,
closeSelect: ".close",
onClose: function(){
$('div.error').remove()
}
})
});
}, 7000);
Check this link out: To delay JavaScript function call using jQuery
Seems like you just use setTimeout with 7000
Use setTimeout.
var delayedFunction = function() {
/* your code */
}
setTimeout(delayedFunction, 7000);
The second argument stands for the number of miliseconds.
Note also that this evokes an asynchronous event. The execution of your code will not stop at the line with setTimeout for 7 seconds.
If you want to execute another code after this delay, you must do so in delayedFunction, when the event fires.
Related
My problem is javascript not wait for file selection dialog closing.
I have just found an solution that we declare a onChange event for element. So onChange event work right, but script still run before onChange event. They a asynchronous.
I think may be there is a way to check if there is any dialog opening ?
Please help me, 2 day of mine :)
If you want to call back method after dialog is completely opened, you can use using jQuery Promise object as mentioned in this answer:
$("#dialog").dialog({
show: {
effect: "drop",
direction: "up",
duration: 1000
},
hide: {
effect: "drop",
direction: "down",
duration: 1000
},
open: function () {
$(this).parent().promise().done(function () {
console.log("[#Dialog] Opened");
});
},
close: function () {
$(this).parent().promise().done(function () {
console.log("[#Dialog] Closed");
});
}
});
Here is the usual JSFiddle Demo: http://jsfiddle.net/losnir/jcmpm/
I have a popup window using fancybox which I would like to add some timings to, show after 1 second maybe and disappear after 5. I cant figure out where to add any delays in the code i am using, please can anyone help?
<script type="text/javascript">
jQuery(document).ready(function ($popup) {
$popup("#hidden_link").fancybox({
onComplete: function () {
$popup("#fancybox-img").wrap($popup("<a />", {
href: "mylink.html",
target: "_blank",
// delay: 9000 would like a delay ideally
}));
}
}).trigger("click");
});
</script>
<a id="hidden_link" href="images/myimage.jpg" style="visibility:hidden;"></a>
You can use $.fancybox.open(), see details here - Can you explain $.fancybox.open( [group], [options] ) params and if I can add youtube link as href?, and $.fancybox.close().
setTimeout(function(){
$.fancybox.open(...)
}, 1000);
setTimeout(function(){
$.fancybox.close(...)
}, 5000);
If your link is not going to be visible, you may rather open fancybox programmatically using the $.fancybox.open() method and close it using the $.fancybox.close() method.
As pointed out, you could use setTimeout() to delay the execution of either those methods like :
jQuery(document).ready(function ($popup) {
// open with delay
setTimeout(function () {
$popup.fancybox({
href: 'images/image01.jpg',
onComplete: function () {
$popup("#fancybox-img").wrap($popup("<a />", {
href: "mylink.html",
target: "_blank"
}));
// close with delay
setTimeout(function () {
$popup.fancybox.close();
}, 9000); // setTimeout close
}
});
}, 2000); // setTimeout open
}); // ready
See JSFIDDLE
Note: this is for fancybox v1.3.4.
I don't understand the use of stop() element in jquery.
In this example, i try to open a div when the user launch the myfunction function (for example by clicking on a trigger)
But if you click several time, #mydiv desapears anyway, without waiting 3 seconds, because it close 3 second after your first click.
function myfunction(hello)
{
$( "#mycontener" ).html( hello );
$( "#mydiv" ).stop( true, true ).slideDown( 250, function() {
setTimeout(function() {
$("#mydiv").slideUp( 250 );
}, 3000);
});
};
Is it clear enough ?
Thanks
You will need to clear the timeout to prevent it from happening on future calls. Something like this:
(function () {
var handle;
function myfunction(hello) {
clearTimeout(handle);
$("#mycontener").html(hello);
$("#mydiv").stop(true, true).slideDown(250, function () {
handle = setTimeout(function () {
$("#mydiv").slideUp(250);
}, 3000);
});
}
window.myfunction = myfunction;
})();
$(function(){
$('#slides_left').slides({
generateNextPrev: false,
play: 5500
});
});
How can I add a .delay() to the function above so that the starting time for the function is not onload rather to a specified time?
sorry for my noobness in jQuery!
Thanks!
you can use javascript setTimeOut function
setTimeout(functionname, 2000); // replace 2000 with your number of millisecond required for delay.
Call this setTimeout inside onload.
Cheers!!
$(function(){
// Start after 3 seconds
window.setTimeout('doSlide()', 3000);
});
function doSlide(){
$('#slides_left').slides({
generateNextPrev: false,
play: 5500
});
};
There is also a pause option for slides().
Use setTimeout
$(function(){
setTimeout(function(){
$('#slides_left').slides({
generateNextPrev: false,
play: 5500
});
}, 1000);
});
$('.file a').live('mouseenter', function() {
$('#download').stop(true, true).fadeIn('fast');
}).live('mouseleave', function() {
$('#download').stop(true, true).fadeOut('fast');
});
I want the mouseenter function to have a stop() and a delay of 1 second.
So, if I hover over #download the fadeIn should start after a 1 second delay. If I mouse out meanwhile the fadeIn shouldn't start. Get me?
I don't really know how to do that, any ideas?
You need to use setTimeout() in this case because of how .delay() works (and your inability to cancel it).
$('.file a').live('mouseenter', function() {
$.data(this, 'timer', setTimeout(function() {
$('#download').stop(true, true).fadeIn('fast');
}, 1000));
}).live('mouseleave', function() {
clearTimeout($.data(this, 'timer'));
$('#download').stop(true, true).fadeOut('fast');
});
You can give it a try here.
If you use .delay() it'll dequeue the next animation for the element, regardless of if you cleared that queue earlier. So you need a timeout that you can cancel, which the above does by manually calling setTimeout() and storing the result with $.data() so you can clear it later, via clearTimeout().
I was looking for the answer to a similar question, and I found that .animate() could also be used to handle this, and it obeys .stop()
It would look something like this:
$('.file a').live('mouseenter', function() {
$('#download')
.stop(true, true)
.animate({opacity:0}, 1000); // one second delay
.animate({opacity:1}, 'fast', 'swing');
}).live('mouseleave', function() {
$('#download')
.stop(true, true)
.animate({opacity:0}, 'slow', 'swing');
});
Use a setTimeout function
$('.file a').live('mouseenter', function() {
setTimeout(function(){
$('#download').stop(true, true).fadeIn('fast');
}, 1000);
}).live('mouseleave', function() {
$('#download').stop(true, true).fadeOut('fast');
});
setTimeout will execute the code inside the function after the specified miliseconds (in this case 1000).
you can use this on jquery without using delay event .
$('.file a').hover(function() {
time = setTimeout(function() {
$('#download').fadeIn();
},1000);
},function(){
clearTimeout(time);
});
1000 is your time that after it $('#download') will fade in .