Databases
StackOverflow2013
Postsdbo
POInfinite Scroll with Isotope and filtering in Wordpress
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POInfinite Scroll with Isotope and filtering in Wordpress
    primarykey
    data
    text
    <p>I have searched just about every forum out there and found several ways to make a Isotope masonry layout with filtering work with Infinite Scroll running Wordpress. And none of them seem to be giving me what I'm looking for.</p> <p>At the moment I got the Masonry layout working, with filtering. When I implement Infinite Scroll it loads the content underneath the other content, a pretty common issue working with Isotope and Infinite scroll. However, when applying the <a href="http://isotope.metafizzy.co/docs/methods.html#appended" rel="nofollow">.appended method</a> in order to sort the newly loaded posts into my site, it messes up my whole layout. </p> <p>I suspect I'm not entering the .appended line at the right place. Here's my js without the <code>.append</code>:</p> <pre><code>$(function () { var $page = $('#page') }); $(function () { var $container = $('#content'), filters = {}, // get filter from hash, remove leading '#' filterSelector = window.location.hash.slice(1); $container.imagesLoaded(function () { // bind isotope to window resize $(window).smartresize(function () { // jQuery has issues with percentage widths // so we'll manually calulate it var colW = Math.floor($container.width() * 0.49); $container.isotope({ }); // trigger resize so isotope layout is triggered }).smartresize(); }); $('#nav a').click(function () { // store filter value in object // i.e. filters.color = 'red' var $this = $(this), name = $this.attr('data-filter-name'), value = $this.attr('data-filter-value'), isoFilters = [], filterName, prop; filters[ name ] = value; for (prop in filters) { isoFilters.push(filters[ prop ]); } var filterSelector = isoFilters.join(''); // trigger isotope if its ready if ($container.data('isotope')) { $container.isotope({filter: filterSelector}); } window.location.hash = filterSelector; // toggle highlight $this.parents('ul').find('.selected').removeClass('selected'); $this.parent().addClass('selected'); return false; }); // if there was a filter, trigger a click on the // corresponding option if (filterSelector) { var selectorClasses = filterSelector.split('.').slice(1); $.each(selectorClasses, function (i, selectorClass) { $('#nav a[data-filter-value=".' + selectorClass + '"]').click(); }); } $container.isotope({ itemSelector: '.box', filter: filterSelector, animationOptions: { duration: 750, easing: 'linear', queue: false, } }); }); </code></pre> <p><code>#nav</code> being my menu, <code>#content</code> being my container, and <code>.box</code> being my posts.</p> <p>Could anyone advise me as to where I need to insert the <code>.appended</code> command?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USMariusT
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. POInfinite Scroll with Isotope and filtering in Wordpress
      1. USDamien
      1. VTFavorite
    2. VO
      singulars
      1. POInfinite Scroll with Isotope and filtering in Wordpress
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThe .appended method is not meant to work with sorting and filtering, see documentation; also, the documentation discourages using infinite scroll with filtering and sorting for some good reasons ;) http://isotope.metafizzy.co/docs/help.html#infinite_scroll_with_filtering_or_sorting
      singulars
      1. POInfinite Scroll with Isotope and filtering in Wordpress
      1. USSystembolaget
    2. COSee the authors opinion on combining filtering/sorting with infinite scroll. He also advices to use the insert method instead of the appended method in a case like this. http://isotope.metafizzy.co/docs/help.html#infinite_scroll_with_filtering_or_sorting
      singulars
      1. POInfinite Scroll with Isotope and filtering in Wordpress
      1. USdontmentionthebackup
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload