Question

I want to fade in new posts from my database. I have a div that contains all old posts which are loaded when the page loads, and then I want new posts to fade in above the old ones.

I just got started with jQuery. I´ve tried a few things.

This code doesn’t work. (Which maybe is obvious to you.)

$('#oldMessages').html($('#oldMessages').html() + load('newPosts.php').hide().fadeIn(3000));

Thanks for your help!

Answer 1

As the page loads (or whenever you need to load posts), try this

$.ajax({
    url: 'newPosts.php',
    type: 'GET',
    success: function(data) {
        // assuming data is the html of your posts
        $(data).hide().prependTo($('#oldMessages')).fadeIn(3000);
        // this will fadeIn the entire response
    }
});

Edit

This is a little hacky–the code has a couple requirements:

1. An element (you could hide it if you wanted) with class="timePosted" with each post
2. That is immediately followed by a tag that contains the text for elapsed time with class="timeElapsed". If you can’t do this, I think you’ll need an array with some id’s to identify each post

Since you also need to update the elapsed times, you could try this inside your success callback function:

$.each($('.timePosted'), function() {
    var diff = new Date() - new Date($(this).val());

    x = diff / 1000
    seconds = x % 60
    x /= 60
    minutes = x % 60
    x /= 60
    hours = x % 24
    x /= 24
    days = x

    if (days >= 1)
        $(this).next('.timeElapsed').html(days + ' days ago');
    else if (hours >= 1)
        $(this).next('.timeElapsed').html(hours + ' hours ago');
    else if (minutes >= 1)
        $(this).next('.timeElapsed').html(minutes + ' minutes ago');
    else if (seconds >= 1)
        $(this).next('.timeElapsed').html(seconds + ' seconds ago');

});