Search Results for '.isotope'

[Anonymous]

Hello,
to work with Uncode post grid module is necessary to call the js function “UNCODE.isotopeLayout();” that reloads the grid.
How I can call this function after form submit or auto-submit?
FacetWP for instance has a dedicated js function that works well: “$(document).on(‘facetwp-loaded’, function() {UNCODE.isotopeLayout();});”

Thanks

[Trevor]

So, with the help of the theme company (MOVEDO) this script fixes the Ajax issue:

(function ( $ ) {
 "use strict";
 $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
  GRVE.isotope.init();
  GRVE.basicElements.wooProduct();
  GRVE.basicElements.hovers();
  $('.grve-video, .grve-media').fitVids();
 });
}(jQuery));

[Trevor]

Ah, I see, he added this:

(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
		var isocontainer = $('.reinit-isotope'),
			iso_selector = $('.reinit-isotope').data('iso-selector');
			isocontainer.isotopeb('destroy');
			isocontainer.isotopeb({masonry: {columnWidth: iso_selector}, layoutMode:'fitRows', transitionDuration: '0.8s'});
            if(isocontainer.attr('data-fade-in') == 1) {
                var isochild = isocontainer.find('.kt_item_fade_in');
                    isochild.each(function(i){
                        $(this).delay(i*150).animate({'opacity':1},350);
                    });
            }
});
}(jQuery));

[Trevor]

The gaps thing. My basic script would look something like this:

(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
    var $container = $('.reinit-isotope'), iso_selector = $('.reinit-isotope').data('iso-selector');
    $container.isotopeb({masonry: {columnWidth: iso_selector}, transitionDuration: '0s'});
  });
}(jQuery));

It would have to be inside script tags or in the Simple Custom CSs and javascript plugin (which does the script tags for you).

[Anonymous]

Heard back from Ben:

I suggest adding this css:

#topbar-search form {
border: 1px solid #999;
}
#topbar-search .search-icon {
color: #444;
}
#topbar-search .form-search ::-webkit-input-placeholder {
color: #555;
}
#topbar-search .form-search ::-moz-placeholder {
color: #555;
}
#topbar-search .form-search :-ms-input-placeholder {
color: #555;
}
The search form file is searchform.php. It’s in the main folder of the theme.

Here is how you can re-load isotope on an event:

$(window).on(‘customEvent’, function( event ) {
var $container = $(‘.reinit-isotope’),
iso_selector = $(‘.reinit-isotope’).data(‘iso-selector’);
$container.isotopeb({masonry: {columnWidth: iso_selector}, transitionDuration: ‘0s’});
});
If you can tell me what event the plugin uses on a filter I can get you exactly what you need. Also, you could use a different search output that doesn’t use a grid if you like. That is controlled in your theme options > misc settings.

In a second response, he wrote:

Just thought of this. You don’t have to use the normal search. You can add any widget or shortcode into your topbar so if you don’t want to override files you can just add the plugins search shortcode into the topbar and turn off the search that is there.

Any suggestions?

[Anonymous]

I found a snippet pf code used for FacetWP, not sure if it would work for S&F or not but may help in getting this resolved.

<?php
// Add the following into functions.php
add_action( 'wp_footer', function() {
?>
<script>
(function($) {
    $(document).on('facetwp-loaded', function() {
        if (FWP.loaded) { // trigger only after the initial refresh
            $blogGrid = $( '.fusion-blog-layout-grid' );
			$blogGrid.imagesLoaded(function() {
				$items = $blogGrid.find( 'article' );
				$blogGrid.isotope( 'appended', $items ).isotope('layout');
			});
        }
     });
})(jQuery);
</script>
<?php
}, 100 );
?>

[Trevor]

I think the query simply makes the next posts available as a list/array of ID numbers.

If you are looking at isotope, others here have posted code snippets:

https://support.searchandfilter.com/forums/search/.isotope/

[Anonymous]

My blog with a filter is using Jquery Isotope for it’s layout. I’m using the infinite scroll feature to ajax load more posts.

		$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
			console.log('ajax complete');
	                $grid.isotope('reloadItems');
		});

Is there an array of the next posts to load so that I can the isotope append feature instead of reload? The reload method means the pages jumps whereas the append method just flows from the bottom of the last post.
https://isotope.metafizzy.co/v2/methods.html#appended

[Anonymous]

Hi Trevor!

I’m in a bit of trouble. I’m trying to use S&F to filter results on a page of items, which are drawn with the Isotope framework (original, not through a theme). You can view the page here if you’re interested: https://www.alloy.work/things .

Currently I’m at this stage, which kinda works. Except that it clears all items and redraws them where the current stage stopped.

$(document).on(“sf:ajaxfinish”, “.searchandfilter”, function(){
var alloyGrid = $(‘#grid’);
var elems = alloyGrid.children();
$grid.isotope( ‘appended’, elems, true ).isotope( ‘reloadItems’ );
});

In Isotope, the appended function works by giving it the newly drawn items as a parameter. This is where I am stuck, I need to use the array that is build by the S&F Ajax function when it is fired.

The next step is to get this working while filtering on the page, so if you might have any ideas concerning that…

Thanks already!

Kind regards

[Anonymous]

Hey Trevor,

I’ve been talking to theme.co support, and they provided me with the following code:

(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
     $('#x-isotope-loading').stop(true,true).fadeOut(300);
      $('#x-iso-container > .hentry').each(function(i) {
        $(this).delay(i * 150).animate({'opacity' : 1}, 500);
      });
    $("#x-iso-container").isotope({});
  });
}(jQuery));

This code finally solved my problem. I just wanted to leave it here in case anyone else looking for a solution may find it.

Thank you guys and happy holidays!

Clay