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
    CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

  • By
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

Incredible Demos

  • By
    Save Web Form Content Using Control + S

    We've all used word processing applications like Microsoft Word and if there's one thing they've taught you it's that you need to save every few seconds in anticipation of the inevitable crash. WordPress has mimicked this functionality within their WYSIWYG editor and I use it...

  • By
    Create a NoScript Compatible Select Form Element with an onChange Event

    I wouldn't say that I'm addicted to checking Google Analytics but I do check my statistics often. I guess hoping for a huge burst of traffic from some unknown source. Anyway, I have multiple sites set up within my account. The way to...

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!