I am using NIS to make endless scrolling, I implemented and it works fine except one issue. Like I am using float: left to maintain the div tag. But after using float it sends multiple request at a time, but when I remove float:left it sends single request which I want.
I am getting 20 results at a time from server
I don't have public URL to give example on JsFiddle or Plunker.
Here is my code
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script src="js/angular/lib/angular.min.js"></script>
<script src="js/angular/lib/ng-infinite-scroll.min.js"></script>
<script src="js/angular/customjs/endless_scroll.js"></script>
<style type="text/css">
.test{
float:left;
}
</style>
</head>
<body ng-app="myApp">
<div ng-controller='DemoController'>
<div id="scroll" infinite-scroll='reddit.nextPage();'
infinite-scroll-container="'scroll'"
infinite-scroll-disabled='reddit.stopscript'
infinite-scroll-distance='2'>
<div ng-repeat='item in reddit.items'>
<div class="test">
<div style="height:30px;width:200px; border-style:solid;border-width:medium;">{{item.bookmark_id}}</div>
<div style="height:100px;width:200px; border-style:solid;border-width:medium;">{{item.bookmark_title}}</div>
</div>
</div>
</div>
<div ng-show='reddit.busy'>Loading data...</div>
</div>
</body>
</html>
And here is my controller
var myApp = angular.module('myApp', ['infinite-scroll']);
myApp.controller('DemoController', function ($scope, Reddit) {
$scope.reddit = new Reddit();
});
myApp.factory('Reddit', function ($http) {
var Reddit = function () {
this.items = [];
this.busy = false;
this.stopscript = false;
};
Reddit.prototype.nextPage = function () {
if (this.busy){
return;
}
else{
this.busy = true;
var url = "http://example.com/get_recent_articles/";
$http.get(url).success(function (data) {
if (data.recently_added.bookmarks.length == 0) {
this.stopscript = true;
}
else {
this.items.push.apply(this.items, data.recently_added.bookmarks);
}
this.busy = false;
}.bind(this));
}
};
return Reddit;
});
Can anybody help me to resolve this issue?
Thank You.
When you float elements, the parent collapses. I'm assuming your
ng-showelement is the one that triggers the load, so you always want that to sit below the content (so that when you scroll to it, it triggers the content to load). This means you need to use a clearfix on the parent, so that it expands with the floated content, instead of collapsing.You can learn more about how floats work here: http://css-tricks.com/all-about-floats/