Im working on building out a full page transition using aJax calls. I want to remove content from the DOM when I load in a new page. Some reason .remove() is removing all the children from the parent container even though Im adding a unique class or ID on it. I've tried several ways of targeting the element I want to remove but it keeps doing the same thing. remove() should only be removing one element, that is the element with the class name 'remove-from-dom' When I use addClass it targets the element correctly.
$(response).prependTo('.swap-content');
var slideWidth = $('.swap-content').width();
$('.ajax-load-in-remove').animate({
left: + slideWidth
}, 1000, function () {
$('.ajax-load-in-remove').css('left', '').removeClass('hide-me');
$('.ajax-load-in-remove').last().addClass('remove-from-dom');
$('.remove-from-dom').remove();
});
my container looks like this
<div class="parent">
<div class="child">
<div>
<div class="child remove-from-dom">
<div>
</div>
.remove() should only be removing the last child in the container but its removing both children. I only have 2 children. I have tried using IDs and have used .last-child and .last()
The problem is that you are doing the removing inside the callback when the animation ends.
But you are running the animation on many elements $('.ajax-load-in-remove').animate, so the callback is fired for each animation ending. And each callback is removing the currently last element.
You can use the .promise which resolves when all animations have completed.
$('.ajax-load-in-remove')
.animate({
left: +slideWidth
}, 1000)
.promise()
.then(function() {
$('.ajax-load-in-remove').css('left', '').removeClass('hide-me');
$('.ajax-load-in-remove').last().remove();
});
If you want to remove the last one .ajax-load-in-remove, use
$('.ajax-load-in-remove').last().remove();
You don't need to add remove-from-dom class to this element, it was just a step more to make an action.
Related
I am trying to build an animation with jQuery but I am missing one simple step.
This is my actual code:
$('.wrapper').show('fast',function(){
$(".bs-glyphicons-list-sub").append(appendable).fadeIn('slow').delay(500).removeClass('attivo');
});
appendable is a li element that is added to the .bs-glyphicons-list-sub. Appendable has the class attivo when it is created.
What I want to do make the li element to appear slowly with the class attivo and after half a second remove this class from the addded li only.
Actually it is trying to remove that class from the .bs-glyphicons-list-sub. How can I say: remove it from the added li element only?
The issue with this line
$(".bs-glyphicons-list-sub")
.append(appendable)
.fadeIn('slow')
.delay(500)
.removeClass('attivo');
is that it's $(".bs-glyphicons-list-sub") that's being chained through to the removeClass
The simplest solution would be access the item directly, eg:
$(".bs-glyphicons-list-sub")
.append(appendable)
.fadeIn('slow')
.delay(500);
$(appendable).removeClass('attivo');
if appendable is already a jquery object, it's ok to "double-wrap" it, but not ideal, so would be just appendable.removeClass("attivo")
An alternative would be to use .appendTo, but you'll still need an extra navigation in there, eg:
appendable
.appendTo(".bs-glyphicons-list-sub")
.removeClass('attivo')
.parent()
.fadeIn('slow')
.delay(500);
Note that .removeClass() is not affected by any animation and will occur immediately (so the .delay(500) in your original does nothing)
I've bene bursting my head for the last few hours. Here's the situation:
I have a website that has many divs, but many of them share classes (they are equal) but have some different texts. Example:
<div class="summary-title">
I Am That Girl</div>
<div class="summary-title">
I Am That Girl</div>
What I want to do is select each one of these divs and add a span whenever another div is hovered.
I mean, this is what I want to do: hover a div that's before the sumary-title div, a span with a class is appended inside the sumary-title div or out of it, whatever works.
That's what I got so far:
$('summary-title').each(function(index) {
var content = $(index).next().text();
$(index).append("<span class='hover-text'>"+content+"</span>");
});
But I get an error that $ is not defined, probably because it is a closure?
I have no idea what to do. The code seems horrible too — i need to do this quickly and I just can't do. Would anyone help me at least know what to do?
Thanks
append() is already an implicit iteration ( that loops through the set of elements in the jQuery collection.) and it's unnecessary to call .each() .
$('.summary-title').append(function() {
return "<span class='hover-text'>" + $('a', this).text() + "</span>";
});
Outside of making sure you have jQuery on your page and properly referring it, your code should go like:
$('.summary-title').each(function() {
var content = $(this).children('a:first').text();
$(this).append("<span class='hover-text'>"+content+"</span>");
});
Notice:
dot in class selector - $('.summary-title')
this instead of index - $(this)
children selector instead of next
Check demo - Fiddle.
To append this to a preceding element on hover use:
$(document).ready( function() {
$('.summary-title').hover( function() {
var content = $(this).children('a:first').text();
$(this).prev().append("<span class='hover-text'>"+content+"</span>");
});
});
I'm trying to fadeIn() the children elements of a parent element using jQuery. The children elements are all of different types.
For example one of my parent elements may look like this:
<div class="section-content-parent">`
<span class="section-content-header">SPAN CONTENT</span>
<img src="#">
<span class="section-content-subheader">SUBHEADER CONTENT</span>
</div>
I would like for the <span> and <img> elements to fadeIn().
If possible in a sequence of one after the other, or all at once.
The children elements are going to vary and not always be specifically <span> and <img> elements so targeting specific element types is out of question.
I've tried:
$(document).ready(function(){
$(".section-content-parent").children().fadeIn(slow);
});
Nothing happens. Could someone lead me in the right direction?
Callbacks and recursion? Bah humbug! :-)
You can also try this simpler, non-callback solution:
var elems = $('.section-content-parent').children();
$(elems).each(function(index) {
$(this).delay(1200*index).fadeIn(1000);
});
See it in action: https://jsfiddle.net/fppjkv0o/30/
Source: https://stackoverflow.com/a/4661858/1152633
Make it reusable for other parent elements:
function fadeInChildren(parent) {
var elems = $(parent).children();
$(elems).each(function(index) {
$(this).delay(1200*index).fadeIn(1000);
});
}
And use the function like this:
fadeInChildren('.section-content-parent');
To make them fade in after each other we can use the callback method on fade in.
First, add this function so we can call it recursively
function fadeChildrenIn(childNum){
var children = $("#section-content-parent").children();
var $child = $(children[childNum]);
$child.fadeIn(function(){
if(childNum < children.length)
fadeChildrenIn(++childNum);
});
}
And then when you want the event to happen you can use
fadeChildrenIn(0);
The argument is the index of the child we are fading, the function then checks if the index is less than the total children, if it is when the current child has faded it moves onto the next one, if there are no more children left is simply stops.
This will also fulfill your requirement of working with any type of child element, IE. span, img etc.
I am learning jQuery, and I wrote something like this:
$('#bt1').on('click',function() {
$('#area1').fadeToggle(1000);
});
and it works fine for one element. When I add one more element and place it next to the first element, the second element takes the place of the first when i click on bt1, because the first element disappears.
My question is: how to keep elements (div) in place, where they are at the beginning, when one element is hidden?
Use below solution instead of fadeToggle
$('#bt1').on('click',function() {
$("#area1").animate({opacity:($("#area1").css('opacity')==1)?0:1});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="area1">AREA 1
</div>
<div id="area2">AREA 2
</div>
<input type="button" value="submit" id="bt1">
Another solution would be to toggle visibility and keep the element in the DOM because fading out completely removes the element leaving a gap in the page
instead of .fadeIn() you can .animate({opacity:1})
and instead of .fadeOut() you can .animate({opacity:0})
and then, if you want to disable click events on hidden control, call this method
$('#YourElementId').css({visibility: "hidden"});
I am trying to find the next div using Jquery. Here is the code:
$('.menu-item').hover(function() {
$(this).stop(true, true).addClass("menu-item-hover", 300);
$(this).next('div').stop(true, true).fadeIn(300);
}, function() {
$(this).stop(true, true).removeClass("menu-item-hover", 300);
$(this).next('div').stop(true, true).fadeOut(300);
});
<div class="menu-item"><h1>Media</h1></div>
<div id="tooltip-media">Sights and sounds from Cambodia</div>
<div class="menu-item"><h1>About</h1></div>
<div id="tooltip-about">Who in the world is the Phillips Family?</div>
Simple. The toolip-* divs are hidden in css. I want the next one in the code to show on hover of the menu-item. I have checked other questions and none of them work for my case. I am using both Jquery and Jquery UI. Thanks for any help.
try this
$(this).parent().next('div').stop(true, true).fadeIn(300);
in your example , you are trying to find next div but it is not sibiling of menu item.
that only it did not work. traverse to parent and find next div it will work.
parent() , next()
First of all, .next() only grabs the immediate next sibling, it won't search through all sibilings. In order to do that, you would need to invoke .nextAll('div'). But even this function would not help you here, because that <div> nodes you are looking for are not contained by the same parent element.
You should go like
$( this ).parent().next( 'div[id^=tooltip]' ).stop( true, true ).fadeOut( 300 );
Reference: .next(), .nextAll()