Forums › Forums › Search & Filter Pro › Trying to implement with animations and masonry
- This topic has 13 replies, 4 voices, and was last updated 8 years, 3 months ago by Anonymous.
-
Anonymous(Private) June 22, 2016 at 12:38 am #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(Private) June 22, 2016 at 12:50 am #49107Well, 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(Private) June 23, 2016 at 11:48 pm #49318Hi
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 });
Ross Moderator(Private) June 27, 2016 at 6:18 pm #49545Hey 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 🙂
Ross Moderator(Private) June 28, 2016 at 11:30 am #49602Ok, 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(Private) June 28, 2016 at 5:36 pm #49670This 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.
-
AuthorPosts