We Keep Coding

How to place div items into jQuery Slider showing a minimum of 5 elements with Left-Right slider to view more elements?

I have div elements on a page with col-sm-3 classes. So far, I have 6 of these elements and so, 4 elements are on 1 row and 2 are on the next row which fill half this row. I am using Bootstrap.
I want to make all these elements be contained on 1 row in a slider using JQuery with a minimum of 5 elements showing and be able to click on left-right arrow buttons to view all elements.
I found this example JQuery called lightSlider: http://sachinchoolur.github.io/lightslider/ There are 2 examples on this website and I would like to make mine similar to the second red example.
I have tried to use the lightSlider class on my elements, but no change is seen.
Here is my HTML:
<div class="row whiteBG" id="lightSlider">
#foreach (var item in Model)
{
<div class="col-sm-3 align-centre">
<img src="#item.OutputImage" alt="#item.Image" />
<a href="#Url.Action("Products", "Home", new { id = item.Id, categoryName = item.Name })">
<div class="blend-box-top category-head" style="background: #0197BA url(#item.OutputImage) no-repeat 50% 0%;">
<div class="item-container">
<div class="desc-plus">
<p>#item.Name</p>
<p>+</p>
</div>
</div>
</div>
</a>
</div>
}
</div>
I have a row which added multiple amounts of col-sm-3 div elements.
I also placed this below my HTML before the ending body tag:
<script type="text/javascript">
$(document).ready(function() {
$("#lightSlider").lightSlider();
});
</script>
I am using Visual Studio and JQuery is loaded in by default at the bottom of the _Layout.cshtml file:
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>

<div class="col-sm-2 align-centre">
Change your class from 3 > 2 so that 5 will fit.

It was the first time using JQuery for me and the problem was that I was including all the classes in my HTML that I saw in the Chrome Developer Tool HTML for the second example slider here: http://sachinchoolur.github.io/lightslider/index.html This was not necessary and caused errors since I was only meant to use 1 class which then automatically added new classes to my HTML.
Firstly, I used the lightslider.js, lightslider.css and controls.png files into my project available here: https://github.com/sachinchoolur/lightslider/tree/master/src
I then placed the folling script into my HTML page before the ending body tag:
$(document).ready(function () {
window.prettyPrint && prettyPrint()
$('#content-slider').lightSlider({
keyPress: false,
item: 5,
loop: true,
onSliderLoad: function () {
$('#content-slider').removeClass('cS-hidden');
}
});
});
</script>
This is available on the GitHub repository link above - I changed it a bit to make the item attribute display 5 elements initally.
It is crucial that you place this script after the script that calls the JQuery. It took me a day to find out this was the problem.
In lightslider.css you need to change the filePath to include the image used for the left-right arrows correctly. the class is .lSAction > a. I just placed mine in the Images folder and this is the attribute that I changed: background-image: url('Images/controls.png');
This is my HTML:
What you need to know is that I only include 1 class in my HTML list: ul<id="content-slider"> which will add the other necessary lightSlider to create the second example slider displayed here: http://sachinchoolur.github.io/lightslider/index.html
<div class="row whiteBG">
<ul id="content-slider" >
#foreach (var item in Model)
{
<li class="col-sm-4 align-centre">
<a href="#Url.Action("Products", "Home", new { id = item.Id, categoryName = item.Name })">
<img src="#item.OutputImage" alt="#item.Image" />
<div class="blend-box-top category-head" style="background: #0197BA url(#item.OutputImage) no-repeat 50% 0%;">
<div class="item-container">
<div class="desc-plus">
<p>#item.Name</p>
<p>+</p>
</div>
</div>
</div>
</a>
</li>
}
</ul>
</div>
I hope this can help someone else going through a similar problem. :)

Show/hide multiple children classes for an individual parent click (Jquery)

I'm fairly new to Javascript/Jquery and I'm trying to hide multiple children/adjacent classes when a specific parent class is clicked.
Here's my HTML
<div class="container">
<div class="row">
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small">
<i class="fa fa-clock-o"></i>
</div>
<div class="pov_title_small">
MEASURE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_large">
<i class="fa fa-map-marker"></i>
</div>
<div class="pov_title_large">
MEASURE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small">
<i class="fa fa-commenting"></i>
</div>
<div class="pov_title_small">
MEASURE
</div>
</div>
</div>
</div>
What I'm aiming to do is: When a user clicks one of the two smaller icons shown (pov_icon_small), for that individual icon: the classes pov_icon_small and pov_title_small will change to pov_icon_large and pov_title_large respectively. In the same time, I want the other 'large' icon and 'title' to revert back to the 'small' state
I've started calling some Javascript but I don't think I'm headed the right way:
$('.pov_icon_small').on('click', function (e) {
$(this).toggleClass("pov_icon_large");
});
Would anyone be willing to point me to the right direction?

