Trying to implement with animations and masonry

Anonymous

#49105

I’m trying to implement our search pages with masonry and related animations. What I’m wondering is whether there’s some javascript event that happens when a search submission happens (using the ajax version of your form).

Here’s a working version of the animation I’m trying to get to:
http://johnperezgraphics.flywheelsites.com/testimonials/

I’ve implemented the “news” page of the site to where on the initial load it works in the same way, but can’t seem to figure out how I could get the masonry to refire, so to speak, when new results are loaded.
http://johnperezgraphics.flywheelsites.com/category/news/

Anonymous

#49107

Well, I figured it out. ajaxSuccess seems to do exactly what I need!

Right now, I have duplicate code for document.ready and document.ajaxsuccess. Do you happen to know how to combine those?

Here’s what I have (which works fine, but is a lot of duplication):

jQuery(document).ready(function( $ ) {

new AnimOnScroll( document.getElementById( ‘grid’ ), {
minDuration : 0.4,
maxDuration : 0.7,
viewportFactor : 0.2
} );

});

jQuery(document).ajaxSuccess(function( $ ) {

new AnimOnScroll( document.getElementById( ‘grid’ ), {
minDuration : 0.4,
maxDuration : 0.7,
viewportFactor : 0.2
} );

});

Trevor

#49141

I need to run this by Ross and get back to you.

Trevor

#49318

Hi

You could make a function to do the stuff in the middle. And then call that within these. Also, look at our FAQ Page:

http://www.designsandcode.com/wordpress-plugins/search-filter-pro/faqs/

And see this code:

//detects when the ajax request has finished and the content has been updated
// - add scripts that apply to your results here
$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
	console.log("ajax complete");
	//so load your lightbox or JS scripts here again
});

Trevor

#49321

I forgot to say

Use the SF ajax on the FAQ page rather than ajaxSuccess

Anonymous

#49502

I am trying to do the same thing and am having trouble try to get masonry to work on ajax finish. Could you help me out?

Ross Moderator

#49545

Hey all

Jumping on these now for anyone having problems with Masonry…

So first thing to do is to get Masonry working when S&F is NOT using ajax – so disable ajax.

This is the same as applying Masonry to any html elements on a page, and it is not really S&F specific anymore – so its good to get this working on your pages before we attempt anything with ajax.

Once this is setup, can you share your masonry initialisation code here? (just the JavaScript code used for initialising Masonry / applying it to certain elements)

Once you do that, I’m sure I can recommend the correct code snippet to perform on an ajax request.

Thanks 🙂

Anonymous

#49599

I do have masonry working perfectly without ajax, and am having problems getting the console to log when ajax is start / finished.

Ross Moderator

#49602

Ok, can you share your masonry code here though as requested (Im’ assuming you’ve had to add some JS to initialise it?), just so we can get the code snippet right, and then we can work out where to put it.

Thanks

Anonymous

#49670

This is how I am pulling it in:

in the footer:
<script src="<?php echo get_bloginfo('template_directory');?>/library/js/masonry.pkgd.min.js"></script>

In the custom results page:

<script type="text/javascript">
 jQuery(window).load(function() {
// MASSONRY Without jquery
var container = document.querySelector('#ms-container');
 var msnry = new Masonry( container, {
itemSelector: '.ms-item',
columnWidth: '.ms-item',                
});  
});
</script>

I am also pulling in:
<script type="text/javascript" src="<?php echo get_bloginfo('template_directory');?>/library/js/sf-pro-ajax-events.js" type="text/javascript"></script>
which contains:

//detects the start of an ajax request being made
$(document).on("sf:ajaxstart", ".searchandfilter", function(){
  console.log("ajax start");
});

//detects when the ajax request has finished and the content has been updated
// - add scripts that apply to your results here
$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
	console.log("ajax complete");
	
	//so load your lightbox or JS scripts here again
});

//an event fired when S&F is initialised and S&F scripts have been loaded
$(document).on("sf:init", ".searchandfilter", function(){
	console.log("S&F JS initialised");
});

I can’t find anything in the console log that says anything.

[Author]

Posts