David Walsh on NetTuts: Create a Twitter-Like “Load More” Widget

By  on  
NetTuts Post

My latest article post for NetTuts has been published.  From the intro:

Both Twitter and the Apple App Store use a brilliant technique for loading more information; you click the link and fresh items magically appear on the screen. This tutorial teaches you to use AJAX, CSS, JavaScript, JSON, PHP, and HTML to create that magic. This tutorial will also feature both jQuery and MooTools versions of the script.

It was fun creating the widget using both MooTools and jQuery JavaScript.  Be sure to check it out!

Recent Features

  • By
    5 Ways that CSS and JavaScript Interact That You May Not Know About

    CSS and JavaScript:  the lines seemingly get blurred by each browser release.  They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely.  We have our .js files and our .css, but...

  • By
    Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

Incredible Demos

  • By
    MooTools FontChecker Plugin

    There's a very interesting piece of code on Google Code called FontAvailable which does a jQuery-based JavaScript check on a string to check whether or not your system has a specific font based upon its output width. I've ported this functionality to MooTools. The MooTools...

  • By
    Check All/None Checkboxes Using MooTools

    There's nothing worse than having to click every checkbox in a list. Why not allow users to click one item and every checkbox becomes checked? Here's how to do just that with MooTools 1.2. The XHTML Note the image with the ucuc ID -- that...

Discussion

  1. i’ve been there in nettuts and i saw your tuts. Your such a brilliant man! thanks keep on shinning!

  2. Simon

    Nice to see you on nettuts !
    Great article btw. Can’t wait to try this out :)

    p.s: Is it possible that you forgot the normal css3 border-radius property on #posts-container ? Or maybe it was your intention to use specific webkit and mozilla properties ?

  3. Add to #load-more its parent radius (-webkit-border-radius:10px; -moz-border-radius:10px;) (css border inherit with border-color change will not work properly as it will require more changes & more code).
    I’m always lazy reading such large articles, especially from nettus, but I suppose you explain it nice…

  4. wow, don’t you ever sleep? where do you get the time for 2 nice tutorials per day? Thanks this was interesting…

  5. Great tutorial… One more like this

    ” Twitter like more button ”
    http://9lessons.blogspot.com/2009/04/twitter-like-more-button-with-jquery.html

  6. Oh this is very great! Nice and clean!

  7. Really enjoyed your article David, your skills continue to impress.

  8. Miles

    Hi, brilliant tutorial, I’m newbie with php & mysql but this type and quality of article push me to learn more.
    Can you please show us how we can implement this in wordpress.

  9. Darren

    Great article … but would love to see it fully implemented in wordpress.

  10. Now I’ve been trying for quite some time to implement this into my WordPress installation, but I’ve failed.
    Then I saw a link to someone who customized it to work with WordPress SQL functions, but that didn’t work either.

    So I would love to see a really thorough tutorial and/or description of how to implement this into WordPress. Maybe even how to make it into a easy plugin.

    I believe a lot of people are looking for this functionality in WordPress – would be great!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!