I’ve been battling with this for a few hours with no success. @rich_art, I’ve tried to follow your explanation but it is quite vague, any chance of expanding please?
I’ve been looking at http://isotope.metafizzy.co and http://vrieseveem.webflow.io using chromes’s developer tools and this just made everything even more confusing.
So far this is what I’ve done trying to recreate http://vrieseveem.webflow.io :
1-added the following code in Custom Code> Footer code:
<script>
// external js: isotope.pkgd.js
$( document ).ready( function() {
// init Isotope
var $container = $(‘.grid’).isotope({
itemSelector: ‘.grid-item’,
layoutMode: ‘fitRows’,
getSortData: {
name: ‘.name’,
symbol: ‘.symbol’,
number: ‘.number parseInt’,
category: ‘[data-category]’,
weight: function( itemElem ) {
var weight = $( itemElem ).find(‘.weight’).text();
return parseFloat( weight.replace( /[()]/g, ‘’) );
}
}
});
// filter functions
var filterFns = {
// show if number is greater than 50
numberGreaterThan50: function() {
var number = $(this).find(‘.number’).text();
return parseInt( number, 10 ) > 50;
},
// show if name ends with -ium
ium: function() {
var name = $(this).find(‘.name’).text();
return name.match( /ium$/ );
}
};
// bind filter button click
$(‘.filters’).on( ‘click’, ‘a’, function() {
var filterValue = $( this ).attr(‘data-filter’);
// use filterFn if matches value
filterValue = filterFns[ filterValue ] || filterValue;
$container.isotope({ filter: filterValue });
});
// bind sort button click
$(‘.sorts’).on( ‘click’, ‘a’, function() {
var sortByValue = $(this).attr(‘data-sort-by’);
$container.isotope({ sortBy: sortByValue });
});
// change is-checked class on buttons
$(‘.button-group’).each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( ‘click’, ‘a’, function() {
$buttonGroup.find(‘.is-checked’).removeClass(‘is-checked’);
$( this ).addClass(‘is-checked’);
});
});
});
2. created a div and named it “grid”
3. created 4 extra divs inside “grid” and named them “grid-item”
4. added 1 extra class to "grid item"s from the following selection: “alkali”, “transition” and “post-transition”
5. added custom attributes to the "grid item"s: data-category=“transition”, data-category="alkali"and data-category="post-transition
6. created 3 buttons with the class “button” and also added class “is-checked” to button 1
Button 1 labeled “show all” with custom attribute: data-filter=“*”
Button 2 labeled “metal” with custom attribute: data-filter=“.metal”
Button 3 labeled “transition” with custom attribute: data-filter=“.transition”
I publish my site and nothing happens when I click the buttons…Any help appreciated
edit: I just pasted the script into codepen and I get : Unexpected token <
No idea why, I’m not a developer, is this the cause?? if so how to resolve?