airbnb / infinity Goto Github PK

I'm trying to use infinity to scroll a long list of elements.
Instead of having the infinity div take all of the webpage space I place it inside another div with a fixed height and width and with scrollbars.
Although the contents are first rendered correctly, when the scroll is moved the contents is nor repainted. I suppose it is because the main page scroll is not moved.

AngularJS is a great MVC framework for web apps created and supported by Google.

http://angularjs.org

It has some awesome features, but the one I am using for a list with infinite scroll allows me to append more elements into the DOM by just updating a JavaScript array with a JSON response from the server.

infinity.js is requiring to use HTML snippets when appending items.

I am trying to port infinity.js to be used with AngularJS with a custom directive. Similar to angular-ui which ports all jQuery UI plugins to be used easily in AngularJS.

How should I approach this? How could I append items using infinity.js when I don't have the HTML source which should be appended?

Hi,how can i integrate infinity .js to my site.Am new to this.Can you please explain or show some codes.Please advice

Hi, I want to confirm whether the license is BSD-3-Clause.
Because it looks a little different from the BSD-3-Clause license.
cdnjs/cdnjs#9960

On and off are equal in Firefox and Chrome.
In IE9 there is only a very minor difference in scrolling.

Is this project still necessary for smooth performance?

I'm currently experiencing a browser hang in both Firefox and Chrome when implementing infinity on relatively small lists.

What's strange is the hang only occurs when refreshing after opening or closing the console (Firebug or Web Inspector). Consecutive refreshes with the console either left open, or not opened, do not cause the hang (it only hangs when the state of the console is changed.)

Last merged commit was a year ago, the repository has 8 pull requests and 35 36 issues.

I'd like to use infinity in my project, but I'm not sure it's a good idea, considering it does not have any kind of support anymore…

Didn't have time to test why, sorry.

Noticed that most of the issues are pretty old. Are you guys still maintaining this or is it frozen?

The docs say it can, but the first line if(!obj || !obj.length) return null; cause break if ListItem passed.

It would be nice to provide demos of an infinite list with and without infinity.js so everyone would understand the benefit of using this plugin.

thank you,
tim

Th infinity.js file works fine for me with image loading from a js file. For that I have given the image statically to the js file.
But what I want is to dynamically update the image source in the js file using php script.Or can i use a php file to get the images dynamically. I have been working on this for weeks to solve the issue. So please advice if have any idea's.

My items are inline-block (grid UI), and infinity generate always extra ones more, that don't fit well between the pages, leaving white space.

I have tried to play with PAGE_TO_SCREEN_RATIO, trying to affect it this way, without any success.

CSS Width for listItem did not make any effect as well.

Thank you.

Would like to use infinity via browserify and node app, would it be possible to add support for CommonJS exports and publish to NPM?

When a ListItem has an image, the height of that item as reported by updateCoords method is wrong.

This causes the ListView height to be wrong as well, in my case it is much smaller than the actual height of its content.

Hi,

at first thanks for great library!

