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
    How to Create a RetroPie on Raspberry Pi – Graphical Guide

    Today we get to play amazing games on our super powered game consoles, PCs, VR headsets, and even mobile devices.  While I enjoy playing new games these days, I do long for the retro gaming systems I had when I was a kid: the original Nintendo...

  • 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...

Incredible Demos

  • By
    CSS Fixed Position Background Image

    Backgrounds have become an integral part of creating a web 2.0-esque website since gradients have become all the rage. If you think gradient backgrounds are too cliche, maybe a fixed position background would work for you? It does provide a neat inherent effect by...

  • By
    WebSocket and Socket.IO

    My favorite web technology is quickly becoming the WebSocket API. WebSocket provides a welcomed alternative to the AJAX technologies we've been making use of over the past few years. This new API provides a method to push messages from client to server efficiently...

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!