To use individual click
$('.pov_icon_small , .pov_icon_large').on('click', function (e) {
$('.pov_icon_large').not($(this)).removeClass('pov_icon_large').addClass('pov_icon_small');
$(this).toggleClass("pov_icon_small").toggleClass("pov_icon_large");
});
and for title the same way
$('.pov_title_small , .pov_title_large').on('click', function (e) {
$('.pov_title_large').not($(this)).removeClass('pov_title_large').addClass('pov_title_small');
$(this).toggleClass("pov_title_small").toggleClass("pov_title_large");
});
Working Demo
To run both action on icon click use this
$('.pov_icon_small , .pov_icon_large').on('click', function () {
$('.pov_icon_large').not($(this)).removeClass('pov_icon_large').addClass('pov_icon_small');
$('.pov_title_large').not($(this).next('div[class^="pov_title_"]')).removeClass('pov_title_large').addClass('pov_title_small');
$(this).toggleClass("pov_icon_small").toggleClass("pov_icon_large");
$(this).next('div[class^="pov_title_"]').toggleClass("pov_title_small").toggleClass("pov_title_large");
});
Working Demo
Note: be sure to include Jquery

You can add a common class icon for the icon div and title for the title div and following code will work,
$(".pov_icon_small").on('click',function(){
$(this).parent().siblings().children('div').each(function(value){
if($(this).hasClass('icon'))
$(this).addClass('pov_icon_small').removeClass('pov_icon_large');
else if($(this).hasClass('title'))
$(this).addClass('pov_title_small').removeClass('pov_title_large');
});
$(this).addClass('pov_icon_large').removeClass('pov_icon_small');
$(this).siblings('.title').addClass('pov_title_large').removeClass('pov_title_small');
});
Here as you can see, I am first getting parent of the icon clicked i.e. Your pav_icon div now I am changing for all the siblings now each div in the sibling. If it is Iicon changing icon classes as required if title changing title classes.

Scope issue in Javascript when writing to an array

