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

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.

I've been playing with this, but have put it on the back burner, mainly because I figured I needs X results on a mobile in portrait and X in landscape, then more on iPad, more on desktops etc... and as I was working on a grid layout, the differences we dramatic.

http://www.fieg.nl/infinite-ajax-scroll-a-jquery-plugin and http://www.infinite-scroll.com/ where the best options I can up with. Both easy to get the basic "load more" working.

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.

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.