jQuery toggle class with delay works only once - javascript

I am clearly missing something fundamental when it comes to jQuery, anonymous functions, and delays.
The following code works only ONCE per page load (it will add the class, then remove it after 1 second, and if i click again, it will add the class, but will NEVER remove the class for the duration of the page, unless I reload the page):
var jElement = $(currElem);
jElement.addClass("highlight")
.delay(1000)
.queue(function(){
$(this).removeClass("highlight");
});
HOWEVER,
if I add the (non-existant) function call as a parameter, AND I call it in my anonymous function, then the add/remove class combination will work indefinitely.
var jElement = $(currElem);
jElement.addClass("highlight")
.delay(1000)
.queue(function(randomFunction){
$(this).removeClass("highlight");
randomFunction(); //this makes it seemingly 'miraculously' work??
});
Side Note:
var jElement = $(currElem);
jElement.addClass("highlight")
.delay(1000)
.queue(function(randomFunction){
$(this).removeClass("highlight");
// this does NOT work; if I dont actually call the 'randomFunction'
// so that function, even though it does nothing; must somehow cause
// the implicit call of 'dequeue()' ??
});

There is no miracle there. This behavior it's written in the documentation of .queue().
Note that when adding a function with .queue(), we should ensure that .dequeue() is eventually called so that the next function in line executes.
$('#foo').slideUp().queue(function() {
alert('Animation complete.');
$(this).dequeue();
});
As of jQuery 1.4, the function that's called is passed another function as the first argument. When called, this automatically dequeues the next item and keeps the queue moving. We use it as follows:
$("#test").queue(function(next) {
// Do some stuff...
next();
});

the randomFunction is actually referred to as next and references the .dequeue method. Calling it causes the queue to continue on to the next item in the queue.
http://api.jquery.com/queue/

Related

Why does function only run once?Trying to run function multiple times,after previous invokation complete, using an counter function

I am currently working on a book with page turn effect in jQuery (no plugin). The page turn effect works fine so far, as long as you click through the pages one by one. But now I want to include a dropdown selection (i.e. a select element) so the user can directly jump to the selected content. I tried to make this work with loops and with the .each() method, so that the turnRightPage/ turnLeftPage function is called repeatedly, until the page with the selected content is shown. But after quite a bit of trial and error and a lot of research, I think loops iterate too fast for my turnRightPage /turnLeftPage()-function (which are the transform functions that turn the respective page), in that the loop is done, before the function has completed. I think, what I need to do, is find a way to pause the loop until the function has finished executing and then resume with the next iteration. I think the most promising approach would be using a function with an iteration counter, like it was suggested here:
Javascript: wait for function in loop to finish executing before next iteration (Thanks to jfriend00 at this point) I have also read
Invoking a jQuery function after .each() has completed and
wait for each jQuery
among others, where similar solutions were suggested.
Below is how I tried to implement jfriend00's callback. I added a return statement to break out of that "callback loop", once the number of page turns is completed.
//determine whether to flip pages forward or back - first forward
if(currentPagePos < foundPagePos){ // => turn right page
//determine how many times need to turn page
if (pageDifference > 1 && pageDifference % 2 !=0) {
var numPageTurns = (pageDifference-1)/2;
pageForward (numPageTurns);
} //else if ... rest omitted for brevity
}
function pageForward (numPageTurns){
var i = 0;
function next(){
i++;
if (i <= numPageTurns){
turnRightPage ();
} else {
return;
}
}
next();
};
The full code can be seen here: http://jsfiddle.net/snshjyxr/1/
It DOES turn the page, but only once! What am I missing?
I am still very new to javascript / jQuery so my apologies, if the problem seems all too obvious. Any pointers appreciated. Thx!
The thing is all the page turns are fired, but all at once. You have to wait until each transition is finished to start the next one.
Use a callback function in your turnRightPage and turnLeftPage functions. Example for turnRightPage :
function turnRightPage(callback) {
[...]
//change class AFTER transition (frm. treehouse-site)
$page.on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function () {
//need to double-set z-index or else secondtime turning page open setting z-index does not work (tried in Chrome 38.0.2125.111 m)
$page.css("z-index", turnedZindex + 1);
$(".turned").removeClass("turned");
$page.addClass("turned");
if(typeof callback == "function") {
callback();
}
});
};
And in your pageForward function, use turnRightPage recursively:
function pageForward(numPageTurns) {
console.log("number of FORWARD page turns: " + numPageTurns);
if(numPageTurns > 0) {
turnRightPage(function(){
pageForward(numPageTurns - 1);
});
}
};
Here is your updated jsfiddle. As you can see, there's a remaining bug when you make several page changes which is caused by the fact that you're adding listeners on the transition end every time a page is turned, and never removing them. So they're all executing every time.
EDIT: jsfiddle updated again without the annoying last bug. As you can see, all it took was to unbind the event listener as soon as it's fired.

Why use next() to add and remove a class multiple times?

