Search code examples
jqueryhtmlcsstwitter-bootstrapfuelux

Infinite scroll with Fuel UX not working without div height

I am using Bootstrap and Fuel UX v3.4.0 in my project and trying to implement Infinite scroll to my entire page. However, I am unable to do the same.

I have replicated the infinite scroll example from http://getfuelux.com/javascript.html#infinite-scroll in fiddle and what I have noticed is that the same works fine, if the has a defined height, but fails otherwise.

HTML:

<body class="fuelux">
<div class="infinitescroll" id="myInfiniteScroll1" style="border: 1px solid #ccc; border-radius: 4px; float: left; padding: 6px 10px; width: 48%;"></div>
<div class="infinitescroll" id="myInfiniteScroll2" style="border: 1px solid #ccc; border-radius: 4px; float: right; padding: 6px 10px; width: 48%;"></div>
<div style="clear:both;"></div>

CSS (For Height):

#myInfiniteScroll1 {
    height: 200px;
}
#myInfiniteScroll2 {
    height: 200px;
}

JS:

var content = '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt auctor leo, ut ultricies lectus feugiat id. Duis sagittis erat id varius hendrerit. Etiam et hendrerit lectus. Nullam mattis, mauris vitae vestibulum gravida, enim ante adipiscing leo, sed imperdiet lacus dui bibendum erat. Sed convallis sed leo ac dapibus. Phasellus posuere lobortis euismod. Nam tempor elit ut justo tempor, eget egestas lectus sollicitudin. Cras vehicula sapien quis nisi ultricies rutrum. Nam ornare lorem mollis ullamcorper vestibulum.</p>' +
                '<p>Nullam in vulputate erat, in mattis enim. Curabitur consequat velit a sem ornare adipiscing. Pellentesque nisl lectus, venenatis sed dui ut, placerat mollis urna. Nulla diam diam, consectetur et magna id, lobortis cursus risus. Curabitur feugiat purus sed massa imperdiet rutrum. Mauris eu sodales libero, eu ultrices orci. Nunc vel metus erat. Donec ornare bibendum leo id fermentum. Fusce nec justo consectetur, posuere elit ac, tincidunt odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>' +
                '<p>Etiam et magna in dui convallis consectetur sit amet sed quam. Vestibulum non libero et justo porttitor cursus nec ac arcu. Aliquam feugiat non ipsum et interdum. Aenean ac lectus erat. Integer vulputate turpis ac accumsan fermentum. Curabitur nec feugiat enim. Nullam lobortis mauris odio, a commodo mauris facilisis quis. Praesent id dapibus lectus. Morbi id blandit magna. Quisque adipiscing viverra massa, vitae sagittis eros dignissim sed. Praesent ornare placerat malesuada. Quisque nec eros dictum, ornare erat non, fringilla felis. Proin sollicitudin arcu ac turpis euismod rhoncus.</p>';

var delays = ['300', '600', '900', '1200'];
var setup = function(selector){
    $(selector).append(content + content + content);
    $(selector).scrollTop(0);
};

$('#myInfiniteScroll1').infinitescroll({
    dataSource: function(helpers, callback){
        setTimeout(function(){
            callback({ content: content });
        }, delays[Math.floor(Math.random() * 4)]);
    }
});
$('#myInfiniteScroll2').infinitescroll({
    dataSource: function(helpers, callback){
        setTimeout(function(){
            callback({ content: content });
        }, delays[Math.floor(Math.random() * 4)]);
    },
    hybrid: true
});

setup('#myInfiniteScroll1');
setup('#myInfiniteScroll2');

http://jsfiddle.net/z5y41e9c/

What I require is to remove the CSS from the above fiddle, and have the infinite scroll work when you reach end of page. So infinite scroll should work with http://jsfiddle.net/z5y41e9c/2/

Would I need to use the 'helpers' argument as per the Fuel UX document? It doesn't explain much and I am not sure how to use this argument. I would appreciate, if you could also explain how to use this argument for future reference.

Solution

  • This is not a limitation of Fuel UX. Although you do need an actual height that is less than the height content. If there wasn't, there would be no scroll.

    Here is an example of two "full height" infinite scrolling elements. http://jsfiddle.net/z5y41e9c/5/

    Here is an example with only one "full height" infinite scrolling element. http://jsfiddle.net/m7q3h682/1/

    The only thing added has been:

    html, body {
  height: 100%;
}