Filter divs only Javascript

Developer
Moncho Varela
Size
2,733 Kb
Views
44,528
  1. Filter divs only Javascript Previews
  2. Filter divs only Javascript HTML Codes
  3. Filter divs only Javascript CSS Codes
  4. Filter divs only Javascript JS Codes

How do I make an filter divs only javascript?

What is a filter divs only javascript? How do you make a filter divs only javascript? This script and codes were developed by Moncho Varela on 07 July 2022, Thursday.

Filter divs only Javascript Previews
IQ Test

Filter divs only Javascript - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Filter divs only Javascript</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul class="filter-links"> <li><a href="#">All</a></li> <li><a href="#">Javascript</a></li> <li><a href="#">Html</a></li> <li><a href="#">Css</a></li> <li><a href="#">Php</a></li>
</ul>
<div class="filter-sections"> <div class="javascript">Javascript</div> <div class="html">Html</div> <div class="php">Php</div> <div class="css">Css</div> <div class="javascript">Javascript</div> <div class="php">Php</div> <div class="html">Html</div> <div class="css">Css</div> <div class="javascript">Javascript</div> <div class="html">Html</div> <div class="php">Php</div> <div class="css">Css</div> <div class="javascript">Javascript</div> <div class="php">Php</div> <div class="html">Html</div> <div class="css">Css</div> <div class="javascript">Javascript</div> <div class="html">Html</div> <div class="html">Html</div> <div class="php">Php</div> <div class="css">Css</div> <div class="javascript">Javascript</div> <div class="php">Php</div> <div class="html">Html</div> <div class="javascript">Javascript</div> <div class="html">Html</div> <div class="php">Php</div> <div class="css">Css</div> <div class="javascript">Javascript</div> <div class="php">Php</div> <div class="html">Html</div> <div class="css">Css</div> <div class="javascript">Javascript</div> <div class="html">Html</div> <div class="php">Php</div> <div class="css">Css</div> <div class="javascript">Javascript</div> <div class="php">Php</div> <div class="html">Html</div> <div class="css">Css</div> <div class="javascript">Javascript</div> <div class="html">Html</div> <div class="html">Html</div> <div class="php">Php</div> <div class="css">Css</div> <div class="javascript">Javascript</div> <div class="php">Php</div> <div class="html">Html</div>
</div> <script src="js/index.js"></script>
</body>
</html>

Filter divs only Javascript - Script Codes CSS Codes

* { box-sizing: border-box;
}
html,
body { position: relative; height: 100%;
}
.filter-links { margin: 0; padding: 0; list-style: none; display: block; width: 100%; height:auto; overflow: hidden; background: white; border-bottom:1px solid #E4D7D7;
}
.filter-links li { display: inline; float: left;
}
.filter-links li a { display: block; color: black; padding: 1em 2em; text-decoration: none;
}
.filter-links li a:hover { color: red;
}
.filter-sections { width: 100%; display: block; overflow: hidden;
}
.filter-sections div { opacity: 0; display: none; min-height: 50px; margin: 0.5em; text-align: center; padding: 2em 1em; float: left; -webkit-transition: all 500s ease; transition: all 500s ease;
}
.view { display: block !important; opacity: 1 !important; -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); border-radius:4px; -webkit-animation: selected 300ms 1 ease-in-out; animation: selected 300ms 1 ease-in-out;
}
@-webkit-keyframes selected { 0% { border-radius:100%; -webkit-transform: scale(0) rotate(-180deg); transform: scale(0) rotate(-180deg); }
}
@keyframes selected { 0% { border-radius:100%; -webkit-transform: scale(0) rotate(-180deg); transform: scale(0) rotate(-180deg); }
}
.javascript{ background-color:yellow; color:black;
}
.html{ background:blue; color:white;
}
.css{ background:red; color:white;
}
.php{ background:brown; color:white;
}

Filter divs only Javascript - Script Codes JS Codes

/* Javascript filter
---------------------------------*/
// animate divs on start
var items = document.querySelectorAll('.filter-sections div');
animate(items);
// filter on click
each('.filter-links li a', function(el) { el.addEventListener('click', function(e) { e.preventDefault(); filterLinks(el); });
});
// filter links functions
function filterLinks(element) { // get text var el = element.textContent, // convert to lowercase linksTolowerCase = el.toLowerCase(); // if all remove all elements if (el === 'All') { // first show all view class each('.view', function(e) { e.classList.remove('view'); }); // no show init animation animate(items); } else { // if not click all remove all elements each('.view', function(e) { e.classList.remove('view'); }); } // show animation for current elements animate(document.querySelectorAll('.' + linksTolowerCase));
};
// forech arrays
function each(el, callback) { var allDivs = document.querySelectorAll(el), alltoArr = Array.prototype.slice.call(allDivs); Array.prototype.forEach.call(alltoArr, function(selector, index) { if (callback) return callback(selector); });
};
// animate function
function animate(item) { (function show(counter) { setTimeout(function() { item[counter].classList.add('view'); counter++; if (counter < item.length) show(counter); },50); })(0);
};
Filter divs only Javascript - Script Codes
Filter divs only Javascript - Script Codes
Home Page Home
Developer Moncho Varela
Username nakome
Uploaded July 07, 2022
Rating 4.5
Size 2,733 Kb
Views 44,528
Do you need developer help for Filter divs only Javascript?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Moncho Varela (nakome) Script Codes
Name
Captcha Colors experiment
Responsive table with json data.
Another webSQL
Get json with data attributes
Neo minimal theme
Calendar with json events mobile concept
Data uri converter
A Pen by Moncho Varela
Simple Calendar with json events
How to make spanish tortilla
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!