Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #681490

    I had a client who wanted infinite scroll for the articles on their site. Found a few posts related to Enfold and infinite scroll but nothing that was a concrete answer for what I wanted to do — using the Avia Template Builder I created a section page (it’s for a magazine) that has a blog posts content block at the bottom. I wanted that block to scroll. Turned out to be fairly simple to implement, posting this here in case it helps others.

    In your child theme’s — you are using one, right ;) — functions.php file add the following:

    
    /** 
     *  Add infinite scroll to section pages like Eat / Drink
     *  Uses https://github.com/pklauzinski/jscroll
     */
    
    add_action( 'wp_enqueue_scripts', 'load_jscroll' );
    
    function load_jscroll(){
        wp_enqueue_script('jscroll', get_stylesheet_directory_uri().'/js/jquery.jscroll.min.js', array( 'jquery')  );
    }
    
    function infinite_scroll() {
        global $avia_config;
            echo '<script type="text/javascript">
                jQuery( ".content" ).jscroll( {
                nextSelector: "span.current + a",
                contentSelector: ".article-grid",
                autoTrigger: true
            } )
            </script>';
    }
    add_action( 'wp_footer', 'infinite_scroll' );
    

    On your page insert your blog posts element with pagination enabled. I gave mine a custom CSS class of article-grid to make it easy to target that portion of the page. In the code above you see the contentSelector parameter — that’s an optional parameter that lets you select only a portion of a page to be appended by infinite scroll. Since my page has lots of items at the top that I don’t want being reloaded as I scroll I use the custom css class to only grab the next batch of articles.

    When you get to the last batch of articles you would normally see the pagination, which I didn’t want. A quick css rule takes care of that:

    
    /** hide navigation since we're using jQuery infinite scroll */
    nav.pagination{
        display:none;
    }
    

    This is a pretty bare bones example. I’m using infinite scroll everywhere so I didn’t limit this to specific pages or content types (which you could easily do by wrapping the infinite_scroll() function in some conditional checks. Ex: is_frontpage() if you only wanted this to apply to the homepage of your site.

    You can grab the js file here: github link as well as see the other options available to you.

    Hopefully that helps someone else get going. Works perfectly for our needs.

    #681756

    Hi wunderdojo,

    Great, thanks for sharing! Much appreciated :-)

    Regards,
    Rikard

    #1178706

    Thanks for sharing wunderdojo. I’ve tried to implement but I think Enfold has been updated to much since this answer. Should this work regardless of theme updates?

    Thanks
    Richard

    #1178774

    I’m not sure. It’s still live on the site I did it for but I don’t know how current their version of Enfold is. It’s just javascript though so unless it’s causes an conflicts (check the Chrome dev console) it should still work.

    #1178808

    Hey there, thanks for the quick reply and yes check the console and there was an error with the javascript for .content which is why I thought some theme changes had been made. Could too share the address for the site you added it too? Thanks.

    #1178818

    The .content() selector is just looking for a div with that class applied so it could be that the class names have changed and you’ll need to adjust. Here’s a link to it in use: https://ontaponline.com/music/

    #1178824

    OK thanks. can’t see much difference but this line is being added to the template-page <div class=”scroll-inner”> which I assume is being applied by the script.

    #1178838

    Correct, basically what it does is this: You have a block on your page where you’ve loaded say the five most recent blog posts:

    <div id='latest-posts' class='content'>
         <div id='post-one'>... </div
         <div id='post-two'>... </div>
         ....
         <a href='link-to-next-posts'>Older Posts</a>
    </div>

    So the javacript is fetching thet content from that next link and appending it to the containing div (#latest-posts). You need to make sure that you’re targeting an existing element on your page. For me there was a block with the class .content applied to it. On your page you’ll want to see what the parent element of the content you want to autoload is.

    • This reply was modified 1 year, 10 months ago by  wunderdojo.
    #1178957

    Thanks of that. I’ve had a look but my page is made more complex as i’m using the blog post grid option. I’ve tried to target the right element but it’s a bit out of my knowledge. Thanks for your help again.

    #1179255

    Hi,

    @raslade: Is the site live? Please post the URL so that we can check it. Did you apply a custom CSS class attribute to the blog posts element as @wunderdojo suggested?

    // https://kriesi.at/documentation/enfold/add-custom-css/

    Best regards,
    Ismael

    #1179334

    Hi Ismael, yes I tried the custom class but still getting a javascript error in the console. I’ve set the page currently to show all posts but can change back if you need to test?

    Thanks
    Richard

    #1179382

    Hi,

    Yes, please create a new thread/ticket and post the details in the private field. We’ll check it there. Also, it would be awesome if you can create a test page or a copy of the blog page.

    Best regards,
    Ismael

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.