Quicksand plugin using multiple filters

Reageren: Quicksand plugin using multiple filters

9 years ago

I managed to get it to work.... almost, the one thing not working is when both criteria have a selection

Edit: code was faulty and not relevant, so removed it

danieltulp

Reageren: Quicksand plugin using multiple filters

9 years ago

just figured out how to do it, I have included a working sample of the principle as an attachment for your enjoyment, feel free to respond

attached example is with 3 dropdown select boxes

Online example can be found here: http://www.danieltulp.nl/work/quicksand-multiple.htm

// attempt to call Quicksand on every form change
                $('select').change(
                    function() {
                        if ($($filterAlpha).val() == '0'){
                            if ($($filterBeta).val() == '0'){
                                var $filteredData = $data.find('div');
                            } else {
                                var $filteredData = $data.find('div[data-beta=' + $($filterBeta).val() + ']' );
                            }
                        } else {
                            if ($($filterBeta).val() == '0'){
                                var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' );
                            } else {
                                var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' + 'div[data-beta=' + $($filterBeta).val() + ']');
                            }
                        }

                        // finally, call quicksand
                        $applications.quicksand($filteredData, {
                            duration: 1000,
                            easing: 'easeInOutQuad'
                    });
                });

Attachments

quicksand-multiple.zip
Size : 28.91 KB Downloads : 4228 Download

underlircs

Re: Reageren: Quicksand plugin using multiple filters

9 years ago

