We Keep Coding

Jquery .remove() does not update DOM

I am trying to remove an element form the DOM using the .remove() jQuery method
Basically i am parsing a list and removing certain elements. Then right after, i reparse the list for some treatment for the rest of the elements.
But a simple printout of the size of the list gives me the impression that the elements to be filtered out were not removed
$list = $(".elements_list");
alert( $list.size());
$list.each(function(){
if ( $(this).data("quantity") == 0)
{
$(this).slideUp(1000,function(){
$(this).remove();
});
}
});
change_background_colors();
Right after this treatment, i call another function that has the following code in the beginning:
function change_background_colors() {
$list = $(".elements_list");
alert($list.size());
...
}
I get the same size of the list before and after removing elements...
Is there something wrong in my approach ?
Thanks!

if you call the size alert in a setTimeOut function you will see
$list = $(".elements_list");
alert($list.size());
$list.each(function () {
if ($(this).data("quantity") == 0) {
$(this).slideUp(1000, function () {
$(this).remove();
});
}
});
setTimeout(function () {
$list = $(".elements_list");
alert($list.size());
}, 2000);
JSFiddle:
https://jsfiddle.net/upkkLq2m/2/

The element is not removed until after 1000 milliseconds pass and the animation completes. Wait until then to count the elements.
edit: here's the more complicated way to delay till all animates complete:
$list = $(".elements_list");
var n = 0;
$list.each(function(){
if ( $(this).data("quantity") == 0) {
n = n + 1; // one more callback to wait for
$(this).slideUp(1000,function(){
$(this).remove();
n = n-1;
checkIfAllDone();
});
}
});
function checkIfAllDone(){
if(n===0){ // be sure that n was declared in the same scope as this function
change_background_colors();
}
}

Jquery click firing on all elements

I am attempting to use Bootstrap's Collapse feature with custom icons from font-awesome. I am able to get the collapse to work but the problem I am having is that all of the icons are being triggered with Jquery's click, I want to scale this because at any given time the amount of "containers" can change. Any suggestions are appreciated.
$(document).ready(function () {
$faChevronDown = $('.fa-chevron-down');
var z = 0;
$faChevronDown.click(function () {
if (z == 0) {
turnUp();
z++;
} else {
turnDown();
z = 0;
}
});
});
function turnUp() {
$faChevronDown.removeClass('fa-chevron-down');
$faChevronDown.addClass('fa-chevron-up');
};
function turnDown() {
$faChevronDown.removeClass('fa-chevron-up');
$faChevronDown.addClass('fa-chevron-down');
};
JS Fiddle
Thank you
Edit : Thank you for the great answers!

You are clicking only one element, but your function is changing all icons, you have use $(this) instead in order to only change the icon you are clicking:
function toggleClass() {
$(this).toggleClass('fa-chevron-down fa-chevron-up');
};
and then use only one function:
$faChevronDown.click(toggleClass);
With this you avoid the use of Ifs and elses and the code is much simplier and small.

Set click handler on the parent element of a .fa-chevron-down element or if the parent element is not known on body element:
$(document).ready(function () {
var z = 0;
$("body").on("click", ".fa-chevron-down", function () {
if (z == 0) {
turnUp.call(this);
z++;
} else {
turnDown.call(this);
z = 0;
}
});
});
function turnUp() {
$(this).removeClass('fa-chevron-down');
$(this).addClass('fa-chevron-up');
};
function turnDown() {
$(this).removeClass('fa-chevron-up');
$(this).addClass('fa-chevron-down');
};
If you are using z variable only for switching classes fa-chevron-down and fa-chevron-up, the code could be simplified to:
$(document).ready(function () {
$("body").on("click", ".fa-chevron-down", function () {
$(this).toggleClass('fa-chevron-down fa-chevron-up');
});
});

You can pass in the element to perform granular toggling,
$(document).ready(function () {
$fa= $('.fa');
var z = 0;
$fa.click(function () {
if (z == 0) {
turnUp($(this));
z++;
} else {
turnDown($(this));
z = 0;
}
});
});
function turnUp(el) {
el.removeClass('fa-chevron-down');
el.addClass('fa-chevron-up');
};
function turnDown(el) {
el.removeClass('fa-chevron-up');
el.addClass('fa-chevron-down');
};

