Develop Reference

Javascript/jQuery Multi filtered gallery and arrays comparison

I'm sorry if this is a duplicate questions, but I've spent over 8hrs trying to figure out how to implement this, but it seems I haven't succeded so far.
I've got a photo gallery, each foto contains multiple tags. If multiple tags are active, it needs to show only items that include all the selected tags.
<ul class="tags-list container">
<li class="tag toate">Toate</li>
<li class="tag">Tag 3</li>
<li class="tag">Tag 2</li>
<li class="tag">Tag 4</li>
</ul>
<div class="grid">
<div class="grid-sizer"></div>
<div id="grid-item-0" class="grid-item " data-tag=" tag-1 tag-3 tag-7"></div>
<div id="grid-item-1" class="grid-item " data-tag=" tag-2 tag-1"></div>
<div id="grid-item-2" class="grid-item big" data-tag=" tag-3"></div>
<div id="grid-item-3" class="grid-item " data-tag=" tag-4 tag-2 tag-1"></div>
</div>
and JS:
function Gallery() {
this.tag = $('.tags-list .tag');
this.gridItem = $('.grid .grid-item');
this.activeTags = ['toate'];
this.itemsList = [];
this.activeItems = [];
this.init();
}
Gallery.prototype.init = function () {
this.masonry();
this.itemsListGen();
};
Gallery.prototype.itemsListGen = function () {
var _this = this;
$(this.gridItem).each(function () {
var tags = $(this).attr('data-tag');
tags = tags.trim();
// creates an array of objects with every item's id and tags
_this.itemsList.push({
'id': $(this).attr('id'),
'tags': tags.split(' ')
});
});
};
Gallery.prototype.masonry = function () {
$('.grid').masonry({
// options
columnWidth: '.grid-sizer',
itemSelector: '.grid-item',
percentPosition: true
});
};
Gallery.prototype.tagClick = function (e) {
e.preventDefault();
// currentTag has the clicked tag
var currentTag = $(e.currentTarget).attr('data-tag-slug');
$(e.currentTarget).toggleClass('active');
if ($(e.currentTarget).attr('data-tag-slug') === 'toate') {
this.toateClick();
} else {
// refresh current filters
this.refreshTags(currentTag);
// return validated items based on filters
this.returnValidItems();
// refresh the layout with the current items
this.refreshMasonry();
}
};
Gallery.prototype.refreshTags = function (e) {
// checks if the current tag is already active
// if it's active, it removes it and checks if there is any other active tag or should trigger 'toate'
// if it's not active, it adds it to the activeTags and removes 'toate'
if (this.activeTags.includes(e)) {
this.activeTags.splice(this.activeTags.indexOf(e), 1);
if (this.activeTags.length < 1) {
this.showAll();
}
} else {
this.activeTags.push(e);
if (this.activeTags.includes('toate')) {
this.removeToate();
}
}
};
Gallery.prototype.returnValidItems = function () {
for (var i = 0; i < this.itemsList.length; i++) {
var itemTags = this.itemsList[i].tags;
for (var j = 0; j < this.activeTags.length; j++) {
if (itemTags.includes(this.activeTags[j])) {
this.activeItems.push(this.itemsList[i].id);
} else {
this.activeItems.splice(this.activeItems.indexOf(this.itemsList[i].id), 1);
break;
}
}
}
};
Gallery.prototype.refreshMasonry = function () {
$('.grid-item').hide();
for (var i = 0; i < this.activeItems.length; i++) {
$('#' + this.activeItems[i]).show();
}
$('.grid').masonry();
};
Gallery.prototype.showAll = function () {
console.log('show all');
this.activeTags = ['toate'];
this.activeItems = [];
$('.grid-item').show();
$('.tags-list').find('.toate a').addClass('active');
$('.grid').masonry();
};
Gallery.prototype.toateClick = function (e) {
console.log('toate click');
$('.tags-list').find('.active').removeClass('active');
$('.tags-list .toate a').addClass('active');
this.showAll();
};
Gallery.prototype.removeToate = function () {
$('.tags-list li.toate > a').removeClass('active');
this.activeTags.splice(this.activeTags.indexOf('toate'), 1);
};
I am not capable of doing it. Please help? :)
Besides of helping me with the problem, any feedback regarding my code is welcomed.

Add and Remove class to click a dynamic Button

