infinitescroll is not a function

Resolved

(@netthemes)

Hey guys,

I tried to use the infinite scroll with masonry on my category page to display all posts. I activated it in my functions.php and my javascript looks like this:

jQuery(function($){

    var $container = $('#container');
    $container.masonry({
        itemSelector: '.grid-item',
        columnWidth: 450,
        gutter: 50,
      });

    $container.imagesLoaded(function(){
      $container.masonry();
    });

    $container.infiniteScroll({
      navSelector  : '#page-nav',    // selector for the paged navigation 
      nextSelector : '#page-nav a.next-post',  // selector for the NEXT link (to page 2)
      itemSelector : '.grid-item',     // selector for all items you'll retrieve
      loading: {
          speed: 0,
        }
      },
      // trigger Masonry as a callback
      function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
          // show elems now they're ready
          $newElems.animate({ opacity: 1 });
          $container.masonry( 'appended', $newElems, true ); 
        });
      }
    );

  });

The infinite scroll works, but the posts are overlapping. On the console I get this error:

TypeError: $container.infiniteScroll is not a function

I think that’s the reason why the posts are overlapping. Do you have a solution for fixing this bug? Thanks a lot

This topic was modified 6 years, 6 months ago by netthemes.

Viewing 11 replies - 1 through 11 (of 11 total)

Plugin Author Jeremy Herve
(@jeherve)

Jetpack Mechanic 🚀

6 years, 6 months ago

I would recommend that you follow the recommendations here to implement Infinite Scroll with Masonry:
https://wptheming.com/2013/04/jetpack-infinite-scroll-masonry/

That should help.

Thread Starter netthemes
(@netthemes)

6 years, 6 months ago

I already tried all three solutions before, but none of them works.

Plugin Author Jeremy Herve
(@jeherve)

Jetpack Mechanic 🚀

6 years, 6 months ago

Could you tell me more about what doesn’t work? Do you get any specific errors?

Thread Starter netthemes
(@netthemes)

6 years, 6 months ago

On the category page I tried to display my posts with masonry and infinite scroll from jetpack. When I open the category page the masonry effects works fine. But if I scroll down and new posts appear they aren’t into the mansory layout – they are in one row and overlapping the posts from above.

In the console I get an error:
TypeError: $container.infinitescroll is not a function

But I don’t know why..

Plugin Author Jeremy Herve
(@jeherve)

Jetpack Mechanic 🚀

6 years, 6 months ago

In the console I get an error:
TypeError: $container.infinitescroll is not a function

Could you check and make sure the Infinite Scroll scripts are loaded on the page?

Do you experience similar issues on the home page?

Thread Starter netthemes
(@netthemes)

6 years, 6 months ago

Script (/wp-content/plugins/jetpack/modules/infinite-scroll/infinity.js?ver=4.0.0′) is loaded on the page before the javascript from above.

Same error ($container.infinitescroll is not a function) on the home page.
Thread Starter netthemes
(@netthemes)

6 years, 6 months ago
Okay, now I remove the javascript from above and add this one:
```
	var $container = $('#container');
    $container.masonry({
        itemSelector: '.grid-item',
        columnWidth: 450,
        gutter: 50,
      });

    $container.imagesLoaded(function(){
      $container.masonry();
    });
     infinite_count = 0;
     // Triggers re-layout on infinite scroll
     $( document.body ).on( 'post-load', function () {
	infinite_count = infinite_count + 1;
	var $container = $('#container');
	var $selector = $('#infinite-view-' + infinite_count);
	var $elements = $selector.find('.grid-item');
	$elements.hide();
	$container.masonry( 'appended', $elements, true );
	$elements.fadeIn();
     });
});
```
Infinite Scroll still works, but the posts are still overlapping. But there isn’t an error in my console anymore.
Plugin Author Jeremy Herve
(@jeherve)

Jetpack Mechanic 🚀

6 years, 6 months ago

Could you try to completely reload Masonry on post-load, as explained here:
https://wptheming.com/2013/04/jetpack-infinite-scroll-masonry/
Thread Starter netthemes
(@netthemes)

6 years, 6 months ago
My code:
```
jQuery( document ).ready( function( $ ) {
	var $container = $('#container');
    $container.masonry({
        itemSelector: '.grid-item',
        columnWidth: 450,
        gutter: 50,
      });

     $container.masonry();

     infinite_count = 0;
     // Triggers re-layout on infinite scroll
     $( document.body ).on( 'post-load', function () {
		infinite_count = infinite_count + 1;
		var $selector = $('#infinite-view-' + infinite_count);
		var $elements = $selector.find('.grid-item');
		$elements.hide();
		$container.masonry('reload');
		$elements.fadeIn();
	});
});
```
Same issue and I get an error: $().masonry("reload") is not a valid method

But if I add the line $container.masonry( 'appended', $elements, true ); before the reload, all posts from page 2 are loaded and displayed correctly but overlapping and the url is changing to ../categoryname/page/2

A better explanation with css styles when I scroll down:
Last post of page one: style="position: absolute; left: 0px; top: 739px;"
First post of second page : style="position: absolute; left: 500px; top: 1022px;"
Second post of second page : style="position: absolute; left: 500px; top: 1022px;"
Third post of second page : style="position: absolute; left: 500px; top: 1022px;"
.
.
.
Thread Starter netthemes
(@netthemes)

6 years, 6 months ago
Yes, I get it. Here my solution:
```
jQuery( document ).ready( function( $ ) {
    var $container = $('#container');
    $container.masonry({
        itemSelector: '.grid-item',
        columnWidth: 450,
        gutter: 50,
      });

     $container.masonry();

     infinite_count = 0;
     // Triggers re-layout on infinite scroll
     $( document.body ).on( 'post-load', function () {
		infinite_count = infinite_count + 1;
		var $selector = $('#infinite-view-' + infinite_count);
		var $elements = $selector.find('.grid-item');
		$container.append($elements);
		$container.masonry( 'appended', $elements);
	});
});
```
But the url is still changing if I scroll up (to /page/2). If I set false to the wrapper as you mentioned here (https://wordpress.org/support/topic/jetpack-infinite-scroll-feature-appending-pagex-to-url/) the masonry effect doesn’t work anymore.

Any suggestions what can I do?
- This reply was modified 6 years, 6 months ago by netthemes.
Plugin Author Jeremy Herve
(@jeherve)

Jetpack Mechanic 🚀

6 years, 6 months ago

hm, I’m not sure you can get that to work in this case, as the URL will always change with those settings.

At this point, I’m afraid this goes a bit beyond what we can offer in Jetpack; you will need to implement your own mechanism on top of Jetpack to get this to work.

Sorry not to be of more help.

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘infinitescroll is not a function’ is closed to new replies.