BACKGROUND
I have a list of buyerNames and want the admin user to be able toggle their names. So far so good. Visually it works as expected. Admin user clicks on name and it's toggled on (background around the name and the items changes shade). Admin user can click and unclick names to his heart's desire.
CODE BELOW: I'm showing large sections of my code in case I'm messing something up in
a place where I don't think there's a problem.
<div class="headerSecondaryBg"> <!-- THE BACKGROUND LAYER - POSITION AND COLOR -->
<div class="buyerItems"> <!-- NUMBER OF BUYER ITEMS -->
<div class="item i1">42</div>
<div class="item i2">31</div>
<div class="item i3">57</div>
<div class="item i4">49</div>
<div class="item i5">16</div>
<div class="item i6">38</div>
<div class="item i7">24</div>
</div>
<div class="buyerNames"> <!-- BUYER NAMES -->
<div class="buyer b1">BUYERNAME 1 </div>
<div class="buyer b2">BUYERNAME 2 </div>
<div class="buyer b3">BUYERNAME 3 </div>
<div class="buyer b4">BUYERNAME 4 </div>
<div class="buyer b5">BUYERNAME 5 </div>
<div class="buyer b6">BUYERNAME 6 </div>
<div class="buyer b7">BUYERNAME 7 </div>
</div>
<div class="selectBuyer"> <!-- CREATES THE VISIBLE ON / OFF FOR THE TOGGLE AS PER DESIGN SPEC -->
<div class="selectBuyerOff b-on1"></div>
<div class="selectBuyerOff b-on2"></div>
<div class="selectBuyerOff b-on3"></div>
<div class="selectBuyerOff b-on4"></div>
<div class="selectBuyerOff b-on5"></div>
<div class="selectBuyerOff b-on6"></div>
<div class="selectBuyerOff b-on7"></div>
</div>
</div><!-- // END headerSecondaryBg -->
BACKGROUND
After the admin user has selected his buyers he clicks "show items" to reveal a hidden div below.
PROBLEM: Putting the toggled names into an array.
STEP 1:
Get buyerName (b-on1, b-on2 ... in this test example) and place in array.
$(".selectBuyer div" ).click(function(){
$(this).toggleClass("selectBuyerOn"); // show user that items are on or off
var all=$(this).attr('class');
console.log(all);
console.log = selectBuyerOff b-on1 selectBuyerOn.
EXACTLY WHAT WAS EXPECTED (considering I clicked on buyer 1)
STEP 2:
OK. Let's just have b-on1 and get rid of the other classes.
$(".selectBuyer div" ).click(function(){
$(this).toggleClass("selectBuyerOn"); // show user that items are on or off
var all=$(this).attr('class');
bbb=$(this).attr('class').split(' ')[1];
console.log(all);
console.log(bbb);
I get what's expected:
console.log(all) = selectBuyerOff b-on1 selectBuyerOn
console.log(bbb) = b-on1
STEP 3:
NOW let's put it into an array. (This goes immediately after the above code)
testArr=[];
testArr.push(all);
testArr.push(bbb);
console.log(testArr);
console.log = ["selectBuyerOff b-on1 selectBuyerOn", "b-on1"]
Now here's the problem - the array resets itself after every click.
I want the array to have b-on1 and b-on2 if the user selected those and
b-on1 and b-on2 if the user selected b-on1, b-on2, b-on3 (and then untoggled b-on3)
and yet the array is reset after every click.
How do I get this to work?
I tried removing var so that the variable would be in the global scope. I must be missing something simple.

When testArr=[] is executed, the testArr variable is assigned to a brand new empty array.
It sounds like you need to initialize this array just the once outside of the click handler, and then simply push values into the existing array within the handler. For example:
var testArr = [];
$(".selectBuyer div" ).click(function(){
$(this).toggleClass("selectBuyerOn"); // show user that items are on or off
var all=$(this).attr('class');
bbb=$(this).attr('class').split(' ')[1];
testArr.push(all);
testArr.push(bbb);
console.log(testArr);
/* ... */
});

Find sibling with Javascript and Hammer.js

I have made a simple system which detects double taps. I want to show a heart icon when someone double taps on an image, just like on Instagram.
This is what my code looks right now:
var elements = document.getElementsByClassName('snap_img');
[].slice.call(elements).forEach(function(element) {
var hammertime = new Hammer(element),
img_src = element.getAttribute('src');
hammertime.on('doubletap', function(event) {
alert(img_src); // this is to test if doubletap works
// Some javascript to show the heart icon
});
});
This is what the HTML looks like:
<div class="snap_item">
<div class="snap_item_following_info">
<img class="snap_item_following_img" src="res/stat/img/user/profile/small/1.fw.png" alt="#JohnDoe" />
<a class="snap_item_following_name" href="#">#JohnDoe</a>
<div class="snap_too">
</div>
</div>
<img class="snap_img" src="res/stat/img/user/snap/43/2.fw.png" alt="#ErolSimsir" />
<div class="like_heart"></div>
<div class="snap_info">
<div class="snap_text">
LA is the shit...
<a class="snap_text_hashtah" href="#">#LA_city_trip</a>
</div>
<div class="snap_sub_info">
<span class="snap_time">56 minutes ago</span>
<div class="like inactive_like">
<div class="like_icon"></div>
<div class="like_no_active">5477</div>
</div>
</div>
</div>
</div>
So when the element 'snap_img' is double tapped, I need to get the element 'like_heart' which is one line below the snap_img element. How do I get that sibling element and fade it in with JQuery?

Like this
[].slice.call(elements).forEach(function(element) {
var hammertime = new Hammer(element),
img_src = element.getAttribute('src');
hammertime.on('doubletap', function(event) {
alert(img_src); // this is to test if doubletap works
$(element).next().text('♥').hide().fadeIn();
});
});
P.S. I've added that heart text, since the sibling was empty.

On the event handler, i would do $(element).parent().find('.like_heart').fadeIn(); So the code is not dependant on the element ordering.
(To clarify to selector: take the parent element which is the div.snap_item and find an element with class like-heart inside it)

Hiding divs whenever a new one opens

I have a website with two options represented by <a> tags, chairs and tables. This is the HTML that displays the div whenever a <a> tag is clicked on.
<div id="workbench_menu">
<p><strong>Living Room</strong></p>
<a onclick="chairs()" href="#"><p>chairs</p></a>
<a onclick="tables()" href="#"><p>tables</p></a>
</div>
<div id="workbench_objects">
<div id="tables" class="refresh" style="display:none;">
<div class="workbench_object_info">
<img src="images/house/objects/table_4.png">
<p>20 oak logs</p>
</div>
</div>
<div id="chairs" class="refresh" style="display:none;">
<div class="workbench_object_info">
<img src="images/house/objects/stonechair_1.png">
<p>20 oak logs</p>
</div>
</div>
</div>
The javascript which handles that function is here:
<script>
function tables() {
document.getElementsByClassName('refresh').style.display='none';
document.getElementById('tables').style.display='inline';
}
function chairs() {
document.getElementsByClassName('refresh').style.display='none';
document.getElementById('chairs').style.display='inline';
}
</script>
So what I am trying to do, is that when one of the options are pressed, everything else is hidden and only the div that is assigned that specific <a> tag will be displayed. When a new <a> tag is clicked, the old one will be hidden and the new on will be displayed.
I have tried adding a document.getElementsByClassName('refresh').style.display='none'; in hope that every class with "refresh" attached to it, will be put on display:none but this does not work somehow. The outcome is that after a link is clicked, the div is shown. After a new link is clicked, that div is shown too without hiding the old div. Hope you have some suggetions, thanks in advance.
UPDATE:
var length = document.getElementsByClassName('refresh').length;
for(var i=0; i<length;i++){
document.getElementsByClassName('refresh')[i].style.display='none';
}
function tables() {
document.getElementById('tables').style.display='inline';
}
function chairs() {
document.getElementById('chairs').style.display='inline';
}

document.getElementsByClassName('refresh') will return you the array of elements.
function tables() {
hideElements();
document.getElementById('tables').style.display='inline';
}
function chairs() {
hideElements();
document.getElementById('chairs').style.display='inline';
}
function hideElements(){
var length = document.getElementsByClassName('refresh').length;
for(var i=0; i<length;i++){
document.getElementsByClassName('refresh')[i].style.display='none';
}
}