WordPress.org

Ready to get started?Download WordPress

Forums

Jetpack by WordPress.com
[resolved] Infinite Scroll Support and JetPack (21 posts)

  1. danielmichel
    Member
    Posted 1 year ago #

    "At this time, your theme, varmag, doesn't support Infinite Scroll. Unlike other Jetpack modules, Infinite Scroll needs information from your theme to function properly"

    Can you tell us who have made our own custom themes how we can enable support for this feature?

    Thanks

    http://wordpress.org/extend/plugins/jetpack/

  2. Erick Hitter
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    You can find information about adding theme support at http://jetpack.me/support/infinite-scroll/.

  3. danielmichel
    Member
    Posted 1 year ago #

    Thnk you. I've added it to my 'dev site' and I'm a little confused with how I can modify it to work the way it works on my live site.
    Any help would be appreciated

  4. danielmichel
    Member
    Posted 1 year ago #

    Dev site with new infinite scroll

    add_theme_support( 'infinite-scroll', array(
     	'type'           => 'scroll',
    	'footer_widgets' => false,
    	'container'      => 'content',
    	'wrapper'        => true,
    	'render'         => false,
    	'posts_per_page' => false
    ) );

    Live site

    <?php if ( is_home() || is_category() ) { ?>
    	$container.infinitescroll({
    		navSelector  : '#nav-below',
    		nextSelector : '#nav-below .nav-previous a',
    		itemSelector : '.entries',
    		bufferPx: 10000,
    		loading: {
    			img: "<?php echo get_template_directory_uri(); ?>/images/ajax-loader.gif",
    			msgText: "<?php _e( 'Loading the next set of posts...', 'custom' ); ?>",
    			finishedMsg: "<?php _e( 'All content loaded.', 'custom' ); ?>"
    		},
    		debug: false,
    		animate: false
    	},
    	function( newElements ) {
    		var $newElems = $( newElements ).css({ opacity: 0 });
    		$newElems.imagesLoaded(function(){
    			$newElems.animate({ opacity: 1 });
    			$container.masonry( 'appended', $newElems, true );
    		});
    	}
    	);
    	<?php } ?>
  5. danielmichel
    Member
    Posted 1 year ago #

    If anybody ends up getting this to work with Masonry, please let me know

  6. Erick Hitter
    Member
    Plugin Author

    Posted 1 year ago #

    From a quick check of your site, it looks like you should change the container attribute to be article-grid as that's the element your current Infinite Scroll code adds posts to. Beyond that, it's hard to tell what else you might need to do without digging into the theme itself. For that level of assistance, you may need to hire a consultant if you don't have in-house staff available.

    As for working with jQuery Masonry, our Infinite Scroll code triggers a post-load JavaScript event on document.body after each set of posts is appended. We use that event to trigger Masonry with themes on WordPress.com. One such example is Pinboard, which you can see a demo of at http://pinboarddemo.wordpress.com/.

  7. passegua
    Member
    Posted 1 year ago #

    Hi everybody, I've read http://jetpack.me/support/infinite-scroll/
    but I didn't understand "where" should I add those code line?
    add_theme_support( 'infinite-scroll', array(
    'container' => 'content',
    'footer' => 'page',
    ) );
    to which file?
    1) functions.php ?
    2) index.php ?
    ???

    Many thanks.

    My wordpress blog is here:

    http://lnx.sinapsi.org/wordpress

  8. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    You should indeed add it to your functions.php file.

  9. passegua
    Member
    Posted 1 year ago #

    Well, I did it, but nothing change in my theme.
    Any other suggestion?
    Thanks.

    [ link removed, correct link provide above already ]

  10. *Ow. Makes frown face from auto play of noise from that site and quickly closes said site*

    Otto recently did a write up on how to add Jetpack's infinite scroll to your theme.

    Try disabling all of your plugins (including whatever made that noise that cause me to leave your site immediately...) and give this a read.

    http://ottopress.com/2012/jetpack-and-the-infinite-scroll/

    As usual please make sure a) you've good file backups before poking at your theme files and b) consider doing any modifications to your theme via a child theme.

  11. ngoodfellow
    Member
    Posted 1 year ago #

    [* Removed duplicate of http://wordpress.org/support/topic/scrolling-not-loading-gallery-view-javascript-jquery?replies=1 Please do not post duplicate requests.]

  12. philb74
    Member
    Posted 1 year ago #

    I don't get the «post-load» on categories page. Is there a way to catch this on categories pages as well?

  13. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    @philb74 Could you start a new thread, and post links to some of your category archive pages so we can investigate further?

  14. philb74
    Member
    Posted 1 year ago #

  15. talatorre
    Member
    Posted 1 year ago #

    Using the WordPress example site that Erick linked to, this is how I ended up getting Masonry and Infinite Scroll to work together.

    // Code inside here fires when the DOM is ready
    jQuery(window).load(function(){
    	jQuery('#content').masonry({
    		itemSelector : '.post',
    		columnWidth : 250
    	});
    });
    
    // Handle new items appended by infinite scroll
    jQuery(document).on('post-load', function() {
    	setInterval( function() {
    		jQuery( '#content' ).masonry( 'reload' );
    	}, 300 );
    });
  16. talatorre
    Member
    Posted 1 year ago #


  17. Devin Price
    Member
    Posted 1 year ago #

    @talatorre's method works well.

    I ended up using this other method, which is more convoluted, but gets seems to get rid of a flash of un-layout posts. It also fades them in, which I think is nicer visually:

    jQuery( document ).ready( function( $ ) {
    	infinite_count = 0;
    	// Triggers re-layout on infinite scroll
    	$( document.body ).on( 'post-load', function () {
    		infinite_count = infinite_count + 1;
    		var $container = $('#content');
    		var $selector = $('#infinite-view-' + infinite_count);
    		var $elements = $selector.find('.hentry');
    		$elements.hide();
    		$container.masonry( 'reload' );
    		$elements.fadeIn();
    	});
    });

    I put a write-up on my site if anyone wants a bit more of an explanation of how that works: http://wptheming.com/2013/04/jetpack-infinite-scroll-masonry/

  18. dterrazas
    Member
    Posted 1 year ago #

    Can you use Infinite Scroll on its own with out using Jetpack?

  19. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    @dterrazas - this thread is months old and already marked resolved - if you need help, please start a new thread and include a link to your site.

    http://wordpress.org/support/plugin/jetpack#postform

  20. preethamchandra
    Member
    Posted 9 months ago #

    Hi,

    I'm facing the same issue.

    I added above code into my theme's js file and it didn't work.

    Also i use caching , does that cause any issue?

    You can check it here.
    http://www.itdealraja.com/

    MY theme js file is

    http://www.itdealraja.com/wp-content/themes/birdflat/birdflat/js/birdflat.js

    And My theme support is

    function test_scrol() {
        add_theme_support( 'infinite-scroll', array(
            'container'      => 'content',
    	'type'           => 'click',
    	'wrapper'        => 'masonry-wrapper',
            'footer'         => 'page',
    		'posts_per_page' => '8'
        ) );
    }
    add_action( 'after_setup_theme', 'test_scrol' );

    Any help appreciated.

  21. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 9 months ago #

    @preethamchandra Could you please start your own thread, as WPyogi mentioned above?
    http://wordpress.org/support/plugin/jetpack#postform

    Thank you.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic