When my website loads, the popup appears - I need to make it automatically close after a specific time.
$(document).ready(function () {
//select the POPUP FRAME and show it
$("#popup").hide().fadeIn(1000);
//close the POPUP if the button with id="close" is clicked
$("#close").on("click", function (e) {
e.preventDefault();
$("#popup").fadeOut(1000);
});
});
There is already a button but i need to remove it.
You can use the delay() function for that:
$(document).ready(function() {
$("#popup").hide().fadeIn(1000).delay(5000).fadeOut(1000);
$("#close").on("click", function(e) {
e.preventDefault();
$("#popup").fadeOut(1000);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="popup">popup</div>
Please mind the note that is given on the documentation:
The .delay() method is best for delaying between queued jQuery
effects. Because it is limited—it doesn't, for example, offer a way to
cancel the delay—.delay() is not a replacement for JavaScript's native
setTimeout function, which may be more appropriate for certain use
cases.
Javascript have option setTimeout .setTimeout is a native JavaScript function (although it can be used with a library such as jQuery, as we’ll see later on), which calls a function or executes a code snippet after a specified delay (in milliseconds).
setTimeout(function() {
$("#popup").fadeOut(1000);
}, 1000);
or in jquery use .delay(). Set a timer to delay execution of subsequent items in the queue.
$("#popup").delay(1000).fadeOut(1000);
Related
Here is jsFiddle link: https://jsfiddle.net/67kaphgu/
$(document).ready(function(){
$("DIV").css("background-color","red");
confirm("Background not yet changed");
});
In short, I want to highlight some element and ask for confirmation, before proceeding. However that element changes its style after the confirm() call returns.
The issue is because the confirm() call blocks the UI thread from updating. A solution would be to put the confirm() call in a setTimeout() with a very short delay:
$(document).ready(function(){
$("div").css("background-color", "red");
setTimeout(function() {
confirm("Background not yet changed");
}, 50);
});
Updated fiddle
Another alternative would be to use a library which replaces the confirm() box with a modal, so that the UI is free to update at any point.
I have a simple task, when I click on a link, I want to add bg-success class into its child, delay 800ms then remove that class.
I can trigger addClass() after click on a link, like this, it works:
$('a').on('click', function() {
$(this).find('span.code').addClass('bg-success');
});
I can also trigger removeClass after click too, it works (alone) too:
$('a').on('click', function() {
$(this).find('span.code').removeClass('test-class');
});
I can make it delay, after addClass, let fadeOut, it works:
$('a').on('click', function() {
$(this).find('span.code').addClass('bg-success').delay(800).fadeOut(400);
});
But when I want to addClass, delay, then removeClass, it does not work, it remains the same and does nothing. I even tried with long time like 8000ms but still can't make it works. If I replaced it with 2 addClass(), it adds 2 classes at the same time, and does not care about delay():
$('a').on('click', function() {
$(this).find('span.code').addClass('bg-success').delay(8000).removeClass('bg-success');
});
I have tested with everything I can find on Stackoverflow. The weird part is, it does delay when I work with fadeIn, fadeOut and everything else. The delay() just be ignored when work with addClass/removeClass at the same time.
Anyone have issue like this, please suggest some ideas. Thank you.
Update:
Read comments and you guys will see the answer is here.
Btw, can anyone with deep knowledge about jQuery explain for me, why they decided to do that? I mean I see it is easy to make this way, addClass then delay then removeClass, what is the real reason makes the jQuery development team decided to make it won't work this way?
I would like to know because if I have the reason, I won't step into the trap like this again.
If you want to use .delay() then you need to use .queue() to specify the queue of functions that will be executed on the element after the delay.
Your code should be:
$('a').on('click', function() {
$(this).find('span.code').addClass('bg-success').delay(800).queue(function() {
$(this).removeClass('bg-success');
$(this).dequeue();
});
});
This is a DEMO snippet:
$('a').on('click', function() {
$(this).addClass('bg-success').delay(800).queue(function() {
$(this).removeClass('bg-success');
$(this).dequeue();
});
});
a {
width: 100px;
height: 100px;
background-color: blue;
cursor: pointer;
}
.bg-success {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a>A link</a>
But you can also simulate this effect with setTiemout():
$('a').on('click', function() {
var myLink = $(this).find('span.code');
myLink.addClass('bg-success');
setTimeout(function() {
myLink.removeClass('bg-success');
}, 800);
});
delay() limitations:
To get further details why delay() is better used with effects only, you can see in the jquery documentation that unfortunately, it has some limitations over the native JavaScript setTimeout function:
The .delay() method is best for delaying between queued jQuery effects. Because it is limited. It doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.
From the docs:
The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.
(https://api.jquery.com/delay/)
I'd suggest using setTimeout like so:
$('a').on('click', function() {
var span = $(this).find('span.code');
span.addClass('bg-success');
setTimeout(function() {
span.removeClass('bg-success');
}, 800);
});
You can always try with plain old JS with setTimeout() function, to wait for certain period of time before doing something else:
$('a').on('click', function() {
var myCode = $(this).find('span.code').addClass('bg-success');
setTimeout(function(){
myCode.removeClass('bg-success');
}, 800);
});
I dont want to use css3 transition, keeping it pure .js. let assume the following link
when you click, div(s) appear, but how can i get the same function run when the page load/open rather than triggering the function by clicking on btn.??
In this case, they were showing it to you in jQuery, and they were already wrapping it in a function that is not executed until the page is loaded. You just need to remove the "guts" of the click handler and call it directly.
Change:
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
To:
$(document).ready(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
Trigger the event on pageload or what jquery calls it, document.ready
$(document).ready(function() {
// do whatever.
});
document.ready short version
$(function () {
// do whatever.
});
I'm using this code to stop simultaneous animations on 2 elements:
$('#container').find('*').stop(true, true);
The animation can be stopped by an end user hovering over a button, in which case the animation stops after completion (which is what I want). However, the button hover also initiates another function (removes and reloads the elements), and there's a conflict if that function runs before the animations are complete.
I was thinking that using 'after' or 'complete' with the above code might work, but I can't figure out what the syntax would be.
im not sure what you are trying to achieve, but in order to check whether or not there are running/pending animations on the object using jQuery, you can use .promise().done()
example, somehing of this sort:
var animations_running;
$('#container').promise().done(function() {
animations_running=false;
});
$('#container').on("mouseover",".SomethingInside",function(){
if(animations_running==false){
//...do animations...
animations_running=true;
}
});
you can also add a callback function to your jQuery animations as follows:
$('#container').on("mouseover",".SomethingInside",function(){
if(animations_running==false){
$(this).animate({
left:+=50
},500,function(){
//...this is the callback function...
});
animations_running=true;
}
});
In iOS, the following code has a noticeable flicker between the hide() and the scrollBy():
element.hide();
window.scrollBy(0, -elementHeight);
This is because toggling between display: none and display: block on iOS is a heavy task, as if the elements are being added to and removed from the DOM.
I need a way to perform window.scrollBy() as a callback, once the hide() has successfully completed and the DOM has updated. Is there a way to do this in jQuery?
Either pass a duration and a callback, or just pass a callback option, like this:
element.hide(0, some_function);
// or
element.hide({done: some_function});
By default, the second option takes 400 ms. To do it immediately, use one of these:
element.hide(0, some_function);
// or
element.hide({duration: 0, done: some_function});
Here's a jsFiddle demo.
See the jQuery documentation for more details.
From the jQuery api:
.hide(options)
complete
Type: Function()
A function to call once the animation is complete.
Try this:
element.hide({complete: function(){
window.scrollBy(0, -elementHeight); });