It looks like pagination is a new marquee tag. Now all hip websites like Twitter, Facebook got a fancy infinite scrolling. Scroll down more, you’ll get more tweets, status updates or contents. Just for browsing stuff, scrolling with space key (or petting your shiny trackpad) is good enough for those lazy people.
Currently TypePad provides only paginations on monthly archive pages like http://sekimura.typepad.com/blog/2011/02/index.html. But you can make your own infinite scroll page by following these steps:
* Step 1: Create a new “Page” *
Go to “Compose” page and select “New Page” from Compose pull down menu.
* Step 2: Put base html and save it as “all-archives.html”*
Click “HTML” tab and put html code input area.
Here is html code I used. Replace “blogId” with your own. To find your blogId, go to the dashboard for your blog and look at the URL. You will find something like:
http://www.typepad.com/site/blogs/6a00d8341d3fee53ef010535c8916d970c/dashboard
In this case, 6a00d8341d3fee53ef010535c8916d970c is your blogId.
And then save this page as “all-archives.html” or something relevant to publish it.
* Step 3: Enjoy infinite scrolling *
Go to the page you just created and scrolling down. It will automatically loading more entries when you about to get the bottom of page. Mine is here. http://sekimura.typepad.com/blog/all-archives.html.
TypePad JSON API provides such a powerful way to render your contents. Go to the page and find more fun! http://www.typepad.com/services/apidocs
February 9, 2011 at 11:15 pm |
You should link to microsoft CDN rather than to github (official sponsor of jquery-tmpl), that would be nicer to github servers
February 9, 2011 at 11:20 pm |
@Yann done. Thanks for the heads up!
February 9, 2011 at 11:25 pm |
something is puzzling me… how do you get the body of the posts to render? your template only output its title and permalink. Magic! (it’s be a bit faster to compile entry-tmpl once btw)
February 10, 2011 at 7:04 am |
This is neat! But I think it will have problems if a new entry is posted while scrolling, since it’ll knock the item indices off by one. You could work around this by keeping track of which entry ids you’ve already rendered and ignoring any that repeat when you get the next page.
Of course, this doesn’t fix deleting an entry or reordering entries, but hopefully those are less common operations. It’s a shame we don’t have a stream interface for blog content.
February 10, 2011 at 10:09 pm |
@Yann (hello again) I was using jQuery.append() to add an entry content. But, I’ve just updated the template and js file by using {{html variable}} syntax. Now it won’t make you puzzled. And as I said, tmpl() method is smart and it caches compiled templates.
@Mart I’m waitng for the stream interface then.
February 12, 2011 at 10:01 am |
Just wondering how we get the body of our posts to render? can you please explain it a bit more so it can be easy to understand.
May 1, 2011 at 12:36 pm |
your template only output its title and permalink. Magic! (it’s be a bit faster to compile entry-tmpl once btw)
tom
May 9, 2011 at 4:57 am |
rankines internetu
Tanks for helping.