If the document is smaller than the browser window, infinite scroll is not triggered.

[Prakt]

Just playing around with infinite scrolling here with some demo pages. I have a huge (2560x1440px) monitor at work and if the document is smaller than my browser window, infinte scroll is not fired. Resizing the window so that it is smaller than the page and refreshing the page works as intended.

Test page is available on pastebin: http://pastebin.com/wee5BcZJ

[Volvoxpl]

I have this same problem with my page :(
Any idea how to fix it?

[67726e]

Created a JSFiddle for testing: http://jsfiddle.net/67726e/ySCAn/4/

[67726e]

I have added a new option to Infinite-Scroll called prefill; When this option is set to true and the document is smaller than the encompassing window, pages will continually be loaded until there are either no more pages to load or the document has become larger than the encompassing window.

[lonerunner]

For me it works perfectly on every other browser except on Internet Explorer.

[67726e]

Is IE giving you a particular error or is it just not triggering the loading of more pages?

[lonerunner]

It's just not triggering the loading of more posts. Code works when browser is resized and there is vertical scroll, so when scrolling more posts are loaded. I also used debug tool and no errors found.

[67726e]

I'm using the latest version of Infinite-Scroll on IE9 and it is working for me both on an initial prefill and after resizing a window. What version of IE are you using?

[lonerunner]

I also updated to latest infinite-Scroll and tested, on other browsers work, but this might be problem, im using internet explorer 8, didn't updated to latest.

[67726e]

Ach, yeah that would make sense as I did not test this on IE8. I'm looking in this right now.

[67726e]

@lonerunner This works for me in IE8 without any problems. Could you please clear your browser's cache to ensure the latest script is loaded, set the debug option to true in your script, and post the output of the debug?

[lonerunner]

When i use compatibility mode it loads fine this is what i get in debug

LOG: determinePath,http://localhost/flexipress/?paged=,
LOG: Binding,bind
LOG: determinePath,http://localhost/flexipress/?paged=,
LOG: Binding,bind
LOG: math:,0,864
LOG: heading into ajax,http://localhost/flexipress/?paged=,
LOG: Using HTML via .load() method
LOG: contentSelector,[object]
LOG: math:,0,864
LOG: heading into ajax,http://localhost/flexipress/?paged=,
LOG: Using HTML via .load() method
LOG: contentSelector,[object]
LOG: math:,0,864
LOG: heading into ajax,http://localhost/flexipress/?paged=,
LOG: Using HTML via .load() method
LOG: contentSelector,[object]
LOG: math:,0,864
LOG: heading into ajax,http://localhost/flexipress/?paged=,
LOG: Using HTML via .load() method
LOG: contentSelector,[object]

When just browsing without compatibility mode on i get only this

LOG: determinePath,http://localhost/flexipress/?paged=, LOG: Binding,bind

and script not working.

Can it be problem because i use it combined with jquery masonry plugin?
This is my whole js code i use.

<script type="text/javascript">
    jQuery(document).ready(function($){
        $('#container').imagesLoaded(function(){
            $('#container').masonry({
                // options
                itemSelector : '.item',
                singleMode: true,
                isFitWidth: true
            });
        });
        $('#container').infinitescroll({
            navSelector : '#nav-below', // selector for the paged navigation
            nextSelector : '.nav-previous a', // selector for the NEXT link (to page 2)
            itemSelector : '.item', // selector for all items you'll retrieve
            prefill      : true,
            debug        : true,
        loading: {
            finishedMsg: 'No more pages to load.',
            img: 'http://i.imgur.com/6RMhx.gif'
        } 
        },
        // 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 );
            });
        }
        );
    });
</script>

[67726e]

The Masonry/Infinite-Scroll setup is not the issue, I myself use this and have no issues on IE8. Rather I think you have some quirks with your site you are working on. This issue is fixed so I am going to close it.

I would recommend running all of your code (HTML, CSS, & Javascript) through validation tools to make sure all is fine. I would guess you have something that is a bit off and is causing IE to only work correctly when in compatibility mode. If you have are still having problems with this after you've ensured your code is fine, feel free to open another ticket and I will take a look at it.

[placid2000]

Hey
Thank you for the prefill option, but is seems not to load every index file.. I got index.html, index2.html, index3.html ...
unfortunately it loads only index.html and index2.html. I've tested on FF and Chrome for now.

Has anybody else encountered this problem?

[67726e]

@placid2000 The prefill functionality only loads the pages until either there are no more pages to load, or the document is full enough to allow scrolling. If neither of these conditions are met and you are still having problems, please open a ticket with the details of your issue. Otherwise please don't comment on a closed ticket as it will spam the other people on the list.

[SivakumarMurugan]

$("#wrapper").css("min-height",($(window).height() + 5));
or
$(body).css("min-height",($(window).height() + 5));

I fixed using this.

[cscthian]

It has happened to some that when you concatenate the new data, the scroll returns to the beginning of the page