"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
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
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.
interactivetools.com
Re: [zip222] "Load More" for list on mobile site - How to?
By Toledoh - August 23, 2012
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.
Tim (toledoh.com.au)
Re: [Toledoh] "Load More" for list on mobile site - How to?
By rez - August 27, 2012
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
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.
Tim (toledoh.com.au)
Re: [rez] "Load More" for list on mobile site - How to?
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?
Tim (toledoh.com.au)