We Keep Coding

Isotope filter by tag href

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 ?

Reset select box isotope combination on reset button click

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/

Infinite scroll jumps to top of page

I'm using infinite scroll with masonry everything works fine and lines up correctly. I have a button that when i click it makes that div bigger and shows extra content. the button works and loads fine when the page initially loads but when i scroll down and infinite loads new items and if i click the button to show more it jumps to the top of the screen.
I'm guessing i have to do some callback? Im kinda confused on this. How should I approach it?
this is the code im using:
$(function(){
$(".fancybox").fancybox();
var $container = $('.main_containera');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.item1',
columnWidth: 0
});
});
var nextSelector = '.pagination-next a';
var origNextUrl = $(nextSelector).attr('href');
var offsetRegex = /(offset=)([0-9]+)/;
var offset = origNextUrl.match(offsetRegex)[2];
$container.infinitescroll({
navSelector : '.paginate', // selector for the paged navigation
nextSelector : '.pagination-next a', // selector for the NEXT link (to page 2)
itemSelector : '.item1', // selector for all items you'll retrieve
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/6RMhx.gif'
}
},
// trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
$('.comment_tr').click(function (e) {
$(this).toggleClass('disabled');
$(this).parent().parent().parent().find('form').slideToggle(250, function () {
$('.main_containera').masonry();
});
e.preventDefault();
});
});

Try changing
$('.comment_tr').click(function (e) {
$(this).toggleClass('disabled');
$(this).parent().parent().parent().find('form').slideToggle(250, function () {
$('.main_containera').masonry();
});
e.preventDefault();
});
to
$('.comment_tr').click(function (e) {
$(this).toggleClass('disabled');
$(this).parent().parent().parent().find('form').slideToggle(250, function () {
$('.main_containera').masonry();
});
e.preventDefault();
e.stopPropagation( );
});
The click event may be propagating up to another link element which has an empty href or one that returns the user to the same page which usually just takes you back to the top. Alternatively, you could replace e.preventDefault(); and e.stopPropagation(); with return false;.
It's hard to say for sure that that's the issue without seeing the HTML though.
Could you post the HTML if that change doesn't work?

Infinite Scroll with Isotope and filtering in Wordpress

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?

Object doesn't support this property or method 'isotope'

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>​]