triceam / megalist

Megalist is a jQuery plugin that creates a touch-enabled list component, capable of very large datasets, complete with data virtualization.

MegaList

Introduction

Megalist is a jQuery plugin that creates a touch-enabled list component, capable of very large datasets, complete with data virtualization. It was originally intended for touch-enabled devices, however it also works in many desktop browsers.

For performance optimizations, the list component uses data virtualization techniques, so there are never more list elements in the HTML DOM than what is currently visible on the screen. As the user scrolls through content, the list updates the DOM elements accordingly. This makes scrolling lists of thousands of items extremely fluid.

There are two methods that the list component can be used. One option is to declare the list structure in HTML markup, another option is to specify a dataProvider array, from which the list will create DOM elements.

Samples

View the "samples" directory to see the scrollable list component in action. All samples are interactive, and scrollable via touch or mouse events, with function event handlers.

Simple List Created With Inline LI elements

• View Sample
• View Source

Simple List Created With A DataProvider of 100,000 items:

• View Sample
• View Source

Styled Dynamic List Created With Remote Data:

• View Sample
• View Source

API

Methods

Event	Description
.megalist()	Initializes a list component.
.megalist('setDataProvider', dataProviderArray)	Initializes a list component.
.megalist('setLabelFunction', labelFunction)	Sets the data provider array for the list instance. There is no concrete limit on the length of the data provider array. Elements within the array can be of primitive or complex types.
.megalist('setSelectedIndex', index)	Set the item at selected index as selected.
.megalist('getSelectedIndex', index)	Returns the currently selected index. If no list item is selected, returns -1.
.megalist('clearSelectedIndex', index)	Clears the currently selected item in the list.

Events

Megalist exposes a change event for handling when the selected item in the list changes.

Event

Description

change

This event is fired when the selected item in the list is changed. You can access details of the selected item in the list by accessing attributes of the event. event.index The numeric index for the item in the list that was clicked/touched. event.srcElement A jQuery reference to the list item that was clicked/touched. event.item A reference to the data item for the list item. If using inline <li> in markup, this will be the same DOM element as event.srcElement. If using a dataProvider, it will be the object in the dataProvider array corresponding to the selected list item.

megalist's Issues

List not displaying with few items

Hello!

I have played a bit with your jQuery plugin and it's really great one! Both working well on mobile devices and desktop browsers! Thank you for the good work!

However, I’m facing an issue when my list contains only a few items: for instance, in the provided sample "01 - simple inline data.html", if we have only 3 items instead of 50 the list doesn't show anything; it then seems to be empty while it's actually not.

Do you have any idea how i could try to fix the problem?

Thank you in advance!

A few suggestions

Dear @triceam:

Thank you for sharing this project. It is great. However, I have a few suggestions you might want to consider for the next version:

• setDataProvider function takes a second parameter to determine if y position should be reset.
• When the list is scrolled to the end, allow certain actions to be triggered (eg. the entire list is not loaded at first but part by part as user scrolls down) :

Invoke this function when maxPosition is reached in onWheelMove, onTouchMove and onScrollbarMove.

• The current code binds touchStartHandler to the container even touchSupported is set to false. Probably add a condition when binding these events.

• Use .on instead of .bind to attach events on scrollbar because scrollbar is removed and re-created depending on the size of dataProvider.

• The way max y position is calculated in scrollBarTouchMove() should be the same as the way in onWheelMove()

Thank you very much and I look forward to seeing the new version.

Ning

Works very slow on mobile

Hello,
I'm using cordova-plugin-photo-library to access my library and jQuery to list the images in a grid, and I've used $("#div").megalist() at the beginning of the code that does the adding to the grid. However. the process is too slow. Is there anything I can do to speed this up?
Regards,

this looks awesome

I havent played with it yet, but I'm thinking about using it on a site I'm building now.. currently Im using tinyscrollbar
I'm wondering if theres a way to update the list when we reach the bottom, or near the bottom? I'm using a hack on the tinyscrollbar that when the user is near the bottom it sends an ajax call to another page to load more items into the list.. If you had some kind of feature with that in here it would be even better!

Goes into infinite loop when using with accordion

updateLayout function goes into infinite loop when using inside accordion as item height is zero.

requestAnimationFrame

The library ( at least the version in the zip file ) is called requestAnimationFrame which is missing.
The call should be window.requestAnimationFrame.
For browsers without this feature the following might work:

        window.requestAnimFrame = (function(){
            return  window.requestAnimationFrame ||
                    window.webkitRequestAnimationFrame   ||
                    window.mozRequestAnimationFrame      ||
                    window.oRequestAnimationFrame        ||
                    window.msRequestAnimationFrame       ||
                    function(callback, element){
                        window.setTimeout(function(){

                            callback(+new Date);
                        }, 1000 / 30);
                    };
        })();

Microsoft touch devices scroll not working

Hi,
I couldn't able to scroll the list in Microsoft touch devices like 'Surface' and 'laptop with touch enabled' devices.
Is there any workaround (or) update available so that it works on Microsoft touch devices too, by touch move list should scroll..?

Does not working in IE6-8

Hi, it does not working in IE6-8, in ie6-8 can not see the scrolling bar