I've multiple select box filters to filter data using jQuery isotope. I want to reset all the combinations on a button click.
I've tried the following code to reset this; but it only shows all the data and actually not resetting the filter options;
$('.reset').on('click', 'button', function () {
$('.grid').isotope({
filter: '*',
});
});
I am using following code for the select box filter working;
var $grid = $('.grid').isotope({
itemSelector: '.element-item',
layoutMode: 'vertical'
});
var filters = {};
// filter buttons
$('.filters-button-group').on('change', 'select.filterfields', function () {
var $this = $(this);
var group = $this.attr('data-filter-group');
filters[ group ] = $this.find(':selected').attr('data-filter');
var isoFilters = [];
for ( var prop in filters ) {
isoFilters.push( filters[ prop ] )
}
var selector = isoFilters.join('');
$('.grid').isotope({ filter: selector });
return false;
});
Please help me to reset all the combination filters on a button click.
Your grid is linked to the dropdowns in your script but not vice versa, hence when you reset the grid filter the dropdowns are not reset.
you can reset the dropdowns explicitly by setting them to *.
JS CODE:
// filter buttons
$('.filters-button-group').on('change', 'select.filterfields', function () {
$('.informativeSection').hide();
var isoFilters = [];
$('.option-set').each(function () {
var filter = $(this).val();
if (filter !== '*') {
isoFilters.push($(this).find(':selected').attr('data-filter'));
}
});
var selector = isoFilters.join('');
console.log('selector:' + selector);
$('.grid').isotope({
filter: selector
});
//show no documents message
if ($('.grid').data('isotope').filteredItems.length === 0) { $('.informativeSection').show(); }
return false;
});
$('.reset').on('click', 'button', function () {
$('.grid').isotope({
filter: '*',
});
//reset the dropdowns explicitly
$('.option-set').val('*');
});
Edits:
I have updated the filtered logic as well to accommodate reset functionality.
Added a informative message when no documents found for given filter.
Live Demo # JSFiddle:http://jsfiddle.net/dreamweiver/kfk4jzkL/8/
Related
I'm using jquery isotope and the filter data work great by I also need to filter by href tags.
html
<a id="bmw" href="#bmw" data-filter=".bmw" class="btn btn-green">Bmw Car</a>
<a id="audi" href="#audi" data-filter=".audi" class="btn btn-green">Audi Car</a>
So when client enter in url : www.test.ro/#bmw It needs to filter only data for bmw car as is working when the button is clicked.
jquery
jQuery.noConflict()(function($)
{
var $container = $('#container-folio');
if ($container.length)
{
$container.waitForImages(function()
{
// initialize isotope
$container.isotope(
{
itemSelector: '.box',
layoutMode: 'fitRows'
});
// filter items when filter link is clicked
$('#filters a').click(function()
{
var selector = $(this).attr('data-filter');
$container.isotope(
{
filter: selector
});
$(this).removeClass('active').addClass('active').siblings().removeClass('active all');
return false;
});
}, null, true);
// hash code filter
$(window).load(function()
{
// Store # parameter and add "." before hash
var hashID = "." + window.location.hash.substring(1);
// console.log(hashID);
// the current version of isotope, the hack works in v2 also
if (hashID != '.form')
{
var $container = $('#container-folio');
$container.imagesLoaded(function()
{
$container.isotope(
{
itemSelector: ".box",
filter: hashID, // the variable filter hack
});
});
}
});
}
});
Tried the code above for filter hash but didn't worked, any ideas ?
Here is my JS fiddle that I am using to create expanding boxes for products:
http://jsfiddle.net/wpneily/vsnag7ja/
using this code:
var $container = $('#iso-container'),
$items = $('.item');
$container.isotope({
itemSelector: '.item',
masonry: {
columnWidth: 60
},
getSortData : {
selected : function( $item ){
// sort by selected first, then by original order
return ($item.hasClass('selected') ? -500 : 0 ) + $item.index();
}
},
sortBy : 'selected'
})
$items.click(function(){
console.log('ee')
var $this = $(this);
// don't proceed if already selected
var $previousSelected = $('.selected');
if ( !$this.hasClass('selected') ) {
$this.addClass('selected');
}
$previousSelected.removeClass('selected');
// update sortData for new items size
$container
.isotope( 'updateSortData', $this )
.isotope( 'updateSortData', $previousSelected )
.isotope();
});
$('.noclick').click(function(e){
console.log('dd')
e.stopPropagation();
});
This works great except, if a user scrolls down and picks one of the boxes below the current "open" selection, the new selection open out of view up above. In other words the new selected product box in not in focus. I want a selected box to not only open but also scroll the page to the top of the container, in this case, id="iso-container". Can anyone please help.
Try adding following code at end of your $item.click handler:
$('html,body').animate({scrollTop: $("#iso-container").offset().top}, 'slow');
Updated your fiddle
I am trying to make isotope works with filter the same elements but by two ways, one is filter by links and the other filter by buttons like a carrusel. The links will filter the subgrups, I have 4 groups plus the all elements, and when I click each one just want to show the first two elements of the group and by the left right arrow buttons the next and before elements. I made the group filter works but the carrusell I dont know why I cant...Thanks if anyone can help me with an example.
var related = $(this.options.itemsBlock);
if (related) {
var isoFilter = new Isotope(related, {
itemSelector: '.item',
layoutMode: 'fitRows',
sortAscending: {
name: true,
datesusc: false
}
});
if (isoFilter) {
var buttons = $$('#filters a');
buttons.addEvent('click', function (e) {
e = new Event(e);
e.stop();
var dataFilter = this.get('data-filter');
isoFilter.arrange({
filter: dataFilter
});
});
var selectors = $$(this.options.selectorButtons);
if (selectors) {
selectors.removeEvents('click');
selectors.addEvent('click', function (e) {
e = new Event(e);
e.stop();
var dataFilter1 = '.g1-item-1'; // Just an example of the next two element from the first group
isoFilter.arrange({ filter: dataFilter1 });
});
}
}
I have searched just about every forum out there and found several ways to make a Isotope masonry layout with filtering work with Infinite Scroll running Wordpress. And none of them seem to be giving me what I'm looking for.
At the moment I got the Masonry layout working, with filtering. When I implement Infinite Scroll it loads the content underneath the other content, a pretty common issue working with Isotope and Infinite scroll. However, when applying the .appended method in order to sort the newly loaded posts into my site, it messes up my whole layout.
I suspect I'm not entering the .appended line at the right place. Here's my js without the .append:
$(function () {
var $page = $('#page')
});
$(function () {
var $container = $('#content'),
filters = {},
// get filter from hash, remove leading '#'
filterSelector = window.location.hash.slice(1);
$container.imagesLoaded(function () {
// bind isotope to window resize
$(window).smartresize(function () {
// jQuery has issues with percentage widths
// so we'll manually calulate it
var colW = Math.floor($container.width() * 0.49);
$container.isotope({
});
// trigger resize so isotope layout is triggered
}).smartresize();
});
$('#nav a').click(function () {
// store filter value in object
// i.e. filters.color = 'red'
var $this = $(this),
name = $this.attr('data-filter-name'),
value = $this.attr('data-filter-value'),
isoFilters = [],
filterName, prop;
filters[ name ] = value;
for (prop in filters) {
isoFilters.push(filters[ prop ]);
}
var filterSelector = isoFilters.join('');
// trigger isotope if its ready
if ($container.data('isotope')) {
$container.isotope({filter: filterSelector});
}
window.location.hash = filterSelector;
// toggle highlight
$this.parents('ul').find('.selected').removeClass('selected');
$this.parent().addClass('selected');
return false;
});
// if there was a filter, trigger a click on the
// corresponding option
if (filterSelector) {
var selectorClasses = filterSelector.split('.').slice(1);
$.each(selectorClasses, function (i, selectorClass) {
$('#nav a[data-filter-value=".' + selectorClass + '"]').click();
});
}
$container.isotope({
itemSelector: '.box',
filter: filterSelector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
});
#nav being my menu, #content being my container, and .box being my posts.
Could anyone advise me as to where I need to insert the .appended command?
I've problem with my website. I'm getting webpage error on IE8/9:
Object doesn't support this property or method 'isotope' Line: 47 Char: 3 Code: 0
Here's code:
/*-----------------------------------------------------------------------------------
/*
/* Custom JS
/*
-----------------------------------------------------------------------------------*/
/* Start Document */
jQuery(document).ready(function($) {
/*----------------------------------------------------*/
/* Responsive Menu
/*----------------------------------------------------*/
// Create the dropdown bases
$("<select />").appendTo("#navigation");
// Create default option "Go to..."
$("<option />", {
"selected": "selected",
"value" : "",
"text" : "Menu"
}).appendTo("#navigation select");
// Populate dropdowns with the first menu items
$("#navigation li a").each(function() {
var el = $(this);
$("<option />", {
"value" : el.attr("href"),
"text" : el.text()
}).appendTo("#navigation select");
});
//make responsive dropdown menu actually work
$("#navigation select").change(function() {
window.location = $(this).find("option:selected").val();
});
/*----------------------------------------------------*/
/* Isotope Portfolio Filter
/*----------------------------------------------------*/
$(function() {
var $container = $('#portfolio-wrapper');
// initialize Isotope
$container.isotope({
// options...
resizable: false, // disable normal resizing
// set columnWidth to a percentage of container width
masonry: { columnWidth: $container.width() / 12 }
});
// update columnWidth on window resize
$(window).smartresize(function(){
$container.isotope({
// update columnWidth to a percentage of container width
masonry: { columnWidth: $container.width() / 12 }
});
});
$container.isotope({
itemSelector : '.portfolio-item'
});
var $optionSets = $('#filters .option-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('.option-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
// make option object dynamically, i.e. { filter: '.my-filter-class' }
var options = {},
key = $optionSet.attr('data-option-key'),
value = $this.attr('data-option-value');
// parse 'false' as false boolean
value = value === 'false' ? false : value;
options[ key ] = value;
if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
// changes in layout modes need extra logic
changeLayoutMode( $this, options )
} else {
// otherwise, apply new options
$container.isotope( options );
}
return false;
});
});
/*----------------------------------------------------*/
/* Back To Top Button
/*----------------------------------------------------*/
var pxShow = 300;//height on which the button will show
var fadeInTime = 400;//how slow/fast you want the button to show
var fadeOutTime = 400;//how slow/fast you want the button to hide
var scrollSpeed = 400;//how slow/fast you want the button to scroll to top. can be a value, 'slow', 'normal' or 'fast'
jQuery(window).scroll(function(){
if(jQuery(window).scrollTop() >= pxShow){
jQuery("#backtotop").fadeIn(fadeInTime);
}else{
jQuery("#backtotop").fadeOut(fadeOutTime);
}
});
jQuery('#backtotop a').click(function(){
jQuery('html, body').animate({scrollTop:0}, scrollSpeed);
return false;
});
/* End Document */
})();
What's wrong?
You need to define isotope function. Only then you can call it. I don't think isotope() is a built-in function.
In the below example, I am adding a function test() on h1 element and then calling it.
$('h1')
[<h1>Hello</h1>]
var a = $('h1')
a.test = function() {console.log(this);}
a.test()
[<h1>Hello</h1>]