Filter image based on navigation and Input field |
Filter image based on navigation and Input field |
Rads |
Jul 1 2020, 07:19 AM
Post
#1
|
Group: Members Posts: 1 Joined: 1-July 20 Member No.: 27,416 |
Hi,
Seeking your help. Given below is a code taken from Other sources. I tried however not able to amend it. I am trying for image gallery which will have 2 types of filters 1) Based on navigation 2) based on the content mentioned in the input box. Request you to please help <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } body { background-color: #f1f1f1; padding: 20px; font-family: Arial; } /* Center website */ .main { max-width: 1000px; margin: auto; } h1 { font-size: 50px; word-break: break-all; } .row { margin: 10px -16px; } /* Add padding BETWEEN each column */ .row, .row > .column { padding: 8px; } /* Create three equal columns that floats next to each other */ .column { float: left; width: 19.99%; display: none; /* Hide all elements by default */ } /* Clear floats after rows */ .row:after { content: ""; display: table; clear: both; } /* Content */ .content { background-color: white; padding: 10px; } /* The "show" class is added to the filtered elements */ .show { display: block; } /* Style the buttons */ .btn { border: none; outline: none; padding: 12px 16px; background-color: white; cursor: pointer; } .btn:hover { background-color: #ddd; } .btn.active { background-color: #666; color: white; } </style> </head> <body> <!-- MAIN (Center website) --> <div class="main"> <h1>MYLOGO.COM</h1> <hr> <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Content" title="Search"> <h2>PORTFOLIO</h2> <div id="myBtnContainer"> <button class="btn active" onclick="filterSelection('all')"> Show all</button> <button class="btn" onclick="filterSelection('nature')"> Nature</button> <button class="btn" onclick="filterSelection('cars')"> Cars</button> <button class="btn" onclick="filterSelection('people')"> People</button> </div> <!-- Portfolio Gallery Grid --> <div class="row mysrch"> <div class="column nature"> <div class="content"> <img src="Growth.png" alt="Mountains" style="width:100%"> <h4>Mountains</h4> <p>Lorem ipsum dolor..</p> </div> </div> <div class="column cars"> <div class="content"> <img src="CogWheel.png" alt="Lights" style="width:100%"> <h4>Lights</h4> <p>Lorem ipsum dolor..</p> </div> </div> <div class="column cars"> <div class="content"> <img src="Growth.png" alt="Nature" style="width:100%"> <h4>Forest</h4> <p>Lorem ipsum dolor..</p> </div> </div> <div class="column cars"> <div class="content"> <img src="CogWheel.png" alt="Car" style="width:100%"> <h4>Retro</h4> <p>Lorem ipsum dolor..</p> </div> </div> <div class="column cars"> <div class="content"> <img src="Growth.png" alt="Car" style="width:100%"> <h4>Fast</h4> <p>Lorem ipsum dolor..</p> </div> </div> <div class="column people"> <div class="content"> <img src="CogWheel.png" alt="Car" style="width:100%"> <h4>Classic</h4> <p>Lorem ipsum dolor..</p> </div> </div> <div class="column people"> <div class="content"> <img src="Offer.png" alt="Car" style="width:100%"> <h4>Girl</h4> <p>Lorem ipsum dolor..</p> </div> </div> <div class="column people"> <div class="content"> <img src="Offer.png" alt="Car" style="width:100%"> <h4>Man</h4> <p>Lorem ipsum dolor..</p> </div> </div> <div class="column people"> <div class="content"> <img src="Offer.png" alt="Car" style="width:100%"> <h4>Woman</h4> <p>Lorem ipsum dolor..</p> </div> </div> <!-- END GRID --> </div> <!-- END MAIN --> </div> <script> function myFunction() { var input, filter, div, p, i, txtValue; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); ul = document.getElementById("mysrch"); li = div.getElementsByTagName("p"); for (i = 0; i < li.length; i++) { a = li[i].getElementsByTagName("a")[0]; txtValue = a.textContent || a.innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { li[i].style.display = ""; } else { li[i].style.display = "none"; } } } </script> <script> filterSelection("all") function filterSelection© { var x, i; x = document.getElementsByClassName("column"); if (c == "all") c = ""; for (i = 0; i < x.length; i++) { w3RemoveClass(x[i], "show"); if (x[i].className.indexOf© > -1) w3AddClass(x[i], "show"); } } function w3AddClass(element, name) { var i, arr1, arr2; arr1 = element.className.split(" "); arr2 = name.split(" "); for (i = 0; i < arr2.length; i++) { if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];} } } function w3RemoveClass(element, name) { var i, arr1, arr2; arr1 = element.className.split(" "); arr2 = name.split(" "); for (i = 0; i < arr2.length; i++) { while (arr1.indexOf(arr2[i]) > -1) { arr1.splice(arr1.indexOf(arr2[i]), 1); } } element.className = arr1.join(" "); } // Add active class to the current button (highlight it) var btnContainer = document.getElementById("myBtnContainer"); var btns = btnContainer.getElementsByClassName("btn"); for (var i = 0; i < btns.length; i++) { btns[i].addEventListener("click", function(){ var current = document.getElementsByClassName("active"); current[0].className = current[0].className.replace(" active", ""); this.className += " active"; }); } </script> </body> </html> Attached File(s) Index_RepositoryTest.html ( 5.45k ) Number of downloads: 150 |
Lo-Fi Version | Time is now: 25th April 2024 - 12:43 PM |