I do not know what title to give so please I do apologize, i'm just getting curious why in the code below, the text is getting changed before it even fades out even if i've put it after a fade.
$('form').submit(function(){
return false;
});
$('button').on('click',function(){
$(this).addClass('busy');
$(this).parent().find('button').attr('disabled',true);
$(this).parent().find("button:not('.busy')").fadeOut(500);
$('p').text('Processing..').fadeIn(500).trigger('sfsfsf','wala');
});
$('p').on('sfsfsf',function(e,data){
//this line below
$(this).delay(1000).fadeOut(500).text('Complete!');
$(this).fadeIn(500,function(){
$(this).delay(500).fadeOut(500);
});
});
http://jsfiddle.net/v4nwQ/
Why is that so, and how do i Fix it?
Because fadeOut() returns immediately before the animation has complete; text() then gets processed straight away. You should instead change the text in the fadeOut() callback;
$(this).delay(1000).fadeOut(500, function () {
$(this).text('Complete!');
});
Unrelated, but something to note; you should look at caching the result of $(this); you're calling it a lot.
$('p').on('sfsfsf',function(e,data){
var self = $(this);
self.delay(1000).fadeOut(500, function () {
self.text('Complete!');
});
self.fadeIn(500,function(){
self.delay(500).fadeOut(500);
});
});
Yes, that is correct. All functions in a chain execute immediately. If you want something to execute after an animation, you use the callback parameter that all animations include.
And delay only delays animations! It has no effect on things that are not animations. So:
$(this).fadeOut(500, function() { $(this).text('Complete!'); });
Try:
$(this).parent().find("button:not('.busy')").fadeOut(500, function() {
$('p').text('Processing..').fadeIn(500).trigger('sfsfsf','wala');
});
you need to change the text in the call back funciton of the fade like you're doing it in the last few lines:
$(this).fadeIn(500,function(){
$(this).delay(500).fadeOut(500);
});
otherwise the text change is executed immediately
Related
Here is extremely basic code:
$('.myDiv').click(function() {
$('.anotherDiv').hide();
alert('pause the ui');
$('.anotherDiv').show();
});
When I do the above, and the alert shows, the .anotherDiv still shows. I am expecting it to be hidden.
If I remove the line: $('.anotherDiv').show(); then that div does hide. So I know that jQuery knows his div exists.
I am expecting an alert to pause the UI before it re-shows the div. Is this not how JavaScript/jQuery works?
.hide can take a callback to be run after the element has been hidden:
$('.myDiv').click(function() {
$('.anotherDiv').hide(function() {
alert('pause the ui');
$('.anotherDiv').show();
});
});
The issue is basically that, although the element has been told to hide itself, the browser hasn't repainted, and the alert halts all other execution.
As Barmar says, you can force repainting by returning from the function. You are able to do so using setTimeout, like this:
$('.myDiv').click(function() {
$('.anotherDiv').hide();
setTimeout(
function(){
alert('pause the ui');
$('.anotherDiv').show();
},
0
);
});
How can I make jQuery run when my webpage has finished loading?
This is not what I want. All that this does is wait for the page to finish loading before any Javascript CAN be run.
$(document).ready(function(){
//Code here
});
What I want is for this to run when the page loads. I don't want it to wait for 'click' or 'change'. Can I add a 'load' or something to this?
$(document).on("change", "#input", function(e) {
$("#output").val($(this).val());
});
A workaround I have been using is to use jQuery to "change" the selected option on a select box, thereby triggering the code I actually want to run.
I have seen a bunch of questions like this, but every time the answer just says to use $(document).ready(function(){//Code}); which is not what I'm looking for.
Any ideas?
EDIT: Here is a better example of what I'm looking for.
This code below will run when the element with the id of 'input' is clicked. That is the only time it will run. I would like for it to run as soon as it is ready - as soon as $(document).ready(function(){}); can run it.
$(document).ready(function(){
$(document).on("change", "#input", function(e) {
$("#output").val($(this).val());
});
});
I think that this would work, but I was hoping for a nicer solution and one that doesn't require me to rewrite everything as functions.
$(document).ready(function(){
function runWhenReady(){
$("#output").val($(#input).val());
}
$(document).on("change", "#input", function(e) {
runWhenReady();
});
runWhenReady();
});
I think that this will run runWhenReady() when #input is clicked, and when the page finishes loading. My question is, is there a simpler way to do this?
I think the only way to do what I want is to name the function and call it two different ways.
$(document).ready(function(){
function xyzzy(){
$("#output").val($(#input).val());
}
//Call the function when #input is clicked
$(document).on("change", "#input", function(e) {
xyzzy();
});
//Call the function when the page loads
xyzzy();
});
This will call the function when the page has finished loading, as well whenever #input is clicked.
I think you're looking for $(window).load()
$(window).load(function(e){
// code here
});
Answer to your question in the comments:
$(document).on('click', '#input', function(e){
$('#output').val($(this).val());
});
Can I add a 'load' or something to this?
yes you can which will like $(window).on( "load", handler )
Also there is not much difference between the above code and
$( window).load(function() {
// Handler for .load() called.
});
The first method is just short cut of the second one
$(document).ready happens when all the elements are present in the DOM, but not necessarily all content.
$(document).ready(function() {
alert("document is ready");
});
window.onload vs document.onload
window.onload or $(window).load()
happens after all the content resources (images, etc) have been loaded.
$(window).load(function() {
alert("window is loaded");
});
From your Example:
$(document).ready(function(){
function runWhenReady(){
$("#output").val($(#input).val());
}
$(document).on("change", "#input", function(e) {
runWhenReady();
});
runWhenReady();
});
You could write:
$("#input").on("change", function() {...});
which defines a handler for your input. Everytime you change the value in the input it will call the function passed as argument. That make the whole $(document)... unneccessary.
If you want to run the function just once, as soon as possible wrap it in a IIFE like:
(function(){...});
Here is a pretty good blog post about IIFE:
http://benalman.com/news/2010/11/immediately-invoked-function-expression/
http://jsfiddle.net/639RF/
$("button").click(function () {
//#t holds 'X'
$('#t').fadeOut(1000).text('ZZ').fadeIn(1000);
$('#t').delay(1000);
$('#t').fadeOut(1000).text('YY').fadeIn(1000);
});
I'm trying to show some text for a while, then replacing it with some other text.
The way I was trying to do it ignores the first text I am trying to show, and replacing it with the last one from the beginning.
It should:
Fade 'X' out,
Fade 'ZZ' in,
hold for a second
Fade 'ZZ' out,
Fade 'YY' in.
Every time you call $("#t"), you are creating a new jQuery object. That object may have the same element, but it is still a different object with different properties.
Try this:
var t = $("#t");
t.fadeOut(1000,function() {t.text("ZZ")}).fadeIn(1000);
t.delay(1000);
t.fadeOut(1000,function() {t.text("YY")}).fadeIn(1000);
Edit again: Figured it out! You need to use the animation callback to handle things that aren't normally part of the animation queue.
You can use callbacks as a second parameter to fadeOut and FadeIn, also to wait for a second, you can also use the raw setInterval method.
$(document).ready(function () {
$("button").click(function () {
var $dom = $('#t');
$dom.fadeOut(1000, function(){ //first, fades out.
$dom.text('ZZ').fadeIn(1000,function(){ //changes the text to ZZ,
var $wait = setInterval(function(){ //wait for a second
clearInterval($wait); //prevent the loop of waiting
$dom.fadeOut(1000,function(){ //fadeout for a second
$dom.text('YY').fadeIn(1000); //change the text into YY, and fade in
});
},1000);
});
});
});
});
JSFiddle: http://jsfiddle.net/639RF/3/
How about this?
Note: feel free change the duration as you like.
Demo: JSFiddle
$(document).ready(function () {
$("button").click(function () {
$('#t').fadeOut(500, function(){ //fadeout in half a second and when complete
//fadein in half a second, wait for 2 seconds, when complete
$(this).text('ZZ').fadeIn(500).delay(2000).fadeOut(500, function(){
//fadein in half a second
$(this).text('YY').fadeIn(500)
});
});
});
});
I am trying to call a user defined function within a jquery function to no avail I have tried this:
function close_quote_bar() {
alert('oh hai');
}
if($('#sliding_quote:visible')) {
$('#sliding_quote').slideUp();
$('#trans_div').animate({opacity: 0.0}).css('display','none').close_quote_bar;
}
and this
//Function to close quote bar
function close_quote_bar() {
alert('oh hai');
}
$('#get_quote_bar img').click(function() {
if($('#sliding_quote:visible')) {
$('#sliding_quote').slideUp();
$('#trans_div').animate({opacity: 0.0}).css('display','none').close_quote_bar;
}
});
With not much luck! Nothing happens when I cal close_quote_bar, or I get an Object is missing method error!
hope you guys can point me in the right direction I am really struggling with this one
I assume you want something like this:
$('#sliding_quote:visible').slideUp( function(){
$('#trans_div').css('display','none');
close_quote_bar();
} );
It uses the slide up callback to then set the object to display none and run your function. This code also does away with the if statement by instead using the selector to only affect the visible element.
you should try this:
$('#trans_div').animate({opacity: 0.0}, 400, function(){
$(this).css('display','none');
close_quote_bar();
});
Building on #laurencek's answer.
$('#sliding_quote:visible').slideUp( function(){
$('#trans_div').fadeOut( function(){
close_quote_bar();
});
});
this executes close_quote_bar() as a callback of fadeOut.
This line of your code needs to be changed
$('#trans_div').animate({opacity: 0.0}).css('display','none').close_quote_bar;
You have to call it like this
$('#trans_div').animate({opacity: 0.0}).css('display','none');
close_quote_bar();
And finally to trigger your closequotebar AFTER your animation have finished to animate, use this code, notice that a function() is in the 3rd parameter.
$('#trans_div').animate({opacity: 0.0}, 400, function(){
$(this).css('display','none');
close_quote_bar();
});
both animate and slideUp supports adding function() block as their parameters, so you could call a function after the animating has finished
http://api.jquery.com/animate/
see the "complete" part
It turns out the function was being called and it was not an issue with the scope or anything like that.
I had another function that was executing on scroll (.scroll) that was conflicting with the function hence why it was behaving unexpectedly and appeared not to be executing.
I have this line of JavaScript and the behavior I am seeing is that the selectedLi instantly disappears without "sliding up". This is not the behavior that I expected.
What should I be doing so that the selectedLi slides up before it is removed?
selectedLi.slideUp("normal").remove();
Might be able to fix it by putting the call to remove in a callback arg to slideUp?
e.g
selectedLi.slideUp("normal", function() { $(this).remove(); } );
You need to be more explicit: rather than saying "this" (which I agree should work), you should do this:
$("#yourdiv").slideUp(1000, function() {
$(this).remove();
});
The simplest way is calling the "remove()" function inside slideUp as a parameter like others have said, as this example:
$("#yourdiv").slideUp("normal", function() {
$(this).remove();
});
It is a must to call it inside the anonymous function() to prevent remove() to be executed before the slideUp has ended. Another equal way is to use the jQuery function "promise()". Better for those who like self-explanatory code, like me ;)
$("#yourdiv").slideUp("normal").promise().done(function() {
$(this).remove();
});
Using promises you can also wait for multiple animations to get finished, e.g.:
selectedLi.slideUp({duration: 5000, queue: false})
.fadeOut({duration: 3000, queue: false})
.promise().done(function() {
selectedLi.remove()
})
selectedLi.slideUp(200, this.remove);