Infinite scroll on Tetris theme causing overlap

  • Resolved logenlanka

    (@logenlanka)


    10 years ago

    The following is the code I implemented in functions.php. While infinite scroll works, the posts that are added appear under the first page’s posts. This is to say, the original posts overlap the next page posts.

    function wonlife_infinite_scroll_init() {
    add_theme_support( 'infinite-scroll', array(
        'container' => 'blog-wrap',
'wrapper'=> false,

    ) );
}
add_action( 'after_setup_theme', 'wonlife_infinite_scroll_init' );

    I’m not sure how to implement the javascript code to reload isotope jquery, so that the posts are displayed properly. I tried enqueing the code as shown on (https://jetpack.com/support/infinite-scroll/#theme), under the Javascript Events section to no avail.

    Please advice.

    This is my testing site – http://www.wayofninja.com/live/

    `

    https://ww.wp.xz.cn/plugins/jetpack/

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter logenlanka

    (@logenlanka)

    10 years ago

    If you look at the code via developer tools, you will be able to see that the called up posts are hidden under the originals.

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    10 years ago

    Since your site is in maintenance mode, I wasn’t able to access it to look at the issue.

    Could you give me access, so I can take a look?

    It might also be worth contacting the theme author, as they might have had similar questions from other users in the past.

    Thread Starter logenlanka

    (@logenlanka)

    10 years ago

    So sorry. I thought I’ve deactivated maintenance mode. Now, deactivated.

    Anyway, how and where (i.e. best practices) do I add the code for Javascript events, as described by Jetpack Infinite Scroll documentation?

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    10 years ago

    Thanks!

    I would fist recommend that you switch to the click type in Infinite Scroll, since you have footer widgets. This way, you’ll allow your readers to see your widgets there.

    When using Isotope for Infinite Scroll, you’ll need to re-fire Isotope so it gets applied to the new posts as soon as they get loaded. With Masonry for example, it’s something you can accomplish with reload, as explained here:
    http://wptheming.com/2013/04/jetpack-infinite-scroll-masonry/

    I’m not really familiar with Isotope, but it looks like appended, explained here, could do the trick:
    http://isotope.metafizzy.co/v1/demos/infinite-scroll.html
    http://isotope.metafizzy.co/methods.html#appended

    I hope this helps.

    Thread Starter logenlanka

    (@logenlanka)

    10 years ago

    Where would I insert the jquery or javascript code for Isotope’s re-firing? A bit confused about that. Do I add it in a js file and enqueue it in functions.php?

    I’m assuming that the relevant code to fire is this?

    var $newItems = $('<div class="item" /><div class="item" /><div class="item" />');
$('#container').isotope( 'insert', $newItems );

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    9 years, 12 months ago

    Do I add it in a js file and enqueue it in functions.php?

    Exactly.

    I’m assuming that the relevant code to fire is this?

    I’m not familiar with Isotrope so I can only suggest that you give it a try. You will need to adapt the code from the Isotrope documentation to match the posts returned by Infinite Scroll, but the Masonry tutorial I posted earlier should help you with that.

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

The topic ‘Infinite scroll on Tetris theme causing overlap’ is closed to new replies.