Filter, sort grid item
How do I make an filter, sort grid item?
What is a filter, sort grid item? How do you make a filter, sort grid item? This script and codes were developed by Parth Viroja on 03 September 2022, Saturday.
Filter, sort grid item - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>filter, sort grid item</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> .controls | Category : button.filter(data-filter='all') All button.filter(data-filter='.music') music button.filter(data-filter='.home') home | Favourite : button.sort(data-sort='myorder:asc') Asc button.sort(data-sort='myorder:desc') Desc - var i = 0 section.search-list - for (var i = 0; i < 10; i++) { if 0 == i % 4 article.item.mix.music(data-myorder="#{i}") div img(src="http://loremflickr.com/512/300/nature,wood=#{i}") else article.item.mix.home(data-myorder="#{i}") div img(src="http://loremflickr.com/512/300/nature,wood=#{i}") - } <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js?v=2.1.2'></script> <script src="js/index.js"></script>
</body>
</html>
Filter, sort grid item - Script Codes CSS Codes
*{ padding:0px; margin:0px; font:14px "Calibri"; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.controls{ padding:10px;
}
button{ border:0px; margin:4px; padding:4px 10px; cursor:pointer; font-weight:bold;
}
.grid{ padding:4px; color:#fff; background:#fff;
}
.grid:after{ content: ''; display: inline-block; width: 100%;
}
.item{ display:inline-block; float:left; padding:10px; width:33.3333%; display:none;
}
.item > div{ background:rgba(0,0,0,.1); color:#fff; font-size:2em; font-weight:lighter; /*border:1px dashed rgba(0,0,0,.4);*/ background-size:100% 100%;
}
.item img{ display:block; margin:0 auto; width:auto; max-width:100%; vertical-align:middle;
}
.category-2 > div{ background:rgba(0,0,0,0.2);
}
@media all and (max-width:768px){ .item{ width:50%; }
}
Filter, sort grid item - Script Codes JS Codes
$(function(){ $('.search-list').mixItUp();
});
Developer | Parth Viroja |
Username | parthviroja |
Uploaded | September 03, 2022 |
Rating | 3.5 |
Size | 2,592 Kb |
Views | 36,432 |
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!
Name | Size |
Dynamic Radial Menu Using Javascript | 3,008 Kb |
Form Wizard | 2,857 Kb |
Page load animation | 2,511 Kb |
Jquery Tree with checkbox | 6,287 Kb |
Right side menu tab with icon | 2,480 Kb |
Ripple Effect | 2,548 Kb |
Rotate Circle Pure Javascript | 2,896 Kb |
Upload Image Form | 2,689 Kb |
Responsive grid with filter, sort and layout | 2,993 Kb |
MY CV | 4,057 Kb |
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!
Name | Username | Size |
Faux column absolute wrapper | Yurimorini | 1,823 Kb |
Scroll using CSS | Casperovic | 2,159 Kb |
A Pen by Dalton Liu | Liudalton | 12,437 Kb |
NgEasyModal | Lorenzodianni | 4,159 Kb |
Local Weather App - FreeCodeCamp | TrevorWelch | 4,134 Kb |
Dribbble Inspired Registration Form | Lancebush | 2,358 Kb |
Pericles mi loro... | Judag | 4,125 Kb |
Drill-down Map | Good886 | 8,484 Kb |
Blockquote design | Sjmcpherson | 1,863 Kb |
Loader | MikitaLisavets | 3,321 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!