Develop Reference

More efficient way of highlighting selections?

I have about 30 options that a user can select. When they click the option it opens/highlights a content/html box for that selection and hides the others (similar to a picture lightbox but instead of thumbnails and main pic I need html).
I've found this Jquery code example: http://jsfiddle.net/EhtrR/1238/
<img id="img1"/>
<img id="img2"/>
<img id="img3"/>
<img id="img4"/>
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
$("#img1").on('click', function() {
$("#div1").fadeIn();
$("#div2,#div3,#div4").fadeOut();
});
$("#img2").on('click', function() {
$("#div2").fadeIn();
$("#div1,#div3,#div4").fadeOut();
});
$("#img3").on('click', function() {
$("#div3").fadeIn();
$("#div1,#div2,#div4").fadeOut();
});
$("#img4").on('click', function() {
$("#div4").fadeIn();
$("#div1,#div2,#div3").fadeOut();
});
(Please note the images are just example. These can be div boxes or span.)
but as I'll need 20-30 of these options I was wondering how I can make it more efficient or do you suggest another way? I noticed on Mobile touch taps the clicks were fairly slow with the Jquery.

To DRY and simplify the logic you could put each set of elements in containers, grouped by their behaviour. Then apply common classes to them and relate them on click by their indexes. Try this:
let $contents = $('.content');
$('.trigger').on('click', e => {
let $target = $contents.eq($(e.target).index()).fadeToggle();
$contents.not($target).fadeOut();
});
.content { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="trigger-container">
<img src="01.jpg" class="trigger" />
<img src="02.jpg" class="trigger" />
<img src="03.jpg" class="trigger" />
<img src="04.jpg" class="trigger" />
</div>
<div class="content-container">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
</div>

for(let i=0;i<=4;i++){
$("#img"+i).on('click', function() {
$("#div"+i).fadeIn();
for(var num=0; num<=4; num++)
{
if(num!=i)
{
$("#div"+num).fadeOut()
}
}
});
}

How to get index of element by unique class "active"?

I have some very simple code to get information about active div with class name active. I currently trying to get its index between a collection of divs with class name slide. However, I tried many selectors with no benefit. So, I need your help.
CSS
<style type="text/css">
.slide {
width:50px;border:1px solid #808080;height:50px;float:left; display:inline-block;
text-align:center; vertical-align:middle;/*display:none;*/
}
.active { background-color:brown }
</style>
HTML
<div style="text-align:center">
<input id="get_info" type="button" value="<<>>" />
<br />
<div style="display:inline-block">
<div class="slide ">0</div>
<div class="slide">1</div>
<div class="slide active">2</div>
<div class="slide">3</div>
</div>
<br />
<p id="msg"></p>
</div>
jQuery:
<script type="text/javascript">
$(document).ready(function () {
var nxt = 0;
var prv = 0;
var crnt = 0;
$("#get_info").click(function () {
crnt = $(".slide").index(".slide .active");
$('#msg').html(crnt);
});
});
</script>
As shown all I need to get "active" position index between "slide". The permanent result for this is -1.

You can get it like this:
$(document).ready(function() {
$("#get_info").click(function() {
let crnt = $(".slide").index($(".slide.active"));
$('#msg').html(crnt);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="text-align:center">
<input id="get_info" type="button" value="<<>>" />
<br />
<div style="display:inline-block">
<div class="slide ">0</div>
<div class="slide">1</div>
<div class="slide active">2</div>
<div class="slide">3</div>
</div>
<br />
<p id="msg"></p>
</div>

How to get this code to move one class at a time

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/

Javascript filtering content on checkbox value

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>

Make JS carousel repeat

I'm using the following code for a simple carousel. I'd like to make it repeat after you get to the third quote-item.
Can anyone help? Thank you.
Here's the JS:
<script>
show()
$(function() {
var currentCarousel = 0;
function changeCarousel() {
$('.quote-item').hide();
$('.quote-item:eq('+ currentCarousel +')').show();
currentCarousel = currentCarousel + 1;
setTimeout(function(){ changeCarousel(); }, 8000);
}
changeCarousel();
$('.quote-change').click(function(e) {
e.preventDefault();
changeCarousel();
});
});
</script>
And this is the HTML:
<div class="quote" >
<div class="quote-item">
<div class="quote-image">
<img src="" alt="quote 1">
</div>
<div class="quote-text">
quote text one
</div>
</div>
<div class="quote-item">
<div class="quote-image">
<img src="" alt="quote 1">
</div>
<div class="quote-text">
quote text Two...
</div>
</div>
<div class="quote-item">
<div class="quote-image">
<img src="" alt="quote 1">
</div>
<div class="quote-text">
quote text THREE...
</div>
</div>
next
</div>

Try this:
$(function () {
var currentCarousel = 0;
var timeoutID = null;
var timeoutDuration = 2000;
var quoteChange = $('.quote-change');
var quoteItems = $('.quote-item');
var numQuotes = quoteItems.length;
function changeCarousel() {
quoteItems.hide();
quoteItems.eq(currentCarousel).show();
currentCarousel += 1;
if (currentCarousel === numQuotes) { currentCarousel = 0; }
clearTimeout(timeoutID);
timeoutID = setTimeout(function () {
changeCarousel();
}, timeoutDuration);
}
changeCarousel();
quoteChange.click(function (e) {
e.preventDefault();
changeCarousel();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="quote">
<div class="quote-item">
<div class="quote-image">
<img src="" alt="quote 1" />
</div>
<div class="quote-text">quote text one</div>
</div>
<div class="quote-item">
<div class="quote-image">
<img src="" alt="quote 2" />
</div>
<div class="quote-text">quote text Two...</div>
</div>
<div class="quote-item">
<div class="quote-image">
<img src="" alt="quote 3" />
</div>
<div class="quote-text">quote text THREE...</div>
</div>
next
</div>
Also you were missing a clearTimeout(); since you have a click handler calling the same changeCarousel() function as well. There is a conflict.
So imagine that by default, your setTimeout keeps calling changeCarousel() recursively and assuming it was right in the middle of another loop (4 seconds) when you decide to click on next button and jump to next carousel item by yourself. Because of that, your newly displaying carousel item will now only stay visible for the remaining 4 seconds but instead it should have had a full 8 seconds stay. Making sense?
Hope you find it useful.

Update your changeCarousel so if currentCarousel >= slides.length it resets to 0
function changeCarousel() {
$('.quote-item').hide();
$('.quote-item:eq('+ currentCarousel +')').show();
if(currentCarousel >= slides.length ){
currentCarousel = 0;
} else{
currentCarousel++;
}
setTimeout(function(){ changeCarousel(); }, 8000);
}