Trying to Add and Remove class to click dynamic Buttons, means this button <button class="one"></button> get class dynamically like this: <button class="one text1">text1</button>
So if button one has class .text1 and by click this add class .hide to list item <li class="text1"> like <li class="text1 show">
Same for button two <button class="two"></button> and by click add class <li class="text2 show">
Note: when click button two, then should remove class .show and add new class .hideto button one.
Main HTML:
<div id="main-id">
<button class="one"></button>
<button class="two"></button>
<ul>
<li>
<!--List 1-->
<div class="label">
text1
</div>
</li>
<li>
<!--List 2 is Same-->
<div class="label">
text1
</div>
</li>
<li>
<!--List 3 is different-->
<div class="label">
text2
</div>
</li>
</ul>
</div>
Script:
$('.label a').each(function() {
var $this=$(this);
$this.closest('li').addClass($this.text());
});
// Combine This
$('button').each(function(){
var liInd = 0;
var cl = '';
var txt = '';
var clses = [];
var ind = $('button').index($(this)) + 1;
$('li').each(function(){
if(clses.indexOf($(this).attr('class')) === -1){
clses.push($(this).attr('class'));
liInd = liInd + 1;
}
if(ind === liInd){
cl = $(this).attr('class');
txt = $(this).find('a').text();
return false; //break
}
});
$('button:nth-child(' + ind + ')').addClass(cl);
$('button:nth-child(' + ind + ')').text(txt);
});
See Example on Fiddle
I have tried this by add/remove class by click function, but problem is Buttons get class dynamically from List items, so I'm not able to target button.
Any suggestion for other way to do this by JS/ Jquery?

Here is an alternative solution
$('button').each(function () {
var liInd = 0;
var cl = '';
var txt = '';
var clses = [];
var ind = $('button').index($(this)) + 1;
$('li').each(function () {
if (clses.indexOf($(this).attr('class')) === -1) {
clses.push($(this).attr('class'));
liInd = liInd + 1;
}
if (ind === liInd) {
cl = $(this).attr('class');
txt = $(this).find('a').text();
return false; //break
}
});
if (txt != '') {
$('button:nth-child(' + ind + ')').addClass(cl);
$('button:nth-child(' + ind + ')').text(txt);
}
});
$('button').click(function () {
if ($(this).attr('class')[0] == 'all') {
showAll();
return false; // end this function
}
var allCls = $(this).attr('class').split(' ');
$('li').each(function () {
if (allCls.indexOf($(this).find('a').text()) > -1) {
$(this).closest('li').removeClass('show').addClass('hide');
} else {
$(this).closest('li').removeClass('hide').addClass('show');
}
});
});
function showAll() {
$('li').removeClass('hide').addClass('show');
}
Fiddle: https://jsfiddle.net/taleebanwar/yaLm4euk/13/

