So I have this sample code:
<ul>
<li class="class1">row1</li>
<li class="removeme">row2</li>
<li class="removeme">row3</li>
<li class="removeme">row4</li>
<li class="class1">row5</li>
</ul>
//Javascript
$('.removeme').remove();
How do I make the row5 element animate its movement up once all the removeme elements are removed? My css3 transitions are also set.
You could put the "remove me" li's in a container (like a span) and collapse that container.
$(container).fadeTo(200,0).animate({height: 0});
Something like that.
I am not sure about what you have set in css3, but below is what you can do with jQuery.
$('.removeme').animate({height: 0}, 2000, function () {
$(this).remove();
});
DEMO: http://jsfiddle.net/MwYH5/
If you want it removed one by one, then you can chain like below.
DEMO: http://jsfiddle.net/MwYH5/1/
(function removeNext(jq) {
jq.eq(0).animate({height: 0}, 1000, function () {
$(this).remove();
(jq = jq.slice(1)).length && removeNext(jq);
});
})($('.removeme'))
Ref: http://paulirish.com/2008/sequentially-chain-your-callbacks-in-jquery-two-ways/#comment-24910
Related
Having some problems with jQuery methods - perhaps overcomplicating things...
What I need to find is if any of the li elements classes contain the word 'current', then if they do, append the word active to them.
I'm struggling to add the word to the end of the current class. For example:
Markup:
<div class="menu-navigation-container">
<ul>
<li class="current_page_item menu-item-8787"><span>The Magazine</span>
</li>
<li class="menu-item menu-item-type-post_type"><span>Snapped</span>
</li>
</ul>
</div>
jQuery:
$(document).ready(function () {
var classNames = $('.menu-navigation-container ul li').attr("class").match(/[\w-]*current[\w-]*/g);
$(classNames).each(function () {
$(this).addClass("active");
});
});
Running classnames; up in the console produces just the string - I want it to reference the li elemens that have the word 'current' in their class names, then append the word 'active' at the end.
Can I do this with jQuery's attribute contains selector?
Simply like this :
$(document).ready(function () {
$('.menu-navigation-container ul li[class*=current]').addClass('active');
});
Try this
$(document).ready(function () {
$('.menu-navigation-container ul li').each(function(){
if ( $(this).is(".current") )
{
$(this).addClass("active");
}
})
});
I'm trying to perform some style changes to list elements. This is what i'm trying to do... I have two lists, one is shopping items, the other is a list that helps manage the shopping items (set priority by changing background color of shopping list item). What i want to do is first click on a shopping item then click on one of the manage items to set some styling. I have something up and running, but it needs some work. One issue is if i go to manage (style) a second item on the list with a different priority, it applies the styling that all items the have been previously styled.
Do the following to see what i mean. Click on Bread, then click on high priority to change the background color of bread to read. Now click on Chips and then click on medium priority to change the background color to black. You'll now see that bread has now changed to black. Not good.
I'm sure the code is bloated, and could probably use some if/else logic instead of using nesting and completely separate function for each styling event. Sorry, posted by another newbie.
here is a fiddle
<div class="the-lst">
<h4>YOUR LIST - Click one of these items first</h4>
<ul id="sortable2" class="connectedSortable">
<li>Bread</li>
<li>Chips</li>
<li>Cookies</li>
</ul>
</div>
<div class="lst-manage">
<h4>MANAGE LIST - Then click one of these items to set priority</h4>
<ul>
<li id="hp">High Priority</li>
<li id="mp">Medium Priority</li>
<li id="lp">Low Priority</li>
<li id="done">Done</li>
<li id="remove">Remove</li>
</ul>
</div>
$(document).ready(function() {
$(".the-lst").on("click", "li", function(event) {
var lst = $(this).closest('li');
$('.lst-manage').on("click", "#hp",function(event) {
lst.css({'background-color': 'red'});
});
});
$(".the-lst").on("click", "li", function(event) {
var lst = $(this).closest('li');
$('.lst-manage').on("click", "#mp",function(event) {
lst.css({'background-color': 'black'});
});
});
$(".the-lst").on("click", "li", function(event) {
var lst = $(this).closest('li');
$('.lst-manage').on("click", "#lp",function(event) {
lst.css({'background-color': 'green'});
});
});
});
I'd reduce it to:
$('#sortable2 li').click(function () {
$('#sortable2 li').removeClass('selected');
$(this).addClass('selected');
})
$('.lst-manage li').click(function () {
if (this.id == "hp") $("#sortable2 li.selected").css('background', 'red')
if (this.id == "mp") $("#sortable2 li.selected").css('background', 'black')
if (this.id == "lp") $("#sortable2 li.selected").css('background', 'green')
})
jsFiddle example
I have a basic menu like this:
<ul>
<li>item 1</li>
<li>item2</li>
</ul>
How can I add the class "current" for each one of my <li> elements every 800 ms, and of course delete the old current element?
This'll loop forever through any number of list items:
$(document).ready(function() {
var $lis = $("li"), i = -1;
function nextCurrent() {
$lis.eq(i).removeClass("current");
$lis.eq(i=(i+1)%$lis.length).addClass("current");
setTimeout(nextCurrent, 800);
}
nextCurrent();
});
Demo: http://jsfiddle.net/nnnnnn/4skLV/
And may I suggest that before you next post a question you read this article: What have you tried?
$('li').each(function(i){
var $that = $(this);
setTimeout(function(){
$that.addClass('current').siblings().removeClass('current');
}, i *800);
});
Live DEMO
All,
I previously posted a question but didnt get an answer (admittedly due to poor wording). Am re-posting after updating/ testing the code a bit more.
I want to build a simple drop down menu. Jsfiddle.
PROBLEM:
The menu drops down & upon reclicking the tab, folds away nicely. However, when the menu is down & another tab is clicks, things go pear shaped, i.e. the other menu does not drop down.
Ive tested the jquery code extensively using firebug & have noticed a lot of abnormalities. E.g. I thought for my purpose, the jquery code:
$('ul', curTab).*** would be the same as $(curTab).children(0).***, sometimes this code runs fine, other times it doesn't.
Consistently Ive noticed the 'addClass' & 'removeClass' method not adding & removing the class as intended.
The if ($('.cTabActive')){...} doesn't work, syntax error?
If I do if ($('.cTabActive', aFileTabs)){...}, this doesn't work either...
Im totally at my wit's end with this supposedly simple code. Help would be greatly appreciated.
Code:
(Please review the jsfiddle.net code above)
HTML:
<div id="filemenu"> <!-- right tabs menu -->
<ul id="fm_ul">
<li class="filetabs">File
<ul class='cDropDownItems'>
<li class="m_items"><span class="aHeading">New</span><span class="shortcutK">Ctrl-U</span></li>
<li class="m_items"><span class="aHeading">Open</span><span class="shortcutK">Ctrl-Z</span></li>
</ul></li><li class="filetabs">Edit
<ul class='cDropDownItems'>
<li class="m_items"><span class="aHeading">Undo</span><span class="shortcutK">Ctrl-M</span></li>
</ul></li><li class="filetabs cLastFileTabs">Settings
<ul class='cDropDownItems'>
<li class="m_items m_itemsCK" id="frontView"><img src="Img/tickB&W1.png" alt="tick" /><div class="filler"></div><span class="aHeading">Front View</span><span class="shortcutK">Ctrl-A</span></li>
</ul></li>
</ul>
</div> <!-- close -> 'filemenu' div -->
</div> <!-- close -> 'menu_bars' div -->
JAVASCRIPT:
$('.filetabs').on('click', function (e) {
function abc() {
if ($(curTab).hasClass ('cLastFileTabs')) {
$('ul', curTab).css ({left: '-66.6%'});
$('ul',curTab).animate ({opacity: 1}, 125, 'linear');
} else {
$('ul', curTab).css ({left: 0});
$('ul', curTab).animate ({opacity: 1}, 125, 'linear');
} }
var aFileTabs = $('.filetabs');
var curTab = $(this);
if ($('.cTabActive')) {
var prevDropDown = $('.cTabActive').parent();
var prevDDChild = $(prevDropDown).children(0);
$(prevDDChild).removeClass('cTabActive').addClass('cPrevTabActive'); }
if ($('ul',aFileTabs).hasClass('cPrevTabActive')) {
$('.cPrevTabActive',aFileTabs).animate ({opacity: 0}, 500, 'linear', function () {
$('ul', aFileTabs).css ({left: '9999px'});
$('ul', aFileTabs).removeClass ('cPrevTabActive'); }); }
if ($(prevDropDown).get(0) !== $(curTab).get(0)) {
$(curTab).children(0).addClass ('cTabActive');
abc();
} else {
return;
} });
Kayote,
Here is a working sample. I added .length(), redid the If logic, and use the setTimeout function so fade-in and fade-out does not conflict.
DemoGood Luck!
How can I delete list element if it has a child link of some defined id ? So looking at the code below I'd like to find a <li> with <a> of id=link1 and delete this li.
<li class="nav-tab">
Component
</li>
I've tried the code below but it doesn't work :
$(function() {
$('.nav-tab:has(#link1)').css('display', 'none');
});
Your question and your code contradict each other, so I'll provide answers for both cases.
If you want to remove a <li class="nav-tab"> that contains a child <a href="#link1">:
$(function() {
$('a[href="#link1"]').parent('li.nav-tab').remove();
});
If you want to remove a <li class="nav-tab"> that contains a child <a id="link1">:
$(function() {
$('a#link1').parent('li.nav-tab').remove();
});
You can use an attribute-equals selector and :has() to see if it contains an element matching that...then just call .remove() on that.
$("li:has(a[href='#link1'])").remove()
$(function() {
$(".nav-tab > a[id='yourID']").css('display', 'none');
});
If by anchor :
$(function() {
$(".nav-tab > a[href='yourLink']").css('display', 'none');
});