Sort Isotope

Developer
Nathan Gregg
Size
6,238 Kb
Views
6,072
  1. Sort Isotope Previews
  2. Sort Isotope HTML Codes
  3. Sort Isotope CSS Codes
  4. Sort Isotope JS Codes

How do I make an sort isotope?

Test. What is a sort isotope? How do you make a sort isotope? This script and codes were developed by Nathan Gregg on 25 December 2022, Sunday.

Sort Isotope Previews
IQ Test

Sort Isotope - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sort Isotope</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="its_a_page" id="filter_page">
<div class="filter_container">
<div class="track-container"> <ul class="tracks"></ul>
</div>
<div class="checkbox_container"> <input class="select-all x_filter" type="checkbox" name="select-all" value="select-all" id="select-all" /><label class="sel_all" for="select-all">select/unselect all</label> <hr> <div class="checkbox_group"> <p class="checkbox_title">genre<i id="chevron" class="fa fa-chevron-down"></i></p> </div> <div class="drop_menu" style="display:none"> <input class="x_filter" type="checkbox" name="genre" value=".electronic" id="electronic"/><label for="electronic">electronic</label> <input class="x_filter" type="checkbox" name="genre" value=".indie" id="indie"/><label for="indie">indie</label> <input class="x_filter" type="checkbox" name="genre" value=".lofi" id="lofi"/><label for="lofi">lo-fi</label> <input class="x_filter" type="checkbox" name="genre" value=".math" id="math"/><label for="math">math</label> </div> <hr> <div class="checkbox_group"> <p class="checkbox_title">style<i id="chevron" class="fa fa-chevron-down"></i></p> </div> <div class="drop_menu" style="display:none"> <input class="x_filter" type="checkbox" name="style" value=".texture" id="texture" /><label for="texture">texture</label> <input class="x_filter" type="checkbox" name="style" value=".riffs" id="riffs" /><label for="riffs">riffs</label> <input class="x_filter" type="checkbox" name="style" value=".noisy" id="noisy" /><label for="noisy">noisy</label> <input class="x_filter" type="checkbox" name="style" value=".space" id="space"/><label for="space">space</label> <input class="x_filter" type="checkbox" name="style" value=".crescendo" id="crescendo"/><label for="crescendo">crescendo</label> <input class="x_filter" type="checkbox" name="style" value=".no-beat" id="no-beat"/><label for="no-beat">no beat</label> <input class="x_filter" type="checkbox" name="style" value=".rhythmic" id="rhythmic"/><label for="rhythmic">rhythmic</label> <input class="x_filter" type="checkbox" name="style" value=".no-rhythm" id="no-rhythm"/><label for="no-rhythm">no rhythm</label> <input class="x_filter" type="checkbox" name="style" value=".fast" id="fast"/><label for="fast">fast</label> <input class="x_filter" type="checkbox" name="style" value=".slow" id="slow"/><label for="slow">slow</label> <input class="x_filter" type="checkbox" name="style" value=".quiet" id="quiet"/><label for="quiet">quiet</label> <input class="x_filter" type="checkbox" name="style" value=".distorted" id="distorted"/><label for="distorted">distorted</label> <input class="x_filter" type="checkbox" name="style" value=".song" id="song"/><label for="song">song</label> <input class="x_filter" type="checkbox" name="style" value=".loops" id="loops"/><label for="loops">loops</label> </div> <hr> <div class="checkbox_group"> <p class="checkbox_title">instrumentation<i id="chevron" class="fa fa-chevron-down"></i></p> </div> <div class="drop_menu" style="display:none"> <input class="x_filter" type="checkbox" name="instrumentation" value=".violin" id="violin"/><label for="violin">violin</label> <input class="x_filter" type="checkbox" name="instrumentation" value=".guitar" id="guitar"/><label for="guitar">guitar</label> <input class="x_filter" type="checkbox" name="instrumentation" value=".electronics" id="electronics"/><label for="electronics">electronics</label> </div> <hr> <div class="checkbox_group"> <p class="checkbox_title">emotion<i id="chevron" class="fa fa-chevron-down"></i></p> </div> <div class="drop_menu" style="display:none"> <input class="x_filter" type="checkbox" name="emotion" value=".dark" id="dark"/><label for="dark">dark</label> <input class="x_filter" type="checkbox" name="emotion" value=".happy" id="happy"/><label for="happy">happy</label> <input class="x_filter" type="checkbox" name="emotion" value=".sweet" id="sweet"/><label for="sweet">sweet</label> <input class="x_filter" type="checkbox" name="emotion" value=".spooky" id="spooky"/><label for="spooky">spooky</label> </div> <hr> <div class="checkbox_group"> <p class="checkbox_title">limit by artist<i id="chevron" class="fa fa-chevron-down"></i></p> </div> <div class="drop_menu" style="display:none"> <input class="select-all x-limit" type="checkbox" name="all_artists" value="all_artists" id="all_artists" /><label for="all_artists">show all artists</label> <input class="x_limit" type="checkbox" name="artist" value=".nathan" id="nathan"/><label for="nathan">Nathan</label> <input class="x_limit" type="checkbox" name="artist" value=".lypcyl" id="lypcyl"/><label for="lypcyl">Lypcyl</label> <input class="x_limit" type="checkbox" name="artist" value=".illness" id="illness"/><label for="illness">Illness</label> <input class="x_limit" type="checkbox" name="artist" value=".cousin" id="cousin"/><label for="cousin">Cousin</label> <input class="x_limit" type="checkbox" name="artist" value=".danamos" id="dan_amos"/><label for="dan_amos">Dan Amos</label> <input class="x_limit" type="checkbox" name="artist" value=".thesoberoptimists" id="the_sober_optimists"/><label for="the_sober_optimists">The Sober Optimists</label> <input class="x_limit" type="checkbox" name="artist" value=".elwoodgate" id="elwood_gate"/><label for="elwood_gate">Elwood Gate</label> <input class="x_limit" type="checkbox" name="artist" value="" id=""/><label for=""></label> </div> <hr> <div class="checkbox_group"> <p class="checkbox_title">limit by vocals<i id="chevron" class="fa fa-chevron-down"></i></p> </div> <div class="drop_menu" style="display:none"> <input class="x_limit_vox" type="checkbox" name="vocals" value=".vocals" id="vocals"/><label for="vocals">vocals</label> <input class="x_limit_vox" type="checkbox" name="vocals" value=".instrumental" id="instrumental"/><label for="instrumental">Instrumental</label> </div>
</div> <!-- END checkbox container -->
</div> <!-- END filter container -->
</div> <!-- END filter page --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Sort Isotope - Script Codes CSS Codes

