I have code like this
<div id="filter">
</div>
<div id="items">
<div class="item">
<h2>Orange</h2>
<img src="orange.png" alt="" />
</div>
<div class="item">
<h2>Banana</h2>
<img src="banana.png" alt="" />
</div>
</div>
I would like to filter divs with class "item" on its childs img src values. For example, If I checked input witch value banana.png only .item with same img src value should be displayed. Rest must be hidden.
And if you uncheck checkbox, control should be make again - items that were hided by checking that checkobox should be displayed again.
I have got same code that creates proper checkboxes, but how to make rest?
$("#items > div").find("img").each(function() {
var value = $(this).attr("src");
$("#filter").append('<label><input type="checkbox" [value="' + value + '"]>' + value + '</label>');
var toFilter = $("#items > div").find("img");
});
You can see my codepen as well http://codepen.io/anon/pen/gMpGaE?editors=0010
You can filter the div's like this using the change event of checkboxes.
$("#items > div").find("img").each(function() {
var value = $(this).attr("src");
$("#filter").append('<label><input type="checkbox" value="' + value + '">' + value + '</label>');
var toFilter = $("#items > div").find("img");
});
$('#filter').on('change', ':checkbox', function() {
var checkedArray = $('#filter :checkbox:checked').map(function() {
return this.value;
}).get();
if (checkedArray.length) {
$("#items .item").hide();
match = $("#items > div").find("img")
.filter(function() {
return checkedArray.indexOf($(this).attr('src')) != -1;
}).closest('.item').show();
} else {
$("#items .item").show();
}
})
#items > div {
border: 1px dotted #355B78;
margin-bottom: 10px;
}
label {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="filter">
</div>
<div id="items">
<div class="item">
<h2>Orange</h2>
<img src="orange.png" alt="" />
</div>
<div class="item">
<h2>Banana</h2>
<img src="banana.png" alt="" />
</div>
<div class="item">
<h2>Orange</h2>
<img src="orange.png" alt="" />
</div>
<div class="item">
<h2>Banana</h2>
<img src="banana.png" alt="" />
</div>
</div>
Related
I'm displaying div ids onclick and it's working fine, those divs have images inside them i want to display the image of the selected div as well and keep it in the original div, but when i try to do it only one image gets displayed and it gets removed from it's div, i want all of the selected div images to be toggled like their id, here is the code:
let ids = [];
$(".select").on("click", function () {
ids.indexOf(this.id) === -1 ? ids.push(this.id) : ids.splice(ids.indexOf(this.id), 1);
$(this).toggleClass('selected');
$('#selected-id').html(ids.join(", "));
$('.selected-imgs').html($(this).children('img'));
});
.select {
display: inline-block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select" id="1">
<img src="https://images.pexels.com/photos/886465/pexels-photo-886465.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" height="100">
</div>
<div class="select" id="2">
<img src="https://images.pexels.com/photos/872957/pexels-photo-872957.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" height="100">
</div>
<div class="select" id="3">
<img src="https://images.pexels.com/photos/669615/pexels-photo-669615.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" height="100">
</div>
<p id="selected-id"></p>
<div class="selected-imgs"></div>
Code is Updated:
You can something like below:
let ids = [];
$(".select").on("click", function () {
if (ids.indexOf(this.id) >= 0) { // logic to remove
$(".selected-imgs").children("img").eq(ids.indexOf(this.id)).remove();
ids.splice(ids.indexOf(this.id), 1);
$('#selected-id').html(ids.join(", "));
return;
}
// logic to add
ids.push(this.id)
$(this).toggleClass('selected');
$('#selected-id').html(ids.join(", "));
$(this).children('img').clone().appendTo('.selected-imgs'); //clone and append the image
});
.select {
display: inline-block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select" id="1">
<img src="https://images.pexels.com/photos/886465/pexels-photo-886465.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" height="100">
</div>
<div class="select" id="2">
<img src="https://images.pexels.com/photos/872957/pexels-photo-872957.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" height="100">
</div>
<div class="select" id="3">
<img src="https://images.pexels.com/photos/669615/pexels-photo-669615.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" height="100">
</div>
<p id="selected-id"></p>
<div class="selected-imgs"></div>
You need to append the selected div's html to the target div. Here is how you can do that:
let ids = [];
$(".select").on("click", function () {
var src = $(this).children('img').attr('src');
var i = 0;
ids.indexOf(this.id) === -1 ? ids.push(this.id) : ids.splice(ids.indexOf(this.id), 1);
$(this).toggleClass('selected');
$('#selected-id').html(ids.join(", "));
$('.selected-imgs img').each(function (){
if($(this).attr('src') === src)
{
$(this).remove();
i += 1;
}
})
if(i === 0)
{
$('.selected-imgs').append($(this).html());
}
});
.select {
display: inline-block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select" id="1">
<img src="https://images.pexels.com/photos/886465/pexels-photo-886465.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" height="100">
</div>
<div class="select" id="2">
<img src="https://images.pexels.com/photos/872957/pexels-photo-872957.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" height="100">
</div>
<div class="select" id="3">
<img src="https://images.pexels.com/photos/669615/pexels-photo-669615.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" height="100">
</div>
<p id="selected-id"></p>
<div class="selected-imgs"></div>
So I have three DIVs with the same carousel effect. I am pretty sure I can use three different JavaScript codes to move one at a time but would like to make it as minimal code as possible. With the current code, when I click on the arrow once, all three of them moves. How can I get them to move separately?
There's three of the same one as the one below:
(function ($) {
$.fn.thumbGallery = function (settings) {
var $this = $(this);
return this.each(function () {
settings = jQuery.extend({
speed: 1000,
leftArrow: $this.find('.arrow-left'),
rightArrow: $this.find('.arrow-right'),
galleryContainer: $this.find('.gallery-inner'),
visibleImagesSize: 4
}, settings);
var imgElements = settings.galleryContainer.find('img').length;
var size = settings.visibleImagesSize;
//settings.leftArrow.hide();
if (imgElements > settings.visibleImagesSize) {
settings.rightArrow.show();
} else {
//settings.rightArrow.hide();
}
function animateLeft() {
var el = settings.galleryContainer.children(":last");
settings.galleryContainer.animate({
left: '+=' + el.outerWidth(true) + 'px'
},
settings.speed);
}
function animateRight() {
var el = settings.galleryContainer.children(":first");
settings.galleryContainer.animate({
left: '-=' + el.outerWidth(true) + 'px'
},
settings.speed);
}
function checkArrows() {
if (size === settings.visibleImagesSize) {
//settings.leftArrow.hide();
} else {
settings.leftArrow.show();
}
if (size === imgElements) {
//settings.rightArrow.hide();
} else {
settings.rightArrow.show();
}
}
settings.leftArrow.click(function () {
animateLeft();
size--;
checkArrows();
});
settings.rightArrow.click(function () {
animateRight();
size++;
checkArrows();
});
});
};
})(jQuery);
$(document).ready(function () {
$('.gallery').thumbGallery();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="open-space">
<h2>Open Space</h2>
<p class="description">Desk space in an open shared office environment that can be used in various of ways.</p>
<center>
<div class="gallery">
<div class="arrow-left">
<div class="arrow-left-small">
</div>
</div>
<div class="gallery-outer">
<div class="gallery-inner">
<div class="gallery-tmb">
<img src="images/openspace1.png" alt="Open Space1" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/openspace2.png" alt="Open Space2" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/openspace3.png" alt="Open Space3" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/openspace4.png" alt="Open Space4" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/openspace5.png" alt="Open Space5" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/openspace6.png" alt="Open Space6" height="auto" width="250"/>
</div>
</div>
</div>
<div class="arrow-right">
<div class="arrow-right-small">
</div>
</div>
</div>
<span class="btn_margin">
<asp:Button ID="Button3" runat="server" Text="More lists" CssClass="btn btn-primary top" OnClick="Btn_More_Click" />
</span>
</center>
</div>
The reason they move together is because you use the .gallery selector when you call thumbsGallery(), which applies to all elelements that have class="gallery" in the HTML code. What you can do is to simply add a unique id to each of the gallery and call thumbsGallery() with each of the selectors.
HTML:
<div class="gallery" id="executive_gallery">
...
</div>
<div class="gallery" id="conference_gallery">
...
</div>
<div class="gallery" id="open_gallery">
...
</div>
Javascript:
$(document).ready(function () {
$('.gallery#executive_gallery').thumbGallery();
$('.gallery#conference_gallery').thumbGallery();
$('.gallery#open_gallery').thumbGallery();
});
JSFiddle: https://jsfiddle.net/3qeLumkp/1/
I'm trying to grab the source of an image using jQuery. However, when I log the result, it returns undefined. Here is my code:
$(document).ready(function() {
$(".btn-expand").on("click", function() {
var img = $(".img-" + "num" + " img").attr("src");
console.log(img);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 img-banner img-2">
<img src="assets/img/placeholder-banner.png" alt="Banner 2">
<div class="overlay overlay-2">
<div class="overlay-contents">
<h2>Name2</h2>
<h3>Caption2</h3>
View
</div>
</div>
</div>
</div>
$(".img-" + "num" + " img")
is exactly equivalent to
$(".img-num img")
I believe you meant "num" to be a variable called num whose value is the number of the target image, not a hard-coded string:
$(document).ready(function() {
$(".btn-expand").on("click", function(event) {
var num = $(event.currentTarget).attr('overlay-data')
var img = $(".img-" + num + " img").attr("src");
console.log(img);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 img-banner img-2">
<img src="assets/img/placeholder-banner.png" alt="Banner 2">
<div class="overlay overlay-2">
<div class="overlay-contents">
<h2>Name2</h2>
<h3>Caption2</h3>
View
</div>
</div>
</div>
</div>
Well you have an attribute on the anchor you do not read. Change it to be a data attribute and use a variable instead of hardcoding a string.
$(document).ready(function() {
$(".btn-expand").on("click", function (e) {
e.preventDefault()
var overlay = $(this).data("overlay")
var img = $(".img-" + overlay + " img").attr("src");
console.log(img);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 img-banner img-2">
<img src="http://via.placeholder.com/350x150" alt="Banner 2">
<div class="overlay overlay-2">
<div class="overlay-contents">
<h2>Name2</h2>
<h3>Caption2</h3>
View
</div>
</div>
</div>
</div>
Everything looks good except that the attribute value wasn't defined. To set an attribute in jQuery, you must set the value. Hence, to correct that snippet.
$(document).ready(function() {
$(".btn-expand").on("click", function(event) {
var num = $(event.currentTarget).attr('overlay-data')
var img = $(".img-" + num + " img").attr("src");
console.log(img);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 img-banner img-2">
<img src="assets/img/placeholder-banner.png" alt="Banner 2">
<div class="overlay overlay-2">
<div class="overlay-contents">
<h2>Name2</h2>
<h3>Caption2</h3>
View
</div>
</div>
</div>
</div>
$(document).ready(function() {
$(".btn-expand").on("click", function(event) {
var num = $(event.currentTarget).attr('overlay-data')
var img = $(".img-" + num + " img").attr("src","imageSource.extention");
console.log(img);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 img-banner img-2">
<img src="assets/img/placeholder-banner.png" alt="Banner 2">
<div class="overlay overlay-2">
<div class="overlay-contents">
<h2>Name2</h2>
<h3>Caption2</h3>
View
</div>
</div>
</div>
</div>
var img = $(".img-" + "num" + " img").attr("src");
in this code you are looking for tag with class "im-num" and child with class "img". if you give class im-num to outer div and class img like below
<div class="col-md-12 img-banner img-2 im-num">
<img src="assets/img/placeholder-banner.png" alt="Banner 2" class='img'/>
</div>
I recently made a jquery code that should hides an element if it's href is equal to another element's but i can't be able to make it work...
jsfiddle
HTML
<div class="a">
<a href="1">
<img scr="a">
</a>
</div>
<div class="thumb">
<a href="1">
<img scr="a">
</a>
</div>
<div class="thumb b">
<a href="2">
<img scr="b">
</a>
</div>
CSS
.a{width:400px;height:100px;background-color:black;}
.thumb{width:400px;height:100px;background-color:green;}
.b{background-color:yellow;}
JQUERY
var mainhref = $(".a a").attr('href');
if($("a", this).attr('href') == mainhref ) {
$(".a").hide();
}
else {
$(".a").show
}
Using plain javascript :D
let ar = document.getElementsByTagName('a'),
holdarray = [];
Array.from(ar, elem => {
if(holdarray.includes(elem.getAttribute('href')))
elem.parentNode.style.display = 'none'
else
holdarray.push(elem.getAttribute('href'))
})
.a { width:400px;height:100px;background-color:black; }
.thumb { width:400px;height:100px;background-color:green; }
.b { background-color:yellow; }
<div class="a" >
</div>
<div class="thumb">
</div>
<div class="thumb b">
</div>
You can try like this, only check for thumb class then it will hide specific div which contain same href
var mainhref = $(".a a").attr('href');
$('.thumb a').each(function(){
if($(this).attr('href') == mainhref)
{
$(this).parents('.thumb').hide();
}
});
Just select by that href (and parent not containing the base div's class 'a') and hide it
$('a[href="'+mainhref+'"]').parent(":not(.a)").hide();
var mainhref = $(".a a").attr('href');
var parentDiv = $('a[href="'+mainhref+'"]').parent(":not(.a)").hide();
.a{width:400px;height:100px;background-color:black;}
.thumb{width:400px;height:100px;background-color:green;}
.b{background-color:yellow;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a" >
<a href="1">
<img scr="a">
</a>
</div>
<div class="thumb">
<a href="1">
<img scr="a">
</a>
</div>
<div class="thumb b">
<a href="2">
<img scr="b">
</a>
</div>
Try something like this with Jquery.
Loop on each a and store the href. Select all <a> but first with same href and hide the parent
$("a").each(function(){
var href= $(this).attr("href");
$("a[href='"+href+"']").not(":first").parent().hide();
});
.a{width:400px;height:100px;background-color:black;}
.thumb{width:400px;height:100px;background-color:green;}
.b{background-color:yellow;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
<a href="1">
<img scr="a">
</a>
</div>
<div class="thumb">
<a href="1">
<img scr="a">
</a>
</div>
<div class="thumb b">
<a href="2">
<img scr="b">
</a>
</div>
You should loop through all elements.
$('a').each(function(){
if($(this).attr('href') == mainhref){
$(this).hide();
}
});
$('a').each(function(){
if($(this).attr('href') == mainhref){
$(this).hide();
}
});
Here's a trick, using the radio:checked.
$($("a").toArray().reverse()).each(function(index, el){
var href = $(el).attr('href');
$(el).parent().before('<input type="radio" name="' + href + '" class="hidden" checked />');
})
The reason that I use reverse is that I want the first a tag to remain showing. If you want the last a tag to remain, you can just use $('a') instead of $($("a").toArray().reverse())
css:
.hidden { display:none };
input[type=radio]+ div a { display: none };
input[type=radio]:checked + div a { display: block };
With this trick, you can make all the a tag with a unique href. Hope it can help you.
I need to index each element like this 1/8, 2/8, 3/8
$(document).ready(function () {
var Thumbnail = $('.thm-img'); // main image wrapper
function ThumbnailCounter() {
var AllNumber = $(Thumbnail).length;
$(Thumbnail).each(function () {
var CurrentActive = $(Thumbnail).index() + 1; //return current number active thumbnail
$(this).children('span').append(CurrentActive + '/' + AllNumber);
});
}
new ThumbnailCounter();
});
.thm-img {
border: 1px solid red;
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="thumb-wrp scrollbar-inner">
<div class="thm-img">
<img src="../img/img/a.jpg"><span class="numeric active"></span>
</div>
<div class="thm-img">
<img src="../img/img/b.jpg"><span class="numeric"></span>
</div>
<div class="thm-img">
<img src="../img/img/c.jpg"><span class="numeric"></span>
</div>
<div class="thm-img">
<img src="../img/img/d.jpg"><span class="numeric"></span>
</div>
<div class="thm-img">
<img src="../img/img/a.jpg"><span class="numeric"></span>
</div>
<div class="thm-img">
<img src="../img/img/c.jpg"><span class="numeric"></span>
</div>
<div class="thm-img">
<img src="../img/img/b.jpg"><span class="numeric"></span>
</div>
<div class="thm-img">
<img src="../img/img/d.jpg"><span class="numeric"></span>
</div>
</div>
Just change your script:
function ThumbnailCounter() {
var AllNumber = $(Thumbnail).length;
$('.thm-img').each(function () {
var CurrentActive = $(this).index() + 1; // Use $(this) to reference to current element - it will give you right index
$(this).children('span').append(CurrentActive + '/' + AllNumber);
});
}
new ThumbnailCounter();
You can use,
$(".thumb-wrp .thm-img").each(function() {
var index = $(".thumb-wrp .thm-img").index(this) + 1;
var total = $(".thumb-wrp .thm-img").length;
$(this).find("span").text(index + "/" + total);
})
Fiddle
Try
var CurrentActive = $(this).index() + 1;