basically what I wanted to do is whenever an li is removed (via jquery .remove()) the set of li's slide to the space previously occupied the removed li. How can I accomplish this? Here is some code:
<li class="be-imagecontainer">
<span style="display:none">101</span>
<img src="http://localhost/thi/media/images/thumbnails/19_Koala.jpg" class="be-image" alt="19_Koala.jpg" />
<br/>
Delete
</li>
<li class="be-imagecontainer">
<span style="display:none">111</span>
<img src="http://localhost/thi/media/images/thumbnails/19_Penguins.jpg" class="be-image" alt="19_Penguins.jpg" />
<br/>
Delete
</li>
<li class="be-imagecontainer">
<span style="display:none">112</span>
<img src="http://localhost/thi/media/images/thumbnails/19_Hydrangeas.jpg" class="be-image" alt="19_Hydrangeas.jpg" />
<br/>
Delete
</li>
and here is some javascript code
$('a.be-delete').click(function(){
$(this).parent().remove();
// code to slide the rest of the divs the unoccupied space
})
the default behavior is that the rest of the list will snap to that space. How do I do that with a slide instead?
for other examples, check google wave's behavior when u close a panel. The other panel/s slide in to the previously occupied space
You can use the slideUp effect, and when it finishes, you can remove the DOM element:
$('a.be-delete').click(function(){
$(this).parent().slideUp('slow', function () {
$(this).remove(); // remove the li
});
return false;
})
You can use $(this).closest('li') instead of parent() if your anchor is nested in some other element.
Check an example with your markup here.
Related
I'm writing this short JavaScript script.
Requirement:
(A) Object $(".img-aspect a") should be clicked by clicking on a class '.zoom-overlay'.
NOTE: $(".img-aspect a") can't be clicked directly due to CSS styling. We should first click on '.zoom-overlay'.
(B) Object and class are a part of LIST item, and there's more than one LIST item. How to click on a particular object and class that are attached to the same LIST? This is a requirement for the slideshow to work properly.
(C) The following script I have written clicked through all the objects and classes in LIST items and opens the last image in a slideshow. For example, if I want to click on the first LIST item or any other items, then how can I modify the script? Any guidance will be of immense help.
<script type="text/javascript">
$(document).on('click', '.zoom-overlay', function (event) {
//event.preventDefault();
$(".img-aspect a").click();
});
</script>
<ul>
<li class="gallery-item" >
<div class="center-crop">
<div class="img-aspect">
<a href="https://image.net">
<img class="thumbnail-image"
title="..."
alt="..."
src="https://image.net">
<div class="active-indicator"></div>
</a>
</div>
<div class="zoom-overlay">
<div class="zoom-icon"></div>
</div>
</div>
</li>
</ul>
maybe it helps you try this
$(document).on('click', '.zoom-overlay', function (event) {
//event.preventDefault();
$(this).siblings(".img-aspect").child("a").click();
});
I have this sortable item list using jQuery UI Sortable, which is also able to nest items.
Each of these items contains toggable content, it will slide down when clicking on an item.
However, when clicking on the parent item when nested, instead of only toggling the parent content it's also toggling the child's content.
I've been trying to figure it out in my Jquery script but haven't been able to figure it out. I reproduced my issue in this fiddle:
https://jsfiddle.net/es3hbdnm/33/
Also HTML:
<ol class="sortable panel-group">
<li class="panel-default">
<div class="toggle">Home</div>
<div class="panel-content">Hidden content</div>
</li>
<li class="panel-default">
<div class="toggle">About us</div>
<div class="panel-content">Hidden content</div>
</li>
<li class="panel-default">
<div class="toggle">Contact</div>
<div class="panel-content">Hidden content</div>
</li>
</ol>
My JS:
$(document).ready(function () {
$('.sortable').nestedSortable({
handle: 'div',
items: 'li',
toleranceElement: '> div'
});
$(".panel-default").click(function ( event ) {
event.stopImmediatePropagation();
$(".panel-content").not($(this)).slideUp();
$(this).find(".panel-content").slideDown();
});
});
You should slideDown only the first '.panel-content' found.
$(".panel-default").click(function (event) {
event.preventDefault();
event.stopPropagation();
$(".panel-content").not($(this)).slideUp();
$(this).find(".panel-content:first:hidden").slideDown();
});
Note, .find() returns a list of descendants of each element in the current set of matched elements. So in case the parent item is clicked the list will also include the child item. Reducing the set of matched elements to the first in the set should do the trick.
$(this).find(".panel-content").first().slideDown();
EDIT: Besides this, my suggestion is to use the following to be able to slide up a previously slided down element. See also my updated fiddle. Note, the selector you have provided to .not does not match asthisis a ".panel-default" node rather than a ".panel-content" node.
$(".panel-content").not($(".panel-content:first", this)).slideUp();
jsFiddle
Sorry for my editting format in advance cos it's been a long time since I asked a question. I will try my best to follow all the rules.
So I have this list which works like an image carousel:
<div class="carousel">
<ul>
<li class="past"><img src="img1.png"/></li>
<li class="past"><img src="img2.png"/></li>
<li class="current"><img src="img3.png"/></li>
<li class="future"><img src="img4.png"/></li>
<li class="future"><img src="img5.png"/></li>
</ul>
</div>
Whenever I click on an image, the clicked item's class name will change to "current" and I will translateX <ul> to make "current" <li> look "centered". All of these are in "carousel" <div>.
However I have another div which has a background of an empty-screen iPhone mockup:
<div class = "iphone_screen">
<div>
<img class="display" src="blank_screen.png"/>
</div>
</div>
and I want to do this to the "iPhone" <div>:
var imgUrl = $("body").find(".current").find('img').attr('src');
$(".display").attr('src',imgUrl);
But this jQuery will only be executed once when I load the page.
So how do I execute my jQuery code again whenever I lick one of the <li> items and make the class name current change?
Update: Thank you all for the replies! I feel so stupid......I don't know why I ask this question.........I added a click function before and it didn't work.Then I started to look for alternatives. Now when I think about it, the selector must be wrong.
Since the event that drives everything comes from a click on the li you could run on a click for any li's (inside a ul) inside the carousel classed div.
$(".carousel > ul > li").click(function () {
var imgUrl = $("body").find(".current").find('img').attr('src');
$(".display").attr('src',imgUrl);
});
put your code in a function.
$(".carousel li").on("click" ,function () {
var imgUrl = $("body").find(".current").find('img').attr('src');
$(".display").attr('src',imgUrl);
});
I have content loading dynamically (using new WP_query loop in WordPress) for a jQuery carousel or image-scroll function -- where the image-scroll is a li list of images, styled to look like a strip of images.
When the image-scroll works properly, one of the images in the li tag has a class of active, which expands the image and makes it look like it's in front of the other images,
... and as the user clicks through this strip of images, the active class changes/moves to the targeted li tag, expanding that image.
What's happening is that none of the li tags are active when the page loads - since the content is dynamic through the WP loop (I didn't want all of the li tags to start with the active class, so I didn't add it to the loop),
...and so the images are just lined up in a consistent strip w/o one of the images being expanded (or having that active class).
It is only if the user happens to click on one of the images that it expands,
...but i need one of the images to be expanded (to have the class of active) before the user clicks so I need the active class added as/after the page loads.
I have tried through the jQuery code to target one of the li tags to add the active class, using filter() or closest() after the page loads, but that didn't work.
Or maybe I should write a new script to add the active class?
Any help much appreciated!
I have the abbreviated html and the jQuery function below.
_Cindy
ps as the code indicates, I also have corresponding article titles that scroll with the images, so perhaps I need to adjust the jQuery there, too.
<div class="articles-scroll">
<ul class="images-scroll">
<li><!-- I need only one of these tags to have a class of active to start -->
<a href="#">
<span class="set-image-border" style="float: none;">
<img class="setborder" src="image-set-by-new-wp_query">
</span>
</a>
</li>
<li>
<a href="#">
<span class="set-image-border">
<img class="setborder" src="image-set-by-new-wp_query">
</span>
</a>
</li>
</ul>
<div class="clear-float"></div>
<!-- in this section of html one of the article titles is active to coordinate with the active li image above to produce a corresponding clickable title, this works, but once again, only when user clicks on an image to begin the jQuery image-scroll function -->
<div class="wrapper">
<ul class="images-content">
<li>
<div class="article-header">
<h2>
<a href="link-set-by-new-wp_query">
</h2>
</div>
</div>
</li>
<li>
<div class="wrapper">
<div class="article-header">
<h2>
<a href="link-set-by-new-wp_query">
</h2>
</div>
</div>
</li>
</ul>
</div>
jQuery(".images-scroll li a").click(function() {
jQuery(this).parent().parent().find("li").removeClass("active");
// tried the following instruction as well as on next line, but no go
// jQuery(this).parent().parent().closest("li").addClass("active");
jQuery(this).parent().addClass("active");
jQuery(this).parent().parent().parent().find(".images-content > li").removeClass("active");
jQuery(this).parent().parent().parent().find(".images-content > li").eq(jQuery(this).parent().index()).addClass("active");
var step = ((-250)*(jQuery(this).parent().index()-1))-60;
//alert(step);
jQuery(this).parent().parent().css("margin-left", step+"px");
return false;
});
The reason why the code you wrote didn't work is that you have it inside a click handler, so nothing happens until you click one of the targeted elements. If you want something to happen on page load you can use $(document).ready() (can be shortened as $()) or $(window).load(). Just add the following lines below or above your existing code.
jQuery(function(){
var $listItems = jQuery('.images-scroll li');
$listItems.first().addClass('active');
// Second list item
$listItems.eq(1).addClass('active');
// Third list item
$listItems.eq(2).addClass('active');
});
Also, please note that (unless it conflicts with a different plugin), writing $ is shorter than jQuery, and it should do the same.
I'm using slick to create a carousel from list items
The structure of list is like this
<div class="slicker">
<li>
<img />
</li>
<li>
<img />
</li>
<li>
<img />
</li>
</div>
I'm unable to create a carousel of it .
The content rather appears as a normal list.
When checking the node I see the relevant classed added to the dom.
Link for slick :https://kenwheeler.github.io/slick/
Actually, Slick use div element as slide by default, but you can change it with the "slide" parameter (slide | element | 'div' | Element query to use as slide).
In your case you need to have (in your js) something like:
$('.slicker').slick({
slide: 'li'
});
You can also change your code with 'div' like "v2solutions.com" said but this change your semantics.
Could you please try <div> instead of <li>. slick seems to be working with <div> only.