* {padding: 0; margin: 0;}
body { font-family: 'Mallanna', sans-serif; font-size: 62.5% }
a { text-decoration: none;}
.hidden{ display: none;}
#whole_page { position: fixed; width: 100%; height: 100%; overflow: scroll;
}
#filter_page { position: absolute; width: 100%; height: auto; top: 0%;
}
.filter_container { width: 90%; margin: 0 auto; display: flex; flex-flow: row nowrap; justify-content: space-between;
}
/*---------------------------	Filter Checkboxes
---------------------------*/
.checkbox_container { display: flex; flex: 3; flex-flow: column nowrap; margin: 4px 10px; font-size: 2em;
}
.checkbox_container .checkbox_title{ color: #808080; font-weight: bold; margin-bottom: 3px;
}
.checkbox_container .drop_menu{ display: flex; flex-flow: row wrap;
}
.checkbox_container input[type="checkbox"] { display: none;
}
.checkbox_container label { position: relative; padding: 3px; margin: 3px; text-align: center; color: #808080; cursor: pointer; background: #F2F2F2; font-size: 0.8em;
}
label.sel_all { font-size: 1em;
}
.checkbox_container input[type="checkbox"]:not(:checked) ~ label:hover { top: -1px; left: -1px;
}
.checkbox_container input[type="checkbox"] + label:active,
.checkbox_container input[type="checkbox"]:checked + label { background: #D7D7D7; color: #6C6C6C;
}
.checkbox_container .fa-chevron-down{ float: right; transition: .2s;
}
.checkbox_container .chevron_rotate{ transform: rotate(-180deg);
}
.checkbox_container input.select-all + label{ display: block; width: 90%;
}
/*-------------------------------- Track boxes, Playlist boxes
--------------------------------*/
.track-container { flex: 7; margin: 0 10px;
}
ul.tracks {
}
li.trackbox { position: relative; width: 95%; height: 70px; padding: 5px; margin: 10px; list-style: none; border: 1px solid #999; overflow: hidden; display: flex; flex-flow: column-reverse nowrap; justify-content: space-between;
}
li.trackbox:hover { top: 1px; left: 1px;
}
.trackbox .artwork { position: absolute; right: 0px; top: -30px; color: #000;
}
.trackbox .artwork img { width: 200px !important; z-index: -10;
}
.trackbox .track_details { width: 100%; z-index: 10; display: flex; flex-flow: row nowrap; justify-content: flex-start;
}
.trackbox .track_details span { margin: 0 4px;
}
.trackbox .runtime { font-size: 1.5em;
}
.trackbox .track_name { font-weight: bold; font-size: 3em;
}
.trackbox .artist_name { font-size: 2em;
}
.trackbox .tag_details { width: 100%; height: 15px; font-size: 1.5em; overflow: hidden; opacity: 1;
}
.trackbox .matched {}
.trackbox .not_matched { color: #D3D3D3; text-decoration: line-through;
}
li.trackbox:hover .artwork {
}
.trackbox .icons { text-align: center; color: #000; opacity: 1;
}
.trackbox .icons i { padding: 0 3px; cursor: pointer;
}
.trackbox .icons i:hover { opacity: 0.7;
}
.trackbox input[type="checkbox"] { display: none;
}
.trackbox input[type=checkbox]:checked + label { color: red;
}
.trackbox .quote { z-index: 100;
}
.trackbox .go_to_album { width: 200px; left: 40px; color: #000; font-size: 3em; font-weight: bold;
}
.trackbox .go_to_album img { position: absolute; top: -30px; right: 0; height: 200px !important; width: 200px !important; z-index: -10; opacity: 0.5;
}

