Develop Reference

Combining 2 different, nested filters with Isotope

so i am playing around with the js-isotope library. works great so far, but have an issue on a specific task.
i have a grid which represents brands for clothing. the brands are organized by the starting letter.
so it looks like this: http://towa-online.at/sagmeister/marken/
i created 2 isotope-objects:
alphabet-grid: grid-items containing the list of brands
var $container_alphabet = $( '.sagmeister-brand-grid' ).isotope({
itemSelector: '.grid-item',
masonry: {
gutter: 40,
columnWidth: 320
},
filter : '*',
animationOptions: {
duration: 750,
easing : 'linear',
queue : false
}
});
brand-grid: each list inside an alphabet
var $container_brands = $( 'ul.brand-by-letter' ).isotope({
itemSelector : '.brand-name',
layoutMode : 'vertical',
filter : function(){
var $this = $( this );
var result_query = search_query ? $this.text().match( search_query ) : true;
var result_cat = search_cat ? $this.is( search_cat ) : true;
return result_query && result_cat;
},
animationOptions: {
duration: 750,
easing : 'linear',
queue : false
}
});
what i wanna do is, after filtering the brands ( that works fine ), i am checking on the "arrangeComplete"-event, if maybe some letters are emtpy. if so, i add a class "no-items" to the grid-item from the alphabet-grid and at the end i am triggering isotope for that.
$container_brands.on( 'arrangeComplete', function( event, filteredItems ){
var $grid_item = $( '#' + event.currentTarget.id ).parent();
var has_items = ( filteredItems.length > 0 );
if ( has_items ){
$grid_item.removeClass( 'no-items' ).addClass( 'has-items' );
} else {
$grid_item.removeClass( 'has-items' ).addClass( 'no-items' );
}
if ( $grid_item.is( ':last-child' ) )
$container_alphabet.isotope();
});
it seems that the triggering doesn't work every time, but just from time to time.
anyone thought on this one?

so, i was able to find a solution myself. thanks anyway, it helped me to describe the problem and have an another look at it :)
my solution was to alter the structure a little bit and then I put in a custom filter-function for the grid-items for the alphabet, which is checking if all children are filtered out or not. if so, hide the alphabet-item :)
nice start for the week, like that ^^
cheers
PS: if you need a more detailed explanation, feel free to ask. would be glad to help!

isotope plugin fails to load properly, and cuts off div

So if you check out: http://uniplaces.micrositesonline.info/blog/cities/ you'll see the isotope masonry plugin in action. The entire theme is from https://themetrust.com/demos/swell/. The issue is, on our site, the isotope plugin loads in a strange manner, the div that contains the masonry images fails to adjust the height properly and thus, it sometimes gets cut off. You can typically replicate this by reloading the page once it has loaded.
The code containing the js is in 'themetrust.js':
///////////////////////////////
// Project Filtering
///////////////////////////////
function projectFilterInit() {
if( jQuery('#filter-nav a').length > 0 ) {
jQuery('#filter-nav a').click(function(){
var selector = jQuery(this).attr('data-filter');
jQuery('#projects.thumbs').isotope({
filter: selector,
hiddenStyle : {
opacity: 0,
scale : 1
}
});
if ( !jQuery(this).hasClass('selected') ) {
jQuery(this).parents('#filter-nav').find('.selected').removeClass('selected');
jQuery(this).addClass('selected');
}
return false;
});
} // if() - Don't have this element on every page on which we call Isotope
}
///////////////////////////////
// Project thumbs
///////////////////////////////
function isotopeInit() {
setColumns();
gridContainer.isotope({
resizable: true,
layoutMode: 'masonry',
masonry: {
columnWidth: colW
}
});
jQuery(".thumbs .small").css("visibility", "visible");
}
///////////////////////////////
// Isotope Grid Resize
///////////////////////////////
function setColumns()
{
var columns;
var gw = gridContainer.width();
var ww = jQuery(window).width()
if(ww<=700){
columns = 1;
}else if(ww<=870){
columns = 2;
}else{
columns = 3;
}
colW = Math.floor(gw / columns);
jQuery('.thumbs .small').each(function(id){
jQuery(this).css('width',colW+'px');
});
jQuery('.thumbs .small').show();
}
function gridResize() {
setColumns();
gridContainer.isotope({
resizable: false,
layoutMode: 'masonry',
masonry: {
columnWidth: colW
}
});
}
///////////////////////////////
// Center Home Banner Text
///////////////////////////////
function centerHomeBannerContent() {
var bannerContent = jQuery('.home #banner-content');
var bannerContentTop = (windowHeightAdjusted/2) - (jQuery('.home #banner-content').actual('height')/2);
bannerContent.css('margin-top', bannerContentTop+'px');
bannerContent.show();
}
///////////////////////////////
// Initialize
///////////////////////////////
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery(".content-area").fitVids();
mmenu_nav();
jQuery('#video-background').height(windowHeight);
video_resize();
if(!isMobile()){
getVideoBGs();
}
jQuery('body').imagesLoaded(function(){
projectFilterInit();
isotopeInit();
centerHomeBannerContent();
});
jQuery(window).smartresize(function(){
gridResize();
//full_width_images();
video_resize();
mmenu_nav();
centerHomeBannerContent()
});
//Set Down Arrow Button
jQuery('#down-button').click(function(){
jQuery.scrollTo( ".middle", {easing: 'easeInOutExpo', duration: 1000} );
});
//pull_out_the_quote();
//full_width_images();
});
We've tried modifying it to no avail, removing and tweeking, but nothing seems to work. At this point we think it make be the css transition initialized by the class isotope-item, so we removed it, which seems to work but we are not entirely sure why. Is it possible to retain the transitions and get the isotope plugin to behave with them reliably?

