Infinite Scrolling – Do It Yourself!

Update: Thanks to Brian for reporting an issue of multiple firing in Safari iOS. I have fixed this by removing the scrollstop listener when page bottom is reached and re-attaching it after loading more elements.

There are many handy third party plugins to handle infinite scrolling. They are meant to make your webapp lighter as not to load all contents at once. However, loading extra JavaScript libraries would affect the performance of a webapp negatively. Not to mention the bugs you might encounter or poor documentation. I never thought of creating such a tutorial of how to create your own infinite scroll until I found this post. I would like to also thank Mark for recommending my solution to be included in jQuery Mobile demo section.

Continue reading

controlgroup – add items dynamically (jQuery Mobile 1.4)

.controlgroup( “container” )

In jQuery Mobile 1.3.2, it was possible to add elements dynamically to data-role="controlgroup" div directly without the need to insert them into .controlgroup( "container" ).

However, things has changed in jQuery Mobile 1.4. To get best results in terms of properly formatted _controlgroup, new items should be inserted into .controlgroup( "container" ).

The previous step ensures uniform re-styling of controlgroup all elements (children) within data-role="controlgroup" and that re-styling controlgroup.

Continue reading