I'm not sure what the point of your z variable is, but you can reduce what you have, and fix the problem of not referencing the element by using this, by using just:
$(document).ready(function () {
$('.fa-chevron-down').click(function () {
$(this).toggleClass('fa-chevron-down fa-chevron-up')
});
});
jsFiddle example

Jquery functions Delay shortens with each Interval

I am not sure how to ask this question. I made a jQuery function for a banner.
$(document).ready(function() {
ionanim();
setInterval(ionanim, 12000);
function ionanim() {
$(function () {
$('.ion1anim').fadeIn(500, function () {
$(this).delay(5000).fadeOut(500);
});
});
$(function () {
$('.ion2anim').delay(6000).fadeIn(500, function () {
$(this).delay(5000).fadeOut(500);
});
});
};
});
Link for the full animation : http://jsfiddle.net/L8XHL/11/
But with each intervatl on the setInverval the animations go close to each other after some time they overlap each other.
Did i do anything wrong?

Intervals and animations aren't exact enough to handle the timing that you require. I'd suggest using a self-executing function instead so that it will never overlap.
Also, you are over-using the document ready handler. Please stop.
http://jsfiddle.net/L8XHL/13/
$(document).ready(function () {
ionanim();
function ionanim() {
$('.ion1anim').fadeIn(500, function () {
$(this).delay(5000).fadeOut(500, function () {
$('.ion2anim').fadeIn(500, function () {
$(this).delay(5000).fadeOut(500,ionanim);
});
});
});
}
});
I would further modify this to work more like a slider so that you can add an infinite number of items without having a huge pyramid of code.
http://jsfiddle.net/L8XHL/17/
$(document).ready(function () {
$(".ionbanner .bottom div").first().siblings().hide();
anim();
function anim() {
var curr = $(".ionbanner .bottom :visible");
var next = curr.next();
if (next.length == 0) {
next = curr.siblings().first();
}
curr.delay(5000).fadeOut(500,function(){
next.fadeIn(500,anim);
});
}
});

Or you could try something like this: http://jsfiddle.net/L8XHL/16/
$(document).ready(function() {
var anim1 = function() {
$('.ion1anim').fadeIn(1000, anim1Callback);
},
anim1Callback = function() {
$('.ion1anim').fadeOut(1000, anim2);
},
anim2 = function() {
$('.ion2anim').fadeIn(1000, anim2Callback);
},
anim2Callback = function() {
$('.ion2anim').fadeOut(1000, anim1);
};
anim1();
});

How to stop click events from queuing up on multiple click?

What I need to achieve is if we click on submit button, there is particular div should show up.
Here is my code:
http://jsfiddle.net/7tn5d/
But if I click on submit button multiple times, the function calls sort of queue up and run one after other.
Is there a way to invalidate other onclicks when current animation is running?
Code:
animating = 0;
doneanim = 0;
$(function () {
$("#submit_tab").click(function (e) {
if (animating == 1) return;
animating = 1;
$("#submit_cont").show("blind", {}, 1000);
animating = 0;
});
});

To prevent it from performing the action multiple times, simple cease the previous animation. So:
$('#submit_cont').stop().show("blind",{},1000);
However, I have noticed that you have attempted to prevent the animation from running, if an animation is already running. Although it takes 1 second or 1000 milliseconds to show the div, the execution of the condition does not pause until the animation is complete. You must define a function to run after the animation is complete, like so:
animating = 0;
doneanim = 0;
$(function () {
$("#submit_tab").click(function (e) {
if (animating == 1) return;
animating = 1;
$("#submit_cont").show("blind", 1000, function() { animation = 0; });
});
});
Hope that helped...

You almost got it right with the semaphore! It's just that, in jQuery's show(), you would have to put the semaphore reset as an argument. Here's the fixed version - http://jsfiddle.net/snikrs/xe5A3/
animating = 0;
doneanim = 0;
$(function () {
$("#submit_tab").click(function (e) {
if (animating == 1) return;
animating = 1;
$("#submit_cont").show("blind", 1000, function() {
animating = 0;
});
});
});

