"Load More" for list on mobile site - How to?

6 posts by 4 authors in: Forums > CMS Builder
Last Post: September 10, 2012   (RSS)

By zip222 - August 23, 2012

I have a mobile site that I would like to implement a "Load More" button on. I have seen this on a lot of mobile sites recently and find this to be preferable to pagination.

When the page first loads, the first 20 items would be visible along with a "Load More" button at the bottom of the list. Clicking the button would query the database and load the next 20 articles, etc...

Can any provide any thoughts/suggestions/guidance on how to do this?

Re: [zip222] "Load More" for list on mobile site - How to?

By Dave - August 23, 2012

Hi zip222,

It's done with AJAX, and some custom PHP, Javascript, and HTML. There's a general tutorial here:
http://www.9lessons.info/2009/12/twitter-style-load-more-results-with.html

Basically you create a load more button that runs some javascript that makes a request in the background for more content, then javascript appends that on the end of a page or div, etc.

Some sites also set it up so it loads more the moment you scroll to the bottom of that page.

Hope that helps, let me know any questions.
Dave Edis - Senior Developer
interactivetools.com

Re: [Toledoh] "Load More" for list on mobile site - How to?

By rez - August 27, 2012

Toledoh,

were you also using masonry? I gave up trying to get the infinite scroll working. Do you have any working page code examples?

To continue working in a grid framework but have it look right on multiple devices, have you looked into responsive frameworks yet? There are quite a few of them that would be an easy transition for you. Google and you will find collections of them. My favorite seemed to be missing when I looked:
http://gumbyframework.com/

By the way, there are also a few issues of .net and web designer magazines on the subject which I have discovered are only a few dollars in the app store compared to 16 dollar imports for me here in the USA. I now subscribe to both for a year like i have wanted to but wouldn't at import prices. Anyway... there are responsive web design issues but nothing you can't Google.

Re: [rez] "Load More" for list on mobile site - How to?

By Toledoh - August 27, 2012

Responsive site is fine, I have a grid structure on a wide screen of 9 "squares" across, and as you reduce screen width to mobile-portrait of 2 squares across. Just CSS and media queries.

However, to fill a "page" on a large screen I wanted to show a grid of 9 by 8 squares... 72 records, but on a mobile show 2 by 9, 18 records... and all the combinations in between.

I can get the infinite scroll working fine, loading the next pages just by using the generic code, and using the "records per page" code from the standard CMSB generated code. However, with the loading more records on a mobile, 72 records at a time... I just thoughts it wasn't a nice result. I ended up just doing the "next page" as standard.

I have used masonry previously, but not needed on this project, I just used my own CSS. The site should be live soon and I'll send you a link if you like.
Cheers,

Tim (toledoh.com.au)

Re: [rez] "Load More" for list on mobile site - How to?

Hey Rez / Zip222,

Did you get this working?

It works pretty well here http://redbalifrog.com.au however keeps repeating the last items.

The issue seems to be that the next page ?page=... . see comments https://github.com/paulirish/infinite-scroll/issues/49 but i'm not sure how to fix it.

Any ideas?
Cheers,

Tim (toledoh.com.au)