DEMO
$('.label a').each(function () {
var $this = $(this);
$this.closest('li').addClass($this.text());
});
// Combine This
$('button').each(function () {
var liInd = 0;
var cl = '';
var txt = '';
var clses = [];
var ind = $('button').index($(this)) + 1;
$('li').each(function () {
if (clses.indexOf($(this).attr('class')) === -1) {
clses.push($(this).attr('class'));
liInd = liInd + 1;
}
if (ind === liInd) {
cl = $(this).attr('class');
txt = $(this).find('a').text();
return false; //break
}
});
$('button:nth-child(' + ind + ')').addClass(cl);
$('button:nth-child(' + ind + ')').text(txt);
});
$(document).on('click', 'button',function(e){
var textClass = $.grep(this.className.split(" "), function(v, i){
return v.indexOf('text') === 0;
}).join();
console.log(textClass);
$('li').removeClass('show').addClass('hide')
$('li').each(function(){
if($(this).hasClass($.trim(textClass))){
$(this).removeClass('hide').addClass('show');
} else {
$(this).removeClass('show').addClass('hide');
}
})
})
.show{display:list-item;}
.hide{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="main-id">
<button class="one"></button>
<button class="two"></button>
<ul>
<li>
<!--List 1-->
<div class="label">
text1
</div>
</li>
<li>
<!--List 2 is Same-->
<div class="label">
text1
</div>
</li>
<li>
<!--List 3 is different-->
<div class="label">
text2
</div>
</li>
</ul>
</div>

how to link pagination to pagescroll in jquery?

I have created a carousel in javascript to show multiple contents either by using page scroll or by clicking a button. I have used viewpager.js for this purpose. I have added a pagination at the bottom which works fine when the buttons are clicked. I am unable to figure out how to link it to the page scroll. Any help is appreciated. My code:
HTML
<div id='prev'>
<button id="btn-prev"><img src='img/orange-towards-left.png'></button>
</div>
<div class='pager'>
<div class='pager_items' id='info'>
</div>
</div>
<div id='next'>
<button id="btn-next"><img src='img/orange-towards-right.png'></button>
</div>
<div id='pagination'>
<ul></ul>
</div>
JS
item_container = document.querySelector('.pager_items');
view_pager_elem = document.querySelector('.pager');
w = view_pager_elem.getBoundingClientRect().width;
items = payerAccArr.length;
item_container.style.width = (items * 100)+ '%';
var child_width = (100 / items) + '%';
var html = "";
document.getElementById('monthInfo').innerHTML=payerAccArr[0].DateKey + " Bill Amount ";
for (var i = 0; i < items; i++) {
html += "<div class=toggle><h4>Payer Account Name</h4> <ul> <li>" + payerAccArr[i].PayerAccountName +
"</li></ul> _______________ <ul><li> "+(payerAccArr[i].TotalAmount).toFixed(2) +
" USD</li> </ul></div>";
}
item_container.innerHTML = html;
for(var i=0;i<items;i++)
item_container.children[i].style.width = child_width;
var htmlStr='<li class="current"></li>';
for(var i=0;i<items-1;i++){
htmlStr += '<li></li>';
}
$('#pagination ul').html(htmlStr);
vp = new ViewPager(view_pager_elem, {
pages: item_container.children.length,
vertical: false,
onPageScroll : function (scrollInfo) {
offset = -scrollInfo.totalOffset;
invalidateScroll();
},
onPageChange : function (page) {
document.getElementById('monthInfo').innerHTML=payerAccArr[page].DateKey + " Bill Amount ";
}
});
window.addEventListener('resize', function () {
w = view_pager_elem.getBoundingClientRect().width;
invalidateScroll();
});
document.getElementById('btn-prev').addEventListener('click', function (){
vp.previous();
if(index>0){
createDoughnutChart(index--);
}
var li = jQuery("li.current");
if (li.length){
var $prev = li.prev();
if($prev.length == 0)
$prev = $("#pagination li").last().addClass("current");
li.removeClass("current");
$prev.addClass("current");
}
});
Similar code for the next button also has been written.

This issue got solved. I made a change to the onPageChange function by adding the following code. I am now able to link it to both the page scroll and the buttons.
JS:
onPageChange : function (page) {
document.getElementById('monthInfo').innerHTML=payerAccArr[page].DateKey + " Bill Amount ";
// console.log('page', page);
var li = $("li.current");
var curIndex = li.index();
if(li.length){
var $prev = li.prev();
var $next = li.next();
if(page == $prev.index()){
li.removeClass("current");
$prev.addClass("current");
}
if(page==$next.index()){
li.removeClass("current");
$next.addClass("current");
}
}
}

Cannot get file type input to clear

So i've looked at the other questions and I am too far along in my page to try something else. I have an input type of file and I am trying to clear it when the user decides that they do not want to use it. I have some other functionality that is set to show the file name, size, etc... based on the FILE API but for some reason I cannot get the input to clear. I am trying a few different ways to clear it but still nothing. Anyone see what I am doing wrong. I have a jQuery check to check the value of the input and it never clears. The only thing I can think of is that I am using the standard hide the input and using a link so I can actually style the file input button.
Here is the FIDDLE:
JS FIDDLE
Here is the HTML:
<div>
<label id="huf1-label">fileGroup 1</label>
<input type="file" id="fileElem" accept="image/*" style="display:none"
onchange="handleFiles(this.files)" name="file">
<a href="#" id="fileSelect" class="c1-button right gray" tabindex="0">Select
File to
Upload<span class="icon-checkmark"></span> </a>
</div>
<div>
<label id="huf1Btn-label">
<div class="fileInfoContainer">
<ul>
<li>
<div id="fileList" class="fileInfoContainer">
</div>
</li>
</ul>
</div>
</label>
<button id="removeFile1" class="c1-button red left-icon"
aria-controls="huf1">
<span class="icon-remove"></span><b> Cancel</b>
<span class="hidden">fileGroup 1</span>
</button>
<div class="filename"></div>
Here is the script:
window.URL = window.URL || window.webkitURL;
//BEGIN - fileSelect1 and handleFile
var fileSelect = document.getElementById("fileSelect"),
fileElem = document.getElementById("fileElem"),
fileList = document.getElementById("fileList");
fileSelect.addEventListener("click", function (e) {
if (fileElem) {
fileElem.click();
}
e.preventDefault(); // prevent navigation to "#"
}, false);
function handleFiles(files) {
if (!files.length) {
fileList.innerHTML = "<p></p>";
} else {
$('#fileList').empty().append();
var list = document.createElement("ul");
for (var i = 0; i < files.length; i++) {
var li = document.createElement("li");
list.appendChild(li);
var info = document.createElement("span");
info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
li.appendChild(info);
}
fileList.appendChild(list);
$("#removeFile1").click(function (event) {
event.preventDefault();
$("#fileList").empty();
$("#removeFile1").find('b').html('Cancel');
$('#fileElem').each(function() {
$(this).val();
});
document.getElementById("fileElem").value = "";
document.getElementById("fileSelect").value = "";
console.log('#fileList' + 'was deleted');
console.log('#fileElem' + 'was deleted I hope');
// console.log($(this)+'#fileList'.val());
});
}
};
$("#fileElem").change(function(){
if (this.val == "" ) {
$("#removeFile1").find('b').html('Cancel');
} else {
$("#removeFile1").find('b').html('Remove this file');
}
});
$(function() {
$("input:file").change(function (){
var fileName = $(this).val();
$(".filename").html(fileName);
});
});

I Corrected It this is the answer Try this....
The problem you are facing is this error...
Uncaught ReferenceError: handleFiles is not defined
So I canged it like this...
HTML
<div>
<label id="huf1-label">fileGroup 1</label>
<input type="file" id="fileElem" accept="image/*" style="display:none"
name="file">
<a href="#" id="fileSelect" class="c1-button right gray" tabindex="0">Select
File to
Upload<span class="icon-checkmark"></span> </a>
</div>
<div>
<label id="huf1Btn-label">
<div class="fileInfoContainer">
<ul>
<li>
<div id="fileList" class="fileInfoContainer">
</div>
</li>
</ul>
</div>
</label>
<button id="removeFile1" class="c1-button red left-icon"
aria-controls="huf1">
<span class="icon-remove"></span><b> Cancel</b>
<span class="hidden">fileGroup 1</span>
</button>
<div class="filename"></div>
</div>
SCRIPT
window.URL = window.URL || window.webkitURL;
//BEGIN - fileSelect1 and handleFile
var fileSelect = document.getElementById("fileSelect"),
fileElem = document.getElementById("fileElem"),
fileList = document.getElementById("fileList");
fileSelect.addEventListener("click", function (e) {
if (fileElem) {
fileElem.click();
}
e.preventDefault(); // prevent navigation to "#"
}, false);
$("#fileElem").change(function() {
var files=this.files;
if (!files.length) {
fileList.innerHTML = "<p></p>";
} else {
$('#fileList').empty().append();
var list = document.createElement("ul");
for (var i = 0; i < files.length; i++) {
var li = document.createElement("li");
list.appendChild(li);
var info = document.createElement("span");
info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
li.appendChild(info);
}
fileList.appendChild(list);
$("#removeFile1").click(function (event) {
event.preventDefault();
$("#fileList").empty();
$("#removeFile1").find('b').html('Cancel');
$('#fileElem').each(function() {
$(this).val();
});
document.getElementById("fileElem").value = "";
document.getElementById("fileSelect").value = "";
console.log('#fileList' + 'was deleted');
console.log('#fileElem' + 'was deleted I hope');
// console.log($(this)+'#fileList'.val());
});
}
});
$("#fileElem").change(function(){
if (this.val == "" ) {
$("#removeFile1").find('b').html('Cancel');
} else {
$("#removeFile1").find('b').html('Remove this file');
}
});
$(function() {
$("input:file").change(function (){
var fileName = $(this).val();
$(".filename").html(fileName);
});
});
JSFIDDLE LINK HERE
This is the Link for updated JSFIDDLE...

Jquery - Auto Increment ID's for Nested List

I have a nested list that resembles this:
<div id="treeview-left">
<ul>
<li>Country
<ul>
<li>Region
<ul>
<li>District
<ul>
<li>Group
<ul>
<li>People</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
This list is dynamically generated, and I need to auto increment ID's for each list item at each level.
Eg.
Country li's would have #Lv1-1 , #Lv1-2, #Lv1-3
Region li's would have #Lv2-1 , #Lv2-2, #Lv2-3
Each level needs to start with at 0 or 1, and increment the id based on it's index in that specific ul.
This is my current code, I am unable to even get the first level working.
<script>
$(function () {
$("#treeview-left > ul li").each(function () {
var TopPosition = $(this).index();
console.log(TopPosition);
$(this).id("Lvl1"+TopPosition);
});
});
</script>
Your help is appreciated.
Thanks

demo: https://so.lucafilosofi.com/jquery-auto-increment-ids-for-nested-list/
$(function () {
$("#treeview-left ul").each(function (i, item) {
var Tp = i + 1;
$(this).find('li').each(function (j, item) {
$(this).attr('id', "Lvl" + Tp + '-' + (j + 1));
});
});
});

here is a Recursive solution
function updateIds($node, index) {
if ($node.is('ul')) {
updateIds($node.children(), index);
} else {
$node.each(function (i, el) {
$(el).attr('id', 'Lv' + index + '-' + (i+1));
var $child = $node.children('ul');
if ($child.length > 0) {
updateIds($child, index+1);
}
});
}
}
demo: http://jsfiddle.net/3xpBw/1/

Another solution could be:Fiddle
<script type="text/javascript">
$(function () {
var count=0
$('ul').each(function(i, ul) {
count++
ul = $(ul);
var first=count
ul.children('li').each(function(i, li) {
li = $(li);
var second = first + '.' + (li.index() + 1);
li.prepend('<span>' + second + '</span>');
li.attr('id',second)
})
})
});
</script>