Flexbox filter V2 from array
How do I make an flexbox filter v2 from array?
This is the next version of the flexbox filtering idea. The content of the html is only built once, then the function filters from the DOM (as opposed to rebuilding every time a change occurs). This is useful if you are loading large content in each box, such as audio (what I plan to use it for) and video.. What is a flexbox filter v2 from array? How do you make a flexbox filter v2 from array? This script and codes were developed by Nathan Gregg on 25 December 2022, Sunday.
Flexbox filter V2 from array - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flexbox filter V2 from array</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="page-container">
<div class="filter-container"> <div class="checkbox-container"> <input type="checkbox" name="style" value="select-all" id="select-all" /> <label for="select-all">select all tags</label><hr> <input type="checkbox" name="style" value="sweet" id="sweet" /> <label for="sweet">sweet</label> <input type="checkbox" name="style" value="noisy" id="noisy" /> <label for="noisy">noisy</label> <input type="checkbox" name="style" value="no-beat" id="no-beat"/> <label for="no-beat">no beat</label> <input type="checkbox" name="style" value="texture" id="texture"/> <label for="texture">texture</label> <input type="checkbox" name="style" value="guitar-riffs" id="guitar-riffs"/> <label for="guitar-riffs">guitar riffs</label> <input type="checkbox" name="style" value="rhythmic" id="rhythmic"/> <label for="rhythmic">rhythmic</label> <input type="checkbox" name="style" value="no-rhythm" id="no-rhythm"/> <label for="no-rhythm">no rhythm</label> <input type="checkbox" name="style" value="vocals" id="vocals"/> <label for="vocals">vocals</label> <input type="checkbox" name="style" value="no-vocals" id="no-vocals"/> <label for="no-vocals">no vocals</label> <input type="checkbox" name="style" value="quiet" id="quiet"/> <label for="quiet">quiet</label> <input type="checkbox" name="style" value="instrumental" id="instrumental"/> <label for="instrumental">instrumental</label> </div>
</div>
<div class="container"> <ul class="track-container"></ul>
</div>
</div>
<!--
<li id="[i]" class="track"> <span class="taglist"></span> <p> <span class="track-name"></span> <span class="artist-name"></span> </p> <p class="tags"> <span id="matched[i]"></span><br> <span id="not_matched[i]"></span> </p>
</div>';
--> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.8.1/mustache.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Flexbox filter V2 from array - Script Codes CSS Codes
*{ font-family: 'Mallanna', sans-serif; paading: 0; margin 0;
}
hr{ width: 80%; background-color: lightgrey; border: 0 none; color: #999999; height: 1px;
}
.page-container{ width: 90%; margin: 0 auto;
}
.filter-container{ float: left; width: 15%; display: flex; flex-flow: column nowrap;
}
.checkbox-container{ display: flex; flex-flow: column nowrap;
}
input[type="text"] { width: 80%; margin-bottom: 10px;
}
input[type="checkbox"] { display: none;
}
input[type="checkbox"]:not(:checked) + label:hover { box-shadow: 0px 1px 3px;
}
input[type="checkbox"] + label:active,
input[type="checkbox"]:checked + label { box-shadow: 0px 0px 3px inset; background: lightgrey;
}
label { margin: 3px; background-color: #fff; width: 100%; text-align: center; border: 1px solid grey; border-radius: 5px; color: grey; cursor: pointer;
}
.container{ float: right; width: 80%; display: flex; flex-flow: column-reverse nowrap;
}
.track{ width: 100%; margin: 5px; padding: 15px; border: 1px solid grey; border-radius: 5px;
}
.p-right{ float: right;
}
.p-left{ float: left;
}
span.track-name{ font-size: 28px; color: gray;
}
span.artist-name{ font-size: 18px; color: lightgray;
}
p.tags{ color: grey;
}
span.matched{ font-size: 20px;
}
span.not_matched{ color: lightgrey; text-decoration: line-through;
}
.hidden{ display: none;
}
ul{ display: flex; flex-direction: column-reverse;
}
li{ list-style: none
}
.taglist{ display:none;
}
p.tags{ color: grey;
}
span.matched{ font-size: 20px;
}
span.not_matched{ color: lightgrey; text-decoration: line-through;
}
Flexbox filter V2 from array - Script Codes JS Codes
var tracklist = [ { "id": "1", "track": "Bird Songs", "artist": "Nathan", "tags": ["sweet", "quiet", "no-beat", "instrumental"], "runtime": "2:30", "waveform_url": "", }, { "id": "2", "track": "Violet End", "artist": "Nathan", "tags": ["texture", "abstract", "no-beat", "instrumental"], "runtime": "1:35", "waveform_url": "", }, { "id": "3", "track": "Coffee Malts", "artist": "Cousin", "tags": ["guitar-riffs", "drums", "no-vocals", "band"], "runtime": "1:35", "waveform_url": "", }, { "id": "4", "track": "Someone Is Waiting For You", "artist": "Dan Amos", "tags": ["vocals", "noisy", "distorted", "song"], "runtime": "1:35", "waveform_url": "", }
];
$(document).ready(function() {
// Declare VARIABLES
var checkbox_array = [], boxes = "";
// FUNCTION compares the two arrays checkboxes vs tags
Array.prototype.diff = function(taglist) { var tags_matched = [], tags_not_matched = []; this.sort(); taglist.sort(); for(var i = 0; i < this.length; i += 1) { if(taglist.indexOf( this[i] ) > -1){ tags_matched.push(" " + this[i]); }else{ tags_not_matched.push(" " + this[i]); } } return [tags_matched, tags_not_matched];
};
// FUNCTION to make track boxes and insert track
function makeBox() { for ( var i = 0; i < tracklist.length; i++ ) { var box = '<li id="' + tracklist[i].id + '" class="track">' + '<span class="taglist">' + tracklist[i].tags + '</span>' + '<p><span class="track-name">' + tracklist[i].track + '</span>' + '<span class="artist-name"> by ' + tracklist[i].artist + '</span></p>' + '<p class="tags"><span id="matched' + tracklist[i].id + '" class="matched"></span>' + '<span id="not_matched' + tracklist[i].id + '" class="not_matched"></span></p>' + '</li>'; $('ul.track-container').append(box); }
}
makeBox();
// FUNCTION to get arrays and order boxes
function orderBoxes() { $("span.taglist").each(function(i){ var id = i + 1; var taglist = $(this).text().split(","); var matches = checkbox_array.diff(taglist); var matched = matches[0]; $('#matched' + id).html(matched); var not_matched = matches[1]; $('#not_matched' + id).html(not_matched); var ordernumb = matches[0].length; $(this).parent().css({'order' : ordernumb}); });
}
// FUNCTION to execute whenever a checkbox changes
$('input:checkbox').change(function() { checkbox_array = []; $('input:checkbox:checked').each(function() { checkbox_array.push($(this).val()); // push matches to new array }); orderBoxes();
});
// SELECT ALL CHECKBOXES
$('#select-all').click(function(event) { if(this.checked) { // Iterate each checkbox $(':checkbox').each(function() { this.checked = true; }); } if(!this.checked) { // Iterate each checkbox $(':checkbox').each(function() { this.checked = false; }); }
});
});
Developer | Nathan Gregg |
Username | nathansonic |
Uploaded | December 25, 2022 |
Rating | 3 |
Size | 3,825 Kb |
Views | 6,072 |
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 |
CWB logo js, time | 3,531 Kb |
Logo Skews etc | 3,899 Kb |
Matching 2 Arrays | 2,101 Kb |
Flexbox filter V1 from array | 4,051 Kb |
Artist Page Styling v5 | 3,275 Kb |
HTML5 Audio example | 2,039 Kb |
CWB Table v4, Bootstrap-Table | 2,780 Kb |
CWB Trad Journal js | 4,941 Kb |
CWB Full V3 | 8,474 Kb |
CWB logo | 3,375 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 |
Pure CSS Spinners | Jlong | 2,043 Kb |
Basic HTML5 Structure | YuvarajTana | 1,289 Kb |
Base64 SVG Me | MrBambule | 44,786 Kb |
Parallax with only CSS | Thulioph | 2,297 Kb |
CSS Variables | Jdsteinbach | 4,759 Kb |
A Pen by Final Boss tommyb9 | FBtommyb9 | 55,354 Kb |
Sticky menu on scroll | Senff | 2,869 Kb |
Awesome textarea | Ayoungh | 1,977 Kb |
Scarlett Johansson Tribute Page | Diomed | 3,233 Kb |
SVG Basics | HipsterBrown | 1,852 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!