You can use the :animated selector to check:
$(function () {
$("#submit_tab").click(function (e) {
var $cont = $("#submit_cont");
if (!$cont.is(':animated')) {
$cont.show("blind", {}, 1000);
}
});
});
Now if you stick with the external semaphore idea then its better to stick that on the elemnt with .data() instead of using a global variable:
$(function () {
$("#submit_tab").click(function (e) {
var $cont = $('#submit_cont'),
animating = $cont.data('isAnimating');
if (animating) {
return;
} else {
$cont.data('isAnimating', 1);
$("#submit_cont").show("blind", 1000, function() { $cont.data('isAnimating', 0); });
}
});
});

Something like this (see documentation) :)
$("#submit_cont").show("blind", function(){
animating = 0;
});

You can add a $("#submit_cont").clearQueue(); after the animation finished :
$("#submit_tab").click(function (e) {
$("#submit_cont").show("blind", 1000, function() {
$("#submit_cont").clearQueue();
});
});
Updated JSFiddle

I found a different solution for this, which in my opinion looks cleaner:
var tab = $("submit_tag");
tab.on("click", function(){
var cont = $("submit_cont");
var animating = tab.queue("fx").length;
if(animating === 0){
cont.show("blind", {}, 1000);
}
});

Javascript "while hovered" loop

Can anybody help me on this one...I have a button which when is hovered, triggers an action. But I'd like it to repeat it for as long as the button is hovered.
I'd appreciate any solution, be it in jquery or pure javascript - here is how my code looks at this moment (in jquery):
var scrollingposition = 0;
$('#button').hover(function(){
++scrollingposition;
$('#object').css("right", scrollingposition);
});
Now how can i put this into some kind of while loop, so that #object is moving px by px for as #button is hovered, not just when the mouse enters it?

OK... another stab at the answer:
$('myselector').each(function () {
var hovered = false;
var loop = window.setInterval(function () {
if (hovered) {
// ...
}
}, 250);
$(this).hover(
function () {
hovered = true;
},
function () {
hovered = false;
}
);
});
The 250 means the task repeats every quarter of a second. You can decrease this number to make it faster or increase it to make it slower.

Nathan's answer is a good start, but you should also use window.clearInterval when the mouse leaves the element (mouseleave event) to cancel the repeated action which was set up using setInterval(), because this way the "loop" is running only when the mouse pointer enters the element (mouseover event).
Here is a sample code:
function doSomethingRepeatedly(){
// do this repeatedly when hovering the element
}
var intervalId;
$(document).ready(function () {
$('#myelement').hover(function () {
var intervalDelay = 10;
// call doSomethingRepeatedly() function repeatedly with 10ms delay between the function calls
intervalId = setInterval(doSomethingRepeatedly, intervalDelay);
}, function () {
// cancel calling doSomethingRepeatedly() function repeatedly
clearInterval(intervalId);
});
});
I created a sample code on jsFiddle which demonstrates how to scroll the background-image of an element left-to-right and then backwards on hover with the code shown above:
http://jsfiddle.net/Sk8erPeter/HLT3J/15/

If its an animation you can "stop" an animation half way through. So it looks like you're moving something to the left so you could do:
var maxScroll = 9999;
$('#button').hover(
function(){ $('#object').animate({ "right":maxScroll+"px" }, 10000); },
function(){ $('#object').stop(); } );

var buttonHovered = false;
$('#button').hover(function () {
buttonHovered = true;
while (buttonHovered) {
...
}
},
function () {
buttonHovered = false;
});
If you want to do this for multiple objects, it might be better to make it a bit more object oriented than a global variable though.
Edit:
Think the best way of dealing with multiple objects is to put it in an .each() block:
$('myselector').each(function () {
var hovered = false;
$(this).hover(function () {
hovered = true;
while (hovered) {
...
}
},
function () {
hovered = false;
});
});
Edit2:
Or you could do it by adding a class:
$('selector').hover(function () {
$(this).addClass('hovered');
while ($(this).hasClass('hovered')) {
...
}
}, function () {
$(this).removeClass('hovered');
});

var scrollingposition = 0;
$('#button').hover(function(){
var $this = $(this);
var $obj = $("#object");
while ( $this.is(":hover") ) {
scrollingposition += 1;
$obj.css("right", scrollingposition);
}
});