But why you don't use versioning? It's complicate update your library. I suggest to use Semantic Versioning (http://semver.org) it's easy to understand and semantic.

Cheers!

When calling the remove item on listView I am getting the following error:

var listItems = listView.find('article');
for(var index = 0, length = listItems.length; index < length; index++) {
  listItems[index].remove();
}
//> TypeError: Cannot read property 'items' of null

Any idea on how to fix this?
thanks

How can we prepend elements to the beginning of the lists?

I just tried the demo page on Chrome for Android and Mobile Safari and the performance was pretty poor. It takes awhile to render when scrolling down, displaying a blank white page for a couple of seconds instead.

Any fixes or workarounds for this considering that this works great for Desktop?

Hello Kindly provide the supported browsers..
Both desktop and mobile versions.

Regards

Hi,

First off thanks for releasing this code. It's great to have a solution that is so well built and tested rather than rolling the same thing.

One of the biggest issues for me right now though is that the list view cannot handle fluid width/page resizes at all.

I open the ticket more to discuss the issue than to demand a fix since I'm well aware that it's a fairly deep-rooted problem that may not have a satisfactory solution.

It may also be that the "API for notifying ListViews/ListItems when elements change size" listed in your Future work section may address part of this issue.

To share though: Lets assume that it is a common case for list item contents to change height when the page width changes - one example is because it is full of text, or other floated or inline-block elements that wrap around with fluid width.

There is a hard problem here: if the content is text or complicated inline-block elements (as in my case), it is essentially impossible to perfectly model the re-flow and therefore calculate height correction needed to ensure the scrolling will be smooth and gap/overlap free as you scroll back up after window resize. Essentially you have to re-render each "hidden" ListItem and re-measure it and then correct the height of the spacer by the difference. This is going to be very hard to do quickly enough when you may have hundreds of items with possibly thousands of DOM elements hidden.

So the discussion point is: what is the best solution we can find to this issue? If the answer is no solution, or only use fixed-width ListViews, then I think it is a very significant limitation that should be listed up front in the documentation for the library.

This is a current problem for my product so I will update this ticket if any useful solutions come up (and/or contribute a patch if appropriate).

Has a replacement for infinity js been created?

I`ve been trying to integrate infinity inside a defined scrolled area.
My UI is a bunch of inline-block thumbnails (not floated). Grid Layout.

Infinity works perfect inside my page when it occupy the whole page width & height, and each element is block level, with simple DOM inside.

But when create a little more advanced UI, with grid interface, and an infinity area to scroll inside a container (ListView's height isn't defined. It's container does), then all gets wrong.
Even more than that- If I give 100% to HTML & Body, infinity fails. it calculates wrong listView`s height.

How to solve this? Grid UI is a desired & a common one.

Demos:

• All 1300 elements are block-level - http://jsfiddle.net/neoswf/J2ZE3/8/ #OK
• ListItem (CSS) Width & Height defined: http://jsfiddle.net/neoswf/J2ZE3/9/ #OK
• ListItem as inline-block - http://jsfiddle.net/neoswf/J2ZE3/10/ #Broken

PostScript: I noticed in the API Reference, that ListItem has width & Height properties. Same as ListView.
I couldn't find how to implement it, Inside the build code itself, i haven't seen how to pass this properties to the object.
Sorry if its obvious thing, and its possible to do that.

Will appreciate any help.
Thanks.

Has anyone had any luck implementing this with a custom scroll bar? I want to use something such as the jScrollPane jQuery plugin, but I'm not having any luck whatsoever :(

Does anyone know how I could get it to work with either this plugin or a similar one?

Hi I would like to implement a possibility to sort my Items.

Lets say I have data with timestamps:

[{
  html: '<h3>Item title</h3>',
  data: timestamp
}]

I am requesting the data periodically.. And the server response contains older & newer items..

I would like to sort them and put them to the right place, instead of just appending them to the list.
What would be your suggestion to implement that? Thanks a lot

Hi,

It could be completely out of the scope of this project but I ran into an issue when using infinityjs with listItems that are floated left (like material design cards). It looks like infinity just takes the number of items and assumes they are all vertically stacked and thus, when two cards are displayed next to each other, the height of the listView is ~twice the height of that the actual content is.

Is it possible to handle this already (I may have missed something in the docs) and, if not, is this something that could be developed?

When pages are removed after you scroll away from them, you can't cmd+f or ctrl+f text from them.

1. Load a bunch of items with text
2. Select an item and copy some of its text
3. Scroll away from that item and cmd+f or ctrl+f and try to find that text.

Hello,

Is there any way we can easily enable infinity in of a

    <table class="table table-striped">
      <thead>
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody id="tableContainer">

      </tbody>
    </table>

    <script type="text/javascript">
        $(function(){
            var $el = $('#tableContainer');
            var listView = new infinity.ListView($el);

            for (var i = 0; i < 1000; i++) {
                var $newContent = $('<tr><td>Mark</td><td>Otto</td><td>@mdo</td></tr>');

                listView.append($newContent);   
            }
        });
    </script>

Hi,

I have a question about possibility of append new content to top of my listView.

Are it possible ?

Thanks.

I'm experiencing some screen jumping due to the delay between appending stashed pages and buffer size update.
Could you explain me why you use a single buffer instead of keeping the page element in the view and add its children to a shadow object. Doing so, you would never change the size of the view at all.
Thanks.

I really like the concept you guys have done, but it really hangs on IE9. The only browser which it seems to work is Chrome. Can someone look into it?

Currently when a Page is stashed to save memory the visible DOM is removed with this.$el.remove() in Page.stash(). This causes all jQuery data and event handlers to be removed from the ListItems removed.

When you scroll back up and those elements are restored, they no longer respond to events or contain data bound prior to the stashing.

I can trivially fix this by replacing replace() calls with detach() calls in each of stash(), appendTo() and prependTo() methods of Page.

I think this should be all that is required. Page.remove() and ListItem.remove() should keep jQuery remove() semantics and that should be sufficient to ensure that old stuff is cleaned up correctly when actually removed whilst maintaining bound data and events through stashing.

Is that reasoning about where to keep and where to remove data and events sound? I can submit a pull request for this if so.

Hi,
We are very impressed with the infinity.js library.
We have encountered a problem when scrolling through a list of 100 items (similare to facebook's posts). For some reason after the scrolling stops, the posts are loaded to the DOM just fine, but the scroller position suddently "jumps" and shifts the feed about 200-500 pixels to the top (or bottom). I hope you understand what I mean.
Do you know why this happens?

Thanks,
Doron Oded

In an example all the images where loaded from a js,Can i use a php page to get the images dynamically?How can we integrate that.Please advice

It is nice for static content, but what about a binding for dynamic content via knockoutjs?

Until new page data is being uploaded, we see a blanck screen.
What should we do?

When I import the infinity.js into my html, and then I write: var $el = $('#my-infinite-container'); . The chrome console raise an error that is "Uncaught TypeError: Object [object Object] has no method 'on' infinity.js:539"

How can I use this js correctly?

Anyone tried to implement this in backbone? Or even better in marionette using collectionView?

From the annotated source of Page.prototype.lazyload:

`Runs the given lazy-loading callback on all unloaded page content.

Takes:
callback: a function of the form function([$el]){}. Will run on each unloaded element, and will use the element as its calling context.`

I take it this means that each 'unloaded element', is a ListItem correct? This would make sense: each lazyloaded page iterates it's containing listitems and calls the optionally supplied Lazyload-function on each of them.

However this is not what's happening in Page.prototype.lazyload. Instead $el[x] is passed to the lazyloadfunction. Since $el is a jquery-wrapper around the page-domelement, $el only contains 1 element ($el[0]) the page dom element itself.

instead, iterating over $el.children() instead would do the trick, if I'm right about what Page.prototype.lazyload is supposed to do that is.

Say a user scolled the inifinite view and clicks on product #30 in the list. It's not what he wants and navigates backs (backbutton), is there a way to autoscroll to #30 so he can continue scrolling from there?

related: http://www.quora.com/What-is-the-desired-behavior-when-you-click-the-back-button-on-an-infinitely-scrolling-page/answer/Jared-Spool

When I call find() using a JQuery selector, it only searches on parts that I have scrolled down to. If I haven't scrolled down at all, all the search hits at the bottom of the list view are not returned.

Experimenting with infinity.js - love the start so far. I know you state that ListViews can't have heights set via CSS. Does this mean that you can't use CSS heights at all within the individual elements? Or does that just mean that the height of the element itself can't be set via CSS, and you could use heights within the element for things like bars or buttons and such.

I have successfully add items to a tableview ( var tableView = new infinity.ListView($el); ). However, I do not know how to set the width or height of the tableview. What is more, there is a large blank area at the bottom of the tableview. I do not know why. Thank you so much!

i have infinity and jquery 1.9.1

in my js i have this

http://pastebin.com/ZDeNAQPG
but i see all my object and dosen't works infinity...

This would make it easier to implement infinite feeds. Should be optional, since it's not necessary (or may not even be suitable) for every case, but could be used similar to the lazy callback.

Make sure to remove