We Keep Coding

Setting up a search function on a webpage

Right, so I've managed to cobble together something that sort of works in terms of a search function within my webpage, however say I search for "Amethyst" it'll group "Placeholder1" into the search as well.
There's probably something very obvious that I'm missing here, but I'll put a small snippet of the code here, not enough to re-create but it's fairly straight forward.
var input = document.getElementById("myInput");
input.addEventListener("input", myFunction);
function myFunction(e) {
var filter = e.target.value.toUpperCase();
var list = document.getElementById("products");
var divs = list.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
var a = divs[i].getElementsByTagName("a")[0];
if (a) {
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
divs[i].style.display = "";
} else {
divs[i].style.display = "none";
}
}
}
}
<input type="text" id="myInput" placeholder="Search" onkeyup="myFunction()" style="font-size:20px; padding-left: 15px;">
<div id="products" class=" w3-row w3-grayscale" style="width:100%">
<div class="w3-col l3 s6">
<a href="#"><div class="w3-container">
<div class="w3-display-container">
<img src="C:\Users\Harrison Gobey\Downloads\Dice\amethyst1.png" style="width:100%">
<div class="w3-display-middle w3-display-hover">
</div>
</div>
<p>Amethyst<br>£45.00</p>
</div></a>
<a href="#"><div class="w3-container">
<div class="w3-display-container">
<img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
<div class="w3-display-middle w3-display-hover">
<button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button>
</div>
</div>
<p>Placeholder1<br>£0.00</p>
</div></a>
</div>
NOTE: This is not enough code to replicate anything, but I'm fairly certain the problem lies within this code.
If there's anything else you'd need to help that I've omitted then please let me know. Thanks!

The main issue here is that you're attempting to get the value of e.target.value.toUpperCase(), which is undefined. What you actually want is the uppercased value of myInput, since that's what you'll want to find in your HTML content.
Here's a refactor of your script using querySelector with your existing HTML content that will work (and a more efficient for loop). This code will only look at the paragraph tag that contains your description.
<script>
var input = document.getElementById("myInput");
input.addEventListener("input", myFunction);
function myFunction() {
var filter = document.getElementById("myInput").value.toUpperCase();
var paragraphs = document.querySelectorAll("#products div a p")
for (let i=0, p; p = paragraphs[i]; i++)
{
if (p.innerHTML.toUpperCase().indexOf(filter) > -1)
{
p.parentElement.parentElement.style.display = "block";
}
else
{
p.parentElement.parentElement.style.display = "none";
}
}
}
</script>

How to close modal when click outside Javascript

I am trying to close the modal when it's clicked outside. I have tried to loop through modals but can't get them to set its display to none.
Here is my HTML:
<div class="projects">
<div data-modal="modal1">
<div>
<p>Coffee</p>
</div>
<img src="img/coffee.png" alt="">
</div>
<div data-modal="modal2">
<div>
<p>Tea</p>
</div>
<img src="img/tea.png" alt="">
</div>
</div>
<div class="project-card" id="modal1">
<button class="close">X</button>
<div class="overlay">
<img src="img/coffee.png" alt="">
</div>
</div>
<div class="project-card" id="modal2">
<button class="close">X</button>
<div class="overlay">
<img src="img/tea.png" alt="">
</div>
</div>
Here is my code to open modals.
const coffeeGrounds = document.querySelectorAll('.projects > div[data-modal^=modal]');
for (var i = 0; i < coffeeGrounds.length; i++) {
coffeeGrounds[i].addEventListener('click', function () {
var x = this.getAttribute('data-modal');
var a = document.getElementById(x);
a.setAttribute('style','display:block');
});
}
Here is my code, when clicked outside to close the modal:
window.addEventListener('click',function(){
for(var i = 0; i<coffeeGrounds.length; i++){
var x = coffeeGrounds[i].getAttribute('data-modal');
var a = document.getElementById(x);
console.log(a);
if(a.style.display === 'block'){
a.setAttribute('style','display:none');
}
}
});
Over here by setting the modal display to none. It's holding back to display the modal also.
Please any help would be appreciated.
Codepen: https://codepen.io/zaidik/pen/bGwpzbE