Sort Isotope - Script Codes JS Codes

var tracklist = [ { "index": 0, "track": "Myriad End Fade", "album": "Various", "artist": "Nathan", "tags": "electronic, electronics, rhythmic, texture", "vox": "instrumental", "runtime": "3:24", "waveform_url": "tracks/NATHAN-Myriad.wav", "artwork_url": "album_artworks/NATHAN_2.jpg", "description": "" }, { "index": 1, "track": "Bird Songs", "album": "Album No. 1", "artist": "Nathan", "tags": "electronic, electronics, sweet, quiet, no-beat", "vox": "instrumental", "runtime": "2:30", "waveform_url": "tracks/NATHAN-Birdsongs.wav", "artwork_url": "album_artworks/NATHAN_1.jpg", "description": "" }, { "index": 2, "track": "Violets", "album": "Album No. 1", "artist": "Nathan", "tags": "texture, abstract, no-beat", "vox": "instrumental", "runtime": "1:35", "waveform_url": "tracks/NATHAN-Violets.wav", "artwork_url": "album_artworks/NATHAN_2.jpg", "description": "" }, { "index": 3, "track": "Coffee Malts", "album": "Alternative Tunings For Regular People", "artist": "Cousin", "tags": "guitar-riffs, drums, band", "vox": "instrumental", "runtime": "3:59", "waveform_url": "tracks/COUSIN-Coffee_Malts.mp3", "artwork_url": "album_artworks/COUSIN_alternate.jpg", "description": "" }, { "index": 4, "track": "Someone Is Waiting For You", "album": "Thunderheart!", "artist": "Dan Amos", "tags": "noisy, distorted, song", "vox": "vocals", "runtime": "2:09", "waveform_url": "tracks/DAN_AMOS-Someone.mp3", "artwork_url": "", "description": "" }, { "index": 5, "track": "1", "album": "Live", "artist": "Elwood Gate", "tags": "guitar, fingerpicking, warm, rhythmic", "vox": "instrumental", "runtime": "3:57", "waveform_url": "tracks/ELWOOD_GATE-1.mp3", "artwork_url": "", "description": "" }, { "index": 6, "track": "Enfoote", "album": "Album No. 1", "artist": "Nathan", "tags": "electronic, electronics, texture, rhythmic, dark", "vox": "instrumental", "runtime": "5:50", "waveform_url": "tracks/NATHAN-Enfoote.wav", "artwork_url": "album_artworks/NATHAN_1.jpg", "description": "" }, { "index": 7, "track": "First Down", "album": "Bedroom Songs", "artist": "Lypcyl", "tags": "electronics, electronic, slow, heavy, dark, distorted", "vox": "instrumental", "runtime": "5:04", "waveform_url": "tracks/LYPCYL-First_Down.mp3", "artwork_url": "album_artworks/LYPCYL_aven.jpg", "description": "" }, { "index": 8, "track": "Thunderheart!", "album": "Thunderheart!", "artist": "Dan Amos", "tags": "song, band, distorted", "vox": "vocals", "runtime": "2:09", "waveform_url": "tracks/DAN_AMOS-Thunderheart.mp3", "artwork_url": "", "description": "" }, { "index": 9, "track": "Cleveland Police", "album": "Some Vegetable Waste", "artist": "Illness", "tags": "guitar, riffs, band, distorted", "vox": "instrumental", "runtime": "2:36", "waveform_url": "tracks/ILLNESS-Cleveland_Police.mp3", "artwork_url": "album_artworks/ILLNESS_svw.jpg", "description": "" }, { "index": 10, "track": "Come Around With Me", "album": "MEX - The Meaningless Exploration Of 'X'", "artist": "Dan Amos", "tags": "song, band, anthemic, guitar, drums", "vox": "vocals", "runtime": "2:38", "waveform_url": "tracks/DAN_AMOS-Come_Around.mp3", "artwork_url": "", "description": "" }, { "index": 11, "track": "I Live In A House", "album": "Demos", "artist": "The Sober Optimists", "tags": "cute, electronic, electronics, keyboard", "vox": "instrumental", "runtime": "3:34", "waveform_url": "tracks/SOBER_OPTIMISTS-I_Live_In_A_House.mp3", "artwork_url": "album_artworks/SOBER_five.gif", "description": "" }, { "index": 12, "track": "Ralf Tuck", "album": "Stuff", "artist": "Lypcyl", "tags": "electronic, electronics, dark, heavy, slow", "vox": "instrumental", "runtime": "6:42", "waveform_url": "tracks/LYPCYL-Ralf_Tuck.mp3", "artwork_url": "album_artworks/LYPCYL_aven.jpg", "description": "" }, { "index": 13, "track": "You The User", "album": "Some Vegetable Waste", "artist": "Illness", "tags": "guitar, riffs, drums, distortion", "vox": "instrumental", "runtime": "5:28", "waveform_url": "tracks/ILLNESS-You_The_User.mp3", "artwork_url": "album_artworks/ILLNESS_svw.jpg", "description": "" }, { "index": 14, "track": "Mondane New", "album": "Album No. 1", "artist": "Nathan", "tags": "electronic, electronics, strings", "vox": "instrumental", "runtime": "5:04", "waveform_url": "tracks/NATHAN-Mondane.wav", "artwork_url": "album_artworks/NATHAN_1.jpg", "description": "" }
];
function makeLibrary() { var i = 0, $ul_tracks = $('ul.tracks'); for (i = 0; i < tracklist.length; i++ ) { // for each object in tracklist var $tl_li = $('<li class="trackbox" id="tl_' + tracklist[i].index + '" data-index="' + tracklist[i].index + '"></li>'), $tl_taglist = $('<span class="taglist hidden">' + tracklist[i].tags + '</span>'), $tl_artwork = $('<div class="artwork"><img src="' + tracklist[i].artwork_url + '"></div>'), $tl_details = $('<div class="track_details"></div>'), $tl_details_p = $('<p class="track_details_p"></p>'), $tl_runtime = $('<span class="runtime">' + tracklist[i].runtime + '</span>'), $tl_track_name = $('<span class="track_name">' + tracklist[i].track + '</span>'), $tl_artist_name = $('<span class="artist_name">' + tracklist[i].artist + '</span>'); $tl_li .append($tl_artwork) .append($tl_taglist) .append($tl_details); $tl_details .append($tl_details_p); $tl_details_p .append($tl_runtime) .append($tl_track_name) .append($tl_artist_name); $ul_tracks.append($tl_li); // append it to ul }
}
makeLibrary();
var $container;
var filters = {};
$(function(){ $container = $('#container'); createContent(); var $filterDisplay = $('#filter-display'); $container.isotope(); // do stuff when checkbox change $('#options').on( 'change', function( jQEvent ) { var $checkbox = $( jQEvent.target ); manageCheckbox( $checkbox ); var comboFilter = getComboFilter( filters ); $container.isotope({ filter: comboFilter }); $filterDisplay.text( comboFilter ); });
});
function getComboFilter( filters ) { var i = 0; var comboFilters = []; var message = []; for ( var prop in filters ) { message.push( filters[ prop ].join(' ') ); var filterGroup = filters[ prop ]; if ( !filterGroup.length ) { // skip to next filter group if it doesn't have any values continue; } if ( i === 0 ) { comboFilters = filterGroup.slice(0); // copy to new array } else { var filterSelectors = []; var groupCombo = comboFilters.slice(0); // copy to fresh array // [ A, B ] for (var k=0, len3 = filterGroup.length; k < len3; k++) { // merge filter Groups for (var j=0, len2 = groupCombo.length; j < len2; j++) { filterSelectors.push( groupCombo[j] + filterGroup[k] ); // [ 1, 2 ] } } comboFilters = filterSelectors; // apply filter selectors to combo filters for next group } i++; } var comboFilter = comboFilters.join(', '); return comboFilter;
}
function manageCheckbox( $checkbox ) { var checkbox = $checkbox[0]; var group = $checkbox.parents('.option-set').attr('data-group'); var filterGroup = filters[ group ]; // create array for filter group, if not there yet if ( !filterGroup ) { filterGroup = filters[ group ] = []; } var isAll = $checkbox.hasClass('all'); if ( isAll ) { // reset filter group if the all box was checked delete filters[ group ]; if ( !checkbox.checked ) { checkbox.checked = 'checked'; } } var index = $.inArray( checkbox.value, filterGroup ); // index of if ( checkbox.checked ) { var selector = isAll ? 'input' : 'input.all'; $checkbox.siblings( selector ).removeAttr('checked'); if ( !isAll && index === -1 ) { filters[ group ].push( checkbox.value ); // add filter to group } } else if ( !isAll ) { filters[ group ].splice( index, 1 ); // remove filter from group if ( !$checkbox.siblings('[checked]').length ) { // if unchecked the last box, check the all $checkbox.siblings('input.all').attr('checked', 'checked'); } }
}
// FUNCTION one xbox to select all xboxes
$('#select-all').click(function(event) { if(this.checked) { // if 'select all' is checked $('.x_filter').each(function() { // iterate each checkbox this.checked = true; }); // set them to checked } if(!this.checked) { // if 'select all' is not checked $('.x_filter').each(function() { // iterate each checkbox this.checked = false; }); // set them all unchecked }
});
// FUNCTION select all artist xboxes
$('#all_artists').click(function(event) { if(this.checked) { // if 'select all' is checked $('.x_limit').each(function() { // iterate each checkbox this.checked = true; }); // set them to checked } if(!this.checked) { // if 'select all' is not checked $('.x_limit').each(function() { // iterate each checkbox this.checked = false; }); // set them all unchecked }
});
// FUNCTION Slide down/up tags menu
$('.checkbox_group').click(function(){ var $this = $(this); $this.find('i#chevron').toggleClass('chevron_rotate'); $this.next('div').slideToggle(200);
});
var $grid = $('.tracks').isotope({ itemSelector: '.trackbox', layoutMode: 'vertical', getSortData: { taglist: '.taglist' }
});
Sort Isotope - Script Codes
Sort Isotope - Script Codes
Home Page Home
Developer Nathan Gregg
Username nathansonic
Uploaded December 25, 2022
Rating 3
Size 6,238 Kb
Views 6,072
Do you need developer help for Sort Isotope?

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!

Nathan Gregg (nathansonic) Script Codes
Name
CWB logo js, time
Flexbox filter V2 from array
Color Swatch
CWB Trad Journal js
Scroll Horizontal, div to center V2
Artist Page Styling v5
CWB Risk Calc
Artist Page Styling v7 Isotope
Matching 2 Arrays
Logo Skews etc
Create amazing web content 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!