Hi Daniel, thank you for your script. Any idea why it's not picking up the radio button values correctly?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl" >
<head>
<title>Quicksand with multiple criteria</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script src="jquery-1.4.1-and-plugins.min.js" type="text/javascript"></script>
<script src="jquery.quicksand.min.js" type="text/javascript"></script>
<script src="http://www.danieltulp.nl/work/jquery.easing.1.3.js" type="text/javascript"></script>
<script type="text/javascript">
// DOMContentLoaded
$(function() {
// bind dropdowns in the form
var $filterAlpha = $('#filters input[name="alpha"]');
var $filterBeta = $('#filters input[name="beta"]');
var $filterGamma = $('#filters input[name="gamma"]');
// get the first collection
var $applications = $('#applications');
// clone applications to get a second collection
var $data = $applications.clone();
// attempt to call Quicksand on every form change
$('#filters').change(
function() {
$(this).addClass('animate');
alert('filterAlpha = '+$($filterAlpha+':checked').val() + ' ' + 'filterBeta = '+$($filterBeta+':checked').val() + ' ' + 'filterGamma = '+$($filterGamma+':checked').val());
if ($($filterAlpha+':checked').val() == '0'){
if ($($filterBeta+':checked').val() == '0'){
if ($($filterGamma+':checked').val() == '0'){
//0-0-0
var $filteredData = $data.find('div');
} else {
//0-0-1
var $filteredData = $data.find('div[data-gamma=' + $($filterGamma+':checked').val() + ']' );
}
} else {
if ($($filterGamma+':checked').val() == '0'){
//0-1-0
var $filteredData = $data.find('div[data-beta=' + $($filterBeta+':checked').val() + ']' );
} else {
//0-1-1
var $filteredData = $data.find('div[data-beta=' + $($filterBeta+':checked').val() + ']' + 'div[data-gamma=' + $($filterGamma+':checked').val() + ']');
}
}
} else {
if ($($filterBeta+':checked').val() == '0'){
if ($($filterGamma+':checked').val() == '0'){
//1-0-0
var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha+':checked').val() + ']' );
} else {
//1-0-1
var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha+':checked').val() + ']' + 'div[data-gamma=' + $($filterGamma+':checked').val() + ']');
}
} else {
if ($($filterGamma+':checked').val() == '0'){
//1-1-0
var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha+':checked').val() + ']' + 'div[data-beta=' + $($filterBeta+':checked').val() + ']');
} else {
//1-1-1
var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha+':checked').val() + ']' + 'div[data-beta=' + $($filterBeta+':checked').val() + ']' + 'div[data-gamma=' + $($filterGamma+':checked').val() + ']');
}
}
}
// finally, call quicksand
$applications.quicksand($filteredData, {
duration: 1000,
easing: 'easeInOutQuad',
adjustHeight: 'auto'
});
});
});
</script>
<style type="text/css">
div.animate {float:left; padding:30px; display:block; border:1px dotted; margin:15px; text-align:left;}
</style>
</head>
<body>
<form id="filters">
<input type="radio" name="alpha" value="0" checked>All items
<input type="radio" name="alpha" value="1">Pepper
<input type="radio" name="alpha" value="2">Apple
<input type="radio" name="beta" value="0" checked>All colours
<input type="radio" name="beta" value="1">Red
<input type="radio" name="beta" value="2">Green
<input type="radio" name="gamma" value="0" checked>All places
<input type="radio" name="gamma" value="1">Couche
<input type="radio" name="gamma" value="2">Table
</form>
<div id="applications" class="image-grid">
<div class="animate" data-id="id-1" data-alpha="2" data-beta="1" data-gamma="1">
Apple<br />Red<br />Couche
</div>
<div class="animate" data-id="id-2" data-alpha="1" data-beta="1" data-gamma="2">
Pepper<br />Red<br />Table
</div>
<div class="animate" data-id="id-3" data-alpha="1" data-beta="2" data-gamma="1">
Pepper<br />Green<br />Couche
</div>
<div class="animate" data-id="id-4" data-alpha="2" data-beta="1" data-gamma="1">
Apple<br />Red<br />Couche
</div>
<div class="animate" data-id="id-5" data-alpha="1" data-beta="2" data-gamma="2">
Pepper<br />Green<br />Table
</div>
<div class="animate" data-id="id-6" data-alpha="1" data-beta="1" data-gamma="1">
Pepper<br />Red<br />Couche
</div>
<div class="animate" data-id="id-7" data-alpha="1" data-beta="2" data-gamma="2">
Pepper<br />Green<br />Table
</div>
<div class="animate" data-id="id-8" data-alpha="1" data-beta="2" data-gamma="1">
Pepper<br />Green<br />Couche
</div>
<div class="animate" data-id="id-9" data-alpha="1" data-beta="1" data-gamma="2">
Pepper<br />Red<br />Table
</div>
<div class="animate" data-id="id-10" data-alpha="2" data-beta="1" data-gamma="1">
Apple<br />Red<br />Couche
</div>
<div class="animate" data-id="id-11" data-alpha="2" data-beta="2" data-gamma="2">
Apple<br />Green<br />Table
</div>
<div class="animate" data-id="id-12" data-alpha="2" data-beta="2" data-gamma="2">
Apple<br />Green<br />Table
</div>
<div class="animate" data-id="id-13" data-alpha="1" data-beta="1" data-gamma="2">
Pepper<br />Red<br />Table
</div>
</div>
</body>
</html>

philboss

Re: Quicksand plugin using multiple filters

8 years ago

Does anyone know how to adjust this script to include an extra "sort" category??

Current - http://shopfield.com.au/quicksand.html (working example)
Revised - http://shopfield.com.au/quicksand-update.html (not working - most popular with sort addition)

I have also added the following script:

<script>

$(document).ready(function(){ $("#content img").hover( function() { $(this).stop().animate({"opacity": "0.1"}, "medium"); }, function() { $(this).stop().animate({"opacity": "1"}, "slow"); }); });

</script>

which enables the hover fade on the shop lists on page load but once a filter is applied it no longer works... any ideas here would be greatly appreciated :)

takehiko_..

Re: Quicksand plugin using multiple filters

8 years ago

Hi, I need help.

I'm trying to add one more filter to the example, but not me
working,

I'm doing that and see if you can pagination the result.

But the most important thing is to add one more filter for
in the example

// DOMContentLoaded