I really want to know why it's important to use function(next) and next() in the following code. Without next() you can only remove the class .open-sidebar one time after you added it by clicking the .header__menu__button--profile.
I thought next() is used to select the following sibling of an element!
Why do I need it to remove the class .open-sidebarevery time I click on .sidebar__top__button--close?
$('.header').on('click','.header__menu__button--profile',function(){
$('.sidebar').addClass('open-sidebar');
});
$('.sidebar').on('click','.sidebar__top__button--close',function() {
if($('.sidebar').hasClass('open-sidebar'))
{
$('.sidebar').delay(300).queue(function(next){
$('.sidebar').removeClass('open-sidebar');
next();
});
}
});
In this case, next is the parameter that was passed by jQuery to the .queue callback, which is a reference to the next function in the animation queue.
It's nothing whatsoever to do with .next(), the function that selects the next sibling elements from a jQuery collection.
It's used within .queue because you have to tell jQuery to process the remaining animation queue once you've done whatever it is you need to do, i.e.:
.queue(function(next) {
// do stuff
...
next();
})
or you can use .dequeue instead:
.queue(function() { // NB: no parameter
// do stuff
...
$(this).dequeue();
})
The latter is actually the older way of doing this - the next parameter was introduced in jQuery 1.4 and if using multiple queues avoids the need to repeat the queue name in both the .queue and .dequeue calls.

myWait(ms) in jQuery?

I want to extend the $.fn object in order to have a delay between my jquery commands :
like this working (and quite long) code :
$('.d').delay(1000).queue(
function ()
{
$(this).css('background-color', 'green');
$(this).dequeue();
}).delay(1000).queue(function ()
{
$(this).css('background-color', 'red');
$(this).dequeue();
});
a working sample is here : JSBIN
So I tried this :
My code at jsbin
$.fn.myWait = function (ms)
{
return this.queue(
function ()
{
var _self = this;
setTimeout(function ()
{
$(_self).dequeue();
}, ms);
})
};
invoking :
$('.d').myWait(1000).css('background-color', 'red').myWait(1000).css('background-color', 'green');
But it doesnt work.
What am I doing wrong ?
p.s.
I did read this similar solution, but if I remove the animation part and use only css , it also doesnt work.
The .css() does not get queued on the animation queue by itself, that's why you needed to put it in a callback in your first snippet. In the second snippet, it is called immediately (even though there's timeout waiting in the queue - just as like you called .delay()). Instead, you would need to use an .animate() call with a zero-duration.
For allowing the syntax which you wanted, you will need to take a step further. Have a look at the jQuery timing plugin and how their magic works.
I doubt you can do it in this way. You need to defer execution of those attribute changes, which means you shall store said code in individual functions.

Code not running when using ".remove()" function

I'm writing this jquery code :
$('form').after('<p id="suc"></p>');
$('#suc').html('success !');
$('#suc').show(700);
setTimeout(function(){$('#suc').hide('slow')},2500);
$('#suc').remove();
When i remove $('#suc').remove(); like this :
$('form').after('<p id="suc"></p>');
$('#suc').html('success !');
$('#suc').show(700);
setTimeout(function(){$('#suc').hide('slow')},2500);
The code run succefuly, but when i put it, it dosen't run !!
What the problem with that ?
it's illegal to but $('#suc').remove(); here ?
The setTimeout call doesn't wait for the callback to run before the code continues, so you will be removing the element immediately. When the code in the callback tries to hide the element, it's not there.
Remove the element in the complete callback of the hide method:
setTimeout(function(){
$('#suc').hide('slow', function(){
$('#suc').remove();
});
},2500);
As you're using hide you're also safe to use delay, so:
$('#suc').show(700).delay(2500).hide('slow', function () {
$(this).remove();
});
will suffice.
demo: http://jsbin.com/isediz/2/
Also, as a bit of clarification, regarding:
The code run succefuly, but when i put it, it dosen't run !!
Actually the code runs (in a sense), the problem is that your remove will not wait for the two asynchrones events (setTimeout and .hide('slow')). So it will get executed way before those two are done doing what they should do.
You need to put the remove() inside of the setTimeout and in the callback for the hide() function:
$('form').after('<p id="suc"></p>');
$('#suc').html('success !');
$('#suc').show(700);
setTimeout(function() {
$('#suc').hide('slow', function() { $(this).remove(); })
}, 2500);
You are using the element setTimout callback which you have already removed with the statement just after setTimout. The call back of setTimeout will execute after the statement removing element with id #suc by the next statement of setTimeout. Remove #suc in hide callback so that it is not accessed by script after removal.
$('form').after('<p id="suc"></p>');
$('#suc').html('success !');
$('#suc').show(700);
setTimeout(function(){
$('#suc').hide('slow',
function(){$(this).remove();
});
},2500);

jQuery queue messages

I've got a short function that should show messages on a website.
function showHint() {
$('#notify').html('message text').show('slide', {direction: 'right'}, 500);
}
And there is another function that hides the messages.
function hideHint() {
$('#notify').hide('slide', {direction: 'right'}, 500);
}
The Problem is that if I call this function more than one times it tries to show all messages at the same time and everything breaks. I want to call the function twice and then it should queue the animations and show one message after another. The function should be called more than one times at the same time but shown one after another. The next message should be shown when the firs hides.
How could I solve the Problem? Would be nice!
Here's a mini custom plugin that I've used in the past that chains a bunch of animations one after another.
// Good for serializing animations
$.fn.chain = function(fn) {
var elements = this;
var i = 0;
function nextAction() {
if (elements.eq(i)) fn.apply(elements.eq(i), [nextAction]);
i++;
}
nextAction();
};
You might call it like so (Here's an example of it in use):
$(document).ready(function() {
$('li').chain(function(nextChain) { this.slideToggle("fast", nextChain); });
});
The function you pass to chain passes another function that you must call when you're down with one cycle. In the example above, we just pass the nextChain function as the callback to the slideToggle.
Your showhint function could just start by hiding the notification and when that is complete the callback would be what is the existing showhint function, that would change the text and show it. Code shouldn't be difficult given what you've already done.
can you not just use a notification plugin? here are two (one, two) that are pretty spiffy.

Categories

Resources