Search Results for '.isotope'

[Anonymous]

I found this thread: https://theme.co/apex/forums/topic/ajax-plugin-load-issues-with-themex/
Reading it makes me think they’re not very cooperative/helpful when it comes to “third party” plugins. 🙁

However I found out that masonry view in X theme makes use of an older version of Isotope: http://isotope.metafizzy.co/

This is how Isotope is called in index:

<?php x_get_view( 'global', '_script', 'isotope-index' ); ?>

  <div id="x-iso-container" class="x-iso-container x-iso-container-posts cols-<?php echo $cols; ?>">

And it is handled by _script-isotope-index.php:

<?php

// =============================================================================
// VIEWS/GLOBAL/_SCRIPT-ISOTOPE-INDEX.PHP
// -----------------------------------------------------------------------------
// Isotope script call for index output.
// =============================================================================

$is_rtl = is_rtl();

?>

<script>

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

    <?php if ( $is_rtl ) : ?>

      $.Isotope.prototype._positionAbs = function( x, y ) {
        return { right: x, top: y };
      };

    <?php endif; ?>

    var $container = $('#x-iso-container');

    $container.before('<span id="x-isotope-loading"><span>');

    $(window).load(function() {
      $container.isotope({
        itemSelector   : '.x-iso-container > .hentry',
        resizable      : true,
        filter         : '*',
        <?php if ( $is_rtl ) : ?>
          transformsEnabled : false,
        <?php endif; ?>
        containerStyle : {
          overflow : 'hidden',
          position : 'relative'
        }
      });
      $('#x-isotope-loading').stop(true,true).fadeOut(300);
      $('#x-iso-container > .hentry').each(function(i) {
        $(this).delay(i * 150).animate({'opacity' : 1}, 500);
      });
    });

    $(window).smartresize(function() {
      $container.isotope({  });
    });

  });

</script>

[Trevor]

Did the page builder come with the theme (is the theme ‘Mega’?), or is it a separate plugin from a third party author? Mega seems to have its own page builder included.

Do you place content on the page using widgets, and in those can you place shortcodes?

Are you able to place a widget with a shortcode directly above the portfolio grid, and if so, can you try this shortcode?

[searchandfilter id="1459" action="filter_next_query"]

Your grid might be using the masonry script as well, so it may be necessary to re-trigger the masonry script as well, using code like this:

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
    \\ your script to re-trigger masonry
  });
}(jQuery));
</script>

However, you would the help of your theme author to provide the code for that one line. It varies from theme to theme.

However, in your case I think reloaditems is the way to go, as shown on this page:

http://masonry.desandro.com/methods.html#reloaditems

So the line of script would be this:

$grid.masonry('reloadItems');

But, you need to define $grid, like this maybe:

jQuery('portfolio-container-style-1').masonry('reloadItems');

So you script might be (and I say MIGHT):

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
    jQuery('portfolio-container-style-1').masonry('reloadItems');
  });
}(jQuery));
</script>

However, it is also possible it uses the Isotope relayout function:

http://isotope.metafizzy.co/v1/demos/relayout.html

Like this:

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
    jQuery('portfolio-container-style-1').isotope('relayout');
  });
}(jQuery));
</script>

[Anonymous]

interesting question
after looking to ryan’s code, i managed to do this with this function

        $(".searchandfilter").on("sf:ajaxfinish",function(){
          var area = jQuery('.isotope-area');
          setTimeout(function() {
            area.isotope({
              itemSelector: '.column',
              masonry: {
                columnWidth: 1
              }
            });
          }, 150);
        });

If this can help somebody else…

[Ross]

Hey Ryan

Yeah this is a class selector – so it targets the search form on the page, and listens for an event on it – the Ajax events 🙂

The best place to add your code is in a JS file, normally in your theme – different themes use different ones but you should be able to guess which is your main JS file and add it in there – if you send me a link I can probably find out which file exactly?

And you’re right I misread your code it looks ok – there is a trailing , which needs to be removed otherwise it will break in IE8 (after the closing curly bracket after rowHeight: 230) – edited and removed below – but not really essential to the problem we are trying to resolve.

var $container = $('#sf-results-294');
// init
$container.isotope({
  // options
  itemSelector: '.item',
  layoutMode: 'cellsByRow',
    cellsByRow: {
  columnWidth: 190,
  rowHeight: 230
}
});

});

Thanks
Ross

[Anonymous]

I’m trying to use a layout script (Isotope) to display my results. When I add the code to the bottom of the results.php, it displays fine on the first page load but upon filtering the results, returns to normal styling. However, when I place my script inside the function from the FAQ, the javascript layout does not show on the initial page load nor after filtering and nothing is logged to the console either.

$(".searchandfilter").on("sf:ajaxstart",function(){
console.log("ajax start");
});

$(".searchandfilter").on("sf:ajaxfinish",function(){
console.log("ajax complete");

var $container = $('#sf-results-294');
// init
$container.isotope({
  // options
  itemSelector: '.item',
  layoutMode: 'cellsByRow',
    cellsByRow: {
  columnWidth: 190,
  rowHeight: 230
},
});

});

Any guidance?
Thanks