$(function() {

// bind dropdowns in the form

var $filterAlpha = $('#filter select[name="alpha"]');

var $filterBeta = $('#filter select[name="beta"]');

var $filterGamma = $('#filter select[name="gamma"]');

var $filterDelta = $('#filter select[name="delta"]');

// get the first collection

var $applications = $('#applications');

// clone applications to get a second collection

var $data = $applications.clone();

// attempt to call Quicksand on every form change

$('select').change(

function() {

$(this).addClass('animate');

if ($($filterAlpha).val() == '0'){

if ($($filterBeta).val() == '0'){

if ($($filterGamma).val() == '0'){

if ($($filterDelta).val() == '0'){

//0-0-0

var $filteredData = $data.find('div');

} else {

//0-0-1

var $filteredData = $data.find('div[data-gamma=' + $($filterGamma).val() + ']' );

}

} else {

if ($($filterGamma).val() == '0'){

//0-1-0

var $filteredData = $data.find('div[data-beta=' + $($filterBeta).val() + ']' );

} else {

//0-1-1

var $filteredData = $data.find('div[data-beta=' + $($filterBeta).val() + ']' + 'div[data-gamma=' + $($filterGamma).val() + ']');

}

} else {

if ($($filterBeta).val() == '0'){

if ($($filterGamma).val() == '0'){

//1-0-0

var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' );

} else {

//1-0-1

var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' + 'div[data-gamma=' + $($filterGamma).val() + ']');

}

} else {

if ($($filterGamma).val() == '0'){

//1-1-0

var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' + 'div[data-beta=' + $($filterBeta).val() + ']');

} else {

//1-1-1

var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' + 'div[data-beta=' + $($filterBeta).val() + ']' + 'div[data-gamma=' + $($filterGamma).val() + ']');

}

} else {

if ($($filterAlpha).val() == '0'){

if ($($filterBeta).val() == '0'){

if ($($filterGamma).val() == '0'){

//1-0-0-0

var $filteredData = $data.find('div[data-delta=' + $($filterdelta).val() + ']' );

} else {

//1-0-0-1

var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' + 'div[data-delta=' + $($filterdelta).val() + ']');

}

} else {

if ($($filterGamma).val() == '0'){

//1-0-1-0

var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' + 'div[data-gamma=' + $($filterGamma).val() + ']');

} else {

//1-0-1-1

var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' + 'div[data-gamma=' + $($filtergamma).val() + ']' + 'div[data-delta=' + $($filterdelta).val() + ']');

}

} else {

//1-1-1-0

var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' + 'div[data-beta=' + $($filterbeta).val() + ']' + 'div[data-gamma=' + $($filtergamma).val() + ']');

}

} else {

//1-1-1-1

var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' + 'div[data-beta=' + $($filterbeta).val() + ']' + 'div[data-gamma=' + $($filtergamma).val() + ']'+ 'div[data-delta=' + $($filterdelta).val() + ']');

}

// finally, call quicksand

$applications.quicksand($filteredData, {

duration: 1000,

easing: 'easeInOutQuad',

adjustHeight: 'auto'

});

</script>

form id="filter">
      <select name="alpha">
         <option value="0">All items</option>
         <option value="1">Pepper</option>
         <option value="2">Apple</option>
      </select>
      <select name="beta">
         <option value="0">All colours</option>
         <option value="1">Red</option>
         <option value="2">Green</option>
      </select>
      <select name="gamma">
         <option value="0">All places</option>
         <option value="1">Couche</option>
         <option value="2">Table</option>
      </select>
   <select name="delta">
         <option value="0">All places</option>
         <option value="1">Black</option>
         <option value="2">White</option>
      </select>
</form>

Sorry my English is very bad..

tommarques

Re: Quicksand plugin using multiple filters

8 years ago

I can't get it how i can use checkboxes instead of select tags. I tried (almost) everything, but didn't work! Any help would be much appreciated

pretty1

Re: Quicksand plugin using multiple filters

7 years ago

Hello,

Instead of opening the page to “all” how do I change to open to category? Like instead of opening to “Everything” Open to “Applications”? Please help meeee