WordPress.org

Ready to get started?Download WordPress

Forums

Infinite Scroll doesn't execute javascript when the new content comes in (1 post)

  1. jlindblom
    Member
    Posted 1 year ago #

    Hello! Hope you're fine! First excuse for my bad english. If I missed to tell some info, please ask me and I will try to answer! And thanks for all help!

    I've just installed the infinite scroll plugin to my website. I also use a javascript-function that scroll through the images on page using arrow keys up and down (38 & 40) (one image scroll/change per push on an arrow key). Please check it; here

    From the start three images is showing. When the page is scrolled down then loading two more pictures, totally now five pictures.
    Now the problem. In those first three pictures does the arrow-keys-script work and scroll on picture per push an arrow key. But when the infinite scroll has loaded the last two entries, the script does not work on these, only working on the three first images. I filled in the entire javascript to arrow-key-function in infinite scrolling settings "Javascript to be called after the next posts are fetched", but still it does not work. What am I doing wrong?

    The script for the arrow keys is (which is loaded from start, and also when fetching the new posts in infinite scroll;

    $(window).load(function(){
    $(function() {
        var boxLefts = [];
        $('.thumbnail').each(function(i, el){
            boxLefts.push(this.offsetTop);
        });
    
        $(document).keydown(function(e) {
            var dir = false,
                targetTop = -1;
    
            switch (e.keyCode) {
            case 38:
                dir = -1;
                break;
            case 40:
                dir = 1;
                break;
            default:
                break;
            }
    
            if (dir) {
                e.preventDefault();
                winDown = window.scrollY;
                $.each(boxLefts, function(i, v){
                    if ((dir == 1 && winDown < v && targetTop < 0) ||
                        (dir == -1 && winDown > v)) {
                        targetTop = v;
                    }
                });
                if (targetTop >= 0) {
                    $('html, body').animate({scrollTop: targetTop}, 300);
                }
            }
        });
    });
    });

Topic Closed

This topic has been closed to new replies.

About this Topic