When you click outside of the modal window you should not have the modal window in you event propagation array
In other words take advantage of event.path property
Working example (based on the provided fiddle)
window.addEventListener('click', function(e) {
const allModals = document.querySelectorAll('.project-card');
if (!e.path.some(x => x.className && x.className.includes('project-card'))) {
allModals.forEach(x => x.style.display = 'none');
}
}, true)
Working fiddle example: https://jsfiddle.net/7pzs1042/

How to control a single carousel in a page with more carousels?

I'am studying and experimenting with javascript and jquery*.
I'm creating an image slider, one works correctly, but when I decided to try to insert more than one on the same page, I realized that, of course, the controls to go to the next and previous images affect all the sliders on the page. I would like to click on one of them to check only the corresponding carousel ... do you have any advice to implement in my code? thank you very much.
I know there are better solutions before you kill me :)
HTML
<div class="slider">
<div class="images">
<img class="first active" src="https://source.unsplash.com/1600x900/?nature" alt="">
<img src="https://source.unsplash.com/1600x900/?water" alt="">
<img src="https://source.unsplash.com/1600x900/?food" alt="">
<img class="last" src="https://source.unsplash.com/1600x900/?business" alt="">
</div>
<div class="nav">
<div class="next">></div>
<div class="prev"><</div>
</div>
</div>
<div class="slider">
<div class="images">
<img class="first active" src="https://source.unsplash.com/1600x900/?nature" alt="">
<img src="https://source.unsplash.com/1600x900/?water" alt="">
<img src="https://source.unsplash.com/1600x900/?food" alt="">
<img class="last" src="https://source.unsplash.com/1600x900/?business" alt="">
</div>
<div class="nav">
<div class="next">></div>
<div class="prev"><</div>
</div>
</div>
```
-----
JS
-----
```
$('.next').on('click',function(){
goNext();
});
$('.prev').on('click',function(){
goPrev();
});
function goNext(){
var imgActive = $('img.active');
var imgNext = $('img.active').next();
if(imgActive.hasClass('last') == true){
imgActive.removeClass('active');
$('img.first').addClass('active');
} else{
imgActive.removeClass('active');
imgNext.addClass('active');
}
}
function goPrev(){
var imgActive = $('img.active');
var imgPrev = $('img.active').prev();
if(imgActive.hasClass('first') == true){
imgActive.removeClass('active');
$('img.last').addClass('active');
} else{
imgActive.removeClass('active');
imgPrev.addClass('active');
}
}
```

What you can do is call the parent slider instead of manipulating objects throughout the document.
I didn't test the code below but assuming your code works on all sliders, this should work as intended:
$('.next').on('click',function(){
goNext($(this));
});
$('.prev').on('click',function(){
goPrev($(this));
});
function goNext(control){
var slider = control.parents(".slider");
var imgActive = slider.find('img.active');
var imgNext = slider.find('img.active').next();
if(imgActive.hasClass('last') == true){
imgActive.removeClass('active');
slider.find('img.first').addClass('active');
} else{
imgActive.removeClass('active');
imgNext.addClass('active');
}
}
function goPrev(control){
var slider = control.parents(".slider");
var imgActive = slider.find('img.active');
var imgPrev = slider.find('img.active').prev();
if(imgActive.hasClass('first') == true){
imgActive.removeClass('active');
slider.find('img.last').addClass('active');
} else{
imgActive.removeClass('active');
imgPrev.addClass('active');
}
}

Event firing and can't avoid happening

I'm new with Javascript, and I'm developing a webapp. I'm using quojs, a library for tactil gestures, but my problem, I think, comes from my inexperience with Javascript. The app y basically, an images gallery that generates dinamically, and lets you interact with each image. On taphold, an interactive menu merges inside the image. On singleTap it should make 2 different actions depending if we are already in "taphold state" or not. If case is we ARE IN TAPHOLD, it showld ONLY desapear the interactive menu inside the image. Then, on the next singleTap (now WITHOUT TAPHOLD STATE), it showld go inside the image. For this, i'm actually using AJAX.
The taphold function is working fine, but the problem is that the tap action, keeps firing no matter what I try to put inside the code to administrate when it must trigger or not.
I know it's a bit difficult to explain and understand, but I couldnt find the solution yet...
Here are the files I'm using.
/////////////////////////////////////// TAP.JS ///////////////////////////////////////////////
$(document).ready(function(){
var quojs = $$(document);
isHold = false;
var all_spans = $$('#mainwrapper', 'div.showhide').hide(),
tapToShowImg = false;
var mobileMenu = $$('.footer-container', '#links-fix').hide();
var mainwrapper = $$('#mainwrapper');
var homeimgscont = $$('.homeimgscont');
var environment = $$.environment();
pinchedIn = true;
pinchedOut = false;
bottomMenu = false;
fullScrn = false;
if ($$.isMobile()) {
mobile = false;
if (environment.screen.width < 500) {
$$('.homeimgscont img.image').addClass('mobile');
mobile = true;
}
}else{
mobile = false;
}
/* SINGLE TAP */
$$('.homeimgscont div').on('singleTap', function(f) {
f.cancelBubble = true;
var allimgs =$$('.image');
console.log(f);
switch(isHold){
case true:
f.cancelBubble = true;
switch(fullScrn){
case true:
$$('.imgcont').show();
allimgs.removeClass('hiddenimgs');
break;
}
$$('.image').removeClass('blur').removeClass('blurmobile');
$$('.imgcont').removeClass('fullscrn');
$$('.homeimgscont .image').removeClass('tappedimg');
mobileMenu.hide();
bottomMenu = false;
all_spans.hide();
isHold = false;
break;
case false:
var singleImg = $$(this).children('.image');
var currentImgId = singleImg.attr('id');
$$('.homeimgscont .image').removeClass('tappedimg');
$$(this).children('.image').addClass('tappedimg');
tapToShowImg = true;
f.cancelBubble = true;
if (f.stopPropagation) f.stopPropagation();
$.ajax ({
type: 'POST',
data: {imgid: currentImgId, insingleimg: 'true', user: usr, usrid: usrid},
url: 'http://agus/home/imgtap.php',
success: function(data) {
$('#main').html(data);
}
});
break;
}
});
/* HOLD */
quojs.on('hold', '.homeimgscont .image', function(e) {
var allimgs =$$('.image');
var currentimg = $$(this);
var thisSpan = currentimg.parent().find('.insideimgmenu.showhide');
var showImgMenu = currentimg.parent().find('.imgmenu.showhide');
all_spans.hide();
switch(mobile){
case true:
if (homeimgscont.hasClass('pinchedin')) {
$$('.imgcont').hide();
currentimg.parent('.imgcont').addClass('fullscrn').show();
fullScrn = true;
}
allimgs.removeClass('blurmobile').removeClass('tappedimg');
currentimg.addClass('blurmobile');
isShowing = thisSpan.show(), showImgMenu.show();
break;
case false:
if (environment.screen.width < 500) {
$$('.imgcont').hide();
currentimg.parent('.imgcont').addClass('fullscrn').show();
fullScrn = true;
allimgs.removeClass('blur').removeClass('tappedimg').addClass('hiddenimgs');
currentimg.removeClass('hiddenimgs').addClass('blur');
isShowing = thisSpan.show(), showImgMenu.show();
}else{
allimgs.removeClass('blur').removeClass('tappedimg').addClass('hiddenimgs');
currentimg.removeClass('hiddenimgs').addClass('blur');
isShowing = thisSpan.show(), showImgMenu.show();
}
break;
}
isHold = true;
e.cancelBubble = true;
e.preventDefault();
e.stopPropagation();
});
});
////////////////////////// GALLERY.PHP //////////////////////////////////////////////////
<div id="mainwrapper" class="main wrapper clearfix">
<div id="flat" class="homeimgscont pinchedin">
<div class="imgcont one">
<img src="IMAGE">
<div class="imgmenu showhide animated fadeInWithOpacity" style="display: none;"></div>
<div class="insideimgmenu showhide animated fadeInUp" style="display: none;">
<span class="titleofpublic">Here goes the title of public.</span>
<div class="icons">
<a href="#myModalEgg1" data-toggle="modal" class="eggicon">
<img src="img/egg.png" alt="egg">
</a>
<a href="#myModalOTP1" data-toggle="modal" class="hearticon">
<img src="img/otp.png" alt="otp">
</a>
<a class="fingersicon" onclick="$(this).click(function(){ $(this).children('img').attr('src','img/hand-green.png'); });">
<img src="img/like.png" alt="like">
</a>
<a href="#myModalMsg1" data-toggle="modal" class="plainicon">
<img src="img/paperplane.png" alt="comment">
</a>
</div><!-- .icons -->
<div class="addedby">
<span class="addedby-span-text">Added By</span>
<span class="addedby-span-name">Rama</span>
<div class="addedby-div-img egg" style="background: url('http://imagizer.imageshack.com/100x100f/539/7p8ZeS.jpg') center no-repeat; background-size: cover;"></div>
</div>
</div><!--.insideimgmenu.showhide-->
</div><!--.imgcont-->
<div class="imgcont two">
<img src="IMAGE">
<div class="imgmenu showhide animated fadeInWithOpacity" style="display: none;"></div>
<div class="insideimgmenu showhide animated fadeInUp" style="display: none;">
<span class="titleofpublic">Here goes the title of public.</span>
<div class="icons">
<a href="#myModalEgg2" data-toggle="modal" class="eggicon">
<img src="img/egg.png" alt="egg">
</a>
<a href="#myModalOTP2" data-toggle="modal" class="hearticon">
<img src="img/otp.png" alt="otp">
</a>
<a class="fingersicon" onclick="$(this).click(function(){ $(this).children('img').attr('src','img/hand-green.png'); });">
<img src="img/like.png" alt="like">
</a>
<a href="#myModalMsg2" data-toggle="modal" class="plainicon">
<img src="img/paperplane.png" alt="comment">
</a>
</div><!-- .icons -->
<div class="addedby">
<span class="addedby-span-text">Added By</span>
<span class="addedby-span-name">Rama</span>
<div class="addedby-div-img egg" style="background: url('http://imagizer.imageshack.com/100x100f/539/7p8ZeS.jpg') center no-repeat; background-size: cover;"></div>
</div>
</div><!--.insideimgmenu.showhide-->
</div><!--.imgcont-->
</div><!--#flat.homeimgscont.pinchedin-->
</div><!-- #mainwrapper .main.wrapper.clearfix -->
As I said, the gallery im using is quojs, thats why im using $$ before some functions. For sure i'm making some basic mistakes with the javascript.
Thanks every help since now!!!

Firstly, try not use a switch for a boolean variable. A if/else statement is more adequate and intuitive in this case.
If you want to cancel the trigger, you can just use a return false;. This will get out of the function.

put display none on divs of similar

I have several divs one after anothr.. actually 10 of these.
I want a jquery solution such that it goes through the divs and whenever it finds any images that are similar , the whole div is not displayed or aka display:none is inserted in the css class. Similar divs can only stay adjacent to each other only according to the logic I have in my code. as in below
<div class="tops">
<div class="col-xs-2 topleaderBoardSB">
<p class="smallImages"><img class="img-circle img-responsive" src="32399/images/pics/AxlRose.png"> </p>
<p class="smallText">Axl<br>Roses</p>
</div>
<div class="col-xs-2 topleaderBoardSB">
<p class="smallImages"><img class="img-circle img-responsive" src="32399/images/pics/AxlRose.png"> </p>
<p class="smallText">Axl<br>Roses</p>
</div>
<div class="col-xs-2 topleaderBoardSB">
<p class="smallImages"><img class="img-circle img-responsive" src="32399/images/pics/Eminem.png"> </p>
<p class="smallText">Eminem</p>
</div>
<div class="col-xs-2 topleaderBoardSB">
<p class="smallImages"><img class="img-circle img-responsive" src="32399/images/pics/Eminem.png"> </p>
<p class="smallText">Eminem</p>
</div>
<div class="col-xs-2 topleaderBoardSB">
<p class="smallImages"><img class="img-circle img-responsive" src="32399/images/pics/artistA.png"> </p>
<p class="smallText">artistA</p>
</div>
<div class="col-xs-2 topleaderBoardSB">
<p class="smallImages"><img class="img-circle img-responsive" src="32399/images/pics/artistA.png"> </p>
<p class="smallText">artistB</p>
</div>
<div class="col-xs-2 topleaderBoardSB">
<p class="smallImages"><img class="img-circle img-responsive" src="32399/images/pics/artistA.png"> </p>
<p class="smallText">artistA</p>
</div>
<div class="col-xs-2 topleaderBoardSB">
<p class="smallImages"><img class="img-circle img-responsive" src="32399/images/pics/artistG.png"> </p>
<p class="smallText">artistG</p>
</div>
<div class="col-xs-2 topleaderBoardSB">
<p class="smallImages"><img class="img-circle img-responsive" src="32399/images/pics/artistH.png"> </p>
<p class="smallText">artistH</p>
</div>
<div class="col-xs-2 topleaderBoardSB">
<p class="smallImages"><img class="img-circle img-responsive" src="32399/images/pics/artistI.png"> </p>
<p class="smallText">artistI</p>
</div>
</div>
Also, no more than 5 div will be displayed. ANd if there are less than 5 divs after putting the display:none, then 5 divs will be displayed anyway aka last few display:none will not be there so that 5 divs are always displayed.
A jquery solution will be nice.

Check this out:
var images = [],
img,
count = 0;
$("img").filter(function(){
img = $(this).attr("src");
if($.inArray(img, images) < 0 && count < 5){
images.push(img);
count++;
return false;
}
return true;
}).closest($('div')).hide();
The way this works is that it basically grabs all the img tags on the page, then filters them based on whether or not their src attribute is unique. If it isn't, then it finds the parent div and hides it.
This is a little less-than-optimal because of $.inArray, so you could tweak that if it matters to you.
JSFiddle
EDIT: Now updated to limit to 5 results only.

A plain JS solution is:
function upTo(el, tagName) {
el = el && el.parentNode;
tagName = tagName.toLowerCase();
for ( ;el; el = el.parentNode) {
if (el.tagName && el.tagName.toLowerCase() == tagName) {
return el;
}
}
return null;
}
function hideSimilarImages() {
var image, images = document.images;
var sources = {};
var div;
for (var i=0, iLen=images.length; i<iLen; i++) {
image = images[i]
if (image.src in sources) {
div = upTo(image, 'div');
if (div && div.style) div.style.display = 'none';
} else {
sources[image.src] = '';
}
}
}
Edit
If you want to limit the number of images display, pass a value to the function and apply it when determining whether to hide the div or not:
function hideSimilarImages(limit) {
var image, images = document.images;
var sources = {};
var count = 0;
var div;
limit = typeof limit == 'undefined'? Infinity : --limit;
for (var i=0, iLen=images.length; i<iLen; i++) {
image = images[i]
if (image.src in sources || count > limit) {
div = upTo(image, 'div');
if (div && div.style) div.style.display = 'none';
} else {
sources[image.src] = '';
++count;
}
}
}
If the function isn't passed a value, it will show all unique images. Otherwise it will only show images up to the limit. If 0 is passed, it won't show any.