WOOOO that theme is mental to say the least.
There are so many HTTP request's it's not surprising it's failing to load some scripts within the exec time.
Right because this is a theme and we don't want to mess about with stuff to much for updating sake's I would recommend using autoptomize
It will compress and conjoin all your scripts and css files into one nice neat and easy to download file so that no render blocking or partial loading occur's

Just reviewed your site on http://uniplaces.micrositesonline.info/blog/cities/, probably "jquery.isotope.js" file is missing on your directly. Make sure the presence of "jquery.isotope.js" at JS folder. lets try

Bad masonry element: null - using wordpress

I am writing a wordpress plugin in php. In that plugin I output pictures with a little text and want to do that with masonry.
When I initialize masonry in HTML, it seems to work, but the pictures overlap:
<div id="container" class="js-masonry" data-masonry-options='{ "columnWidth": 200, "itemSelector": ".item" }'>
Therefore I am trying to use "Imagesloaded" (by the same developer?).
But as I see it, before I can use ImagesLoaded I need to get Masonry up and running with javascript. When I initialize Masonry in my plugin_scripts.js I get an error on the frontend:
plugin_scripts.js:
jQuery(function() {
alert("hallo");
var container = document.querySelector('#container');
var msnry = new Masonry( container, {
// options
columnWidth: 200,
itemSelector: '.item'
});
});
Console Error in Frontend:
Bad masonry element: null
masonry.min.js?ver=3.1.2:1
q masonry.min.js?ver=3.1.2:1
d masonry.min.js?ver=3.1.2:1
(anonymous function) schnoogle_scripts_frontend.js?ver=3.9.2:10
j jquery.js?ver=1.11.0:2
k.fireWith jquery.js?ver=1.11.0:2
n.extend.ready jquery.js?ver=1.11.0:2
K jquery.js?ver=1.11.0:2
Can you help?

window.onload = function(){
//call masonry
}
You should load html before call masonry so query selector can find query

It looks like Masonry can't find your container for some reason. I assume you've tried the obvious, such as making sure #container is actually on the page.
If you're using jQuery (which you are), you can use jQuery's selector engine.
var $container = $('#container');
// initialize
$container.masonry({
columnWidth: 200,
itemSelector: '.item'
});
Ensure this is within a document.ready call, so that you're doing it after the rest of the page is ready.

if using vanilla js in WordPress, if you enqueue a script it's everywhere. to solve this I query to see if the element is on the page for initializing Masonry.
var masonry_element = document.querySelector( '.masonry' );
if( typeof( masonry_element ) != 'undefined' && masonry_element != null ){
var msnry = new Masonry( '.masonry', { ... } );
}

How to setup infinite scrolling with masonry?

I recently ran into some problems trying to setup Infinite scroll on my tumblr with masonry. I found some code, and it worked perfectly on the demo website: http://www.jquery4u.com/demos/infinite-scrolling-demo1/ But on my tumblr only the Masonry part works, but not the infinite scrolling part. Here is my Javascript:
<script>
$(function(){
var $container = $('SECTION');
$container.imagesLoaded(function () {
$container.masonry({
itemSelector: '.item',
columnWidth: '.item',
isFitWidth: true
});
});
$container.infinitescroll({
navSelector : '#page-nav', // selector for the paged navigation
nextSelector : '#nextPage', // selector for the NEXT link (to page 2)
itemSelector : '.item', // 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 });
msnry.appended( $newElems );
});
}
);
});
</script>
Here is the html for the next Page link:
{block:Pagination}
<nav id="page-nav">
{block:NextPage}
<a style="color:red;" id="nextPage" href="{NextPage}">Next</a>
{/block:NextPage}
</nav>
{/block:Pagination}
I do already have the Masonry, ImageLoaded, and Infinite Scrolling scripts linked. As I said, The masonry works fine, but the infinite scroll seems to be doing nothing at all. The next link is also working too, since I tested it and it does take me to the next page. But again the Infinite scrolling does nothing whatsoever. If anyone could help it would be very appreciated, or if you have any other suggestions or alternatives, that would also be nice.

Its hard to tell without a demo link, but looking at the example you used for reference:
msnry.appended( $newElems );
There should throw an error saying undefined. This is due to msnry.appended.
The line should be:
$container.masonry( 'appended', $newElems, true );
Source: http://www.jquery4u.com/demos/infinite-scrolling-demo1/

Is there any way to make two jQuery animations run (properly) simultaneously?

I have an event listener that calls two animation actions. Unfortunately their starts are staggered by a small amount (e.g. the first in the function starts first).
Does anyone know a way to properly sync them up?
Here's my code:
$("#nav ul li a").hover(
function(){
$(lastBlock).children("div").animate({width: "0px"}, { queue:false, duration:400, easing:"swing" });
$(this).children("div").animate({width: maxWidth+"px"}, { queue:false, duration:400, easing:"swing"});
lastBlock = this;
}
);
Because the first animation runs slightly before the second, it causes the overall width to become momentarily unequal, which looks a bit funky.

There was a recent disussion about this exact topic on the jQuery dev list. They created a few test cases you might wanna look at. Specially the Johns test.
Here's the discussion topic btw.

The trick is to have a single interval/callback in which all elements are updated.
You can find an example in my post here:
Can I implement a callback with each animation step in jQuery?
What you end up is basically:
var el1 = $("#element1");
var el2 = $("#element2");
var animation = new AnimationTimeline( {
easing: "swing"
, onstep: function( stepValue, animprops )
{
// This is called for every animation frame. Set the elements:
el1.css( { left: ..., top: ... } );
el2.css( { left: ..., top: ... } );
}
});
// And start it.
animation.start();