0

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!

Daniel
  • 13
  • 3
  • Could you please give us more context of your code to understand better what you wanted to do ? And please tel us what you tried and what does not work. – JMax Jun 26 '11 at 14:39

4 Answers4

0

I'm not 100% sure I understand what you mean, but if you want to "pop" the new data above the old posts, you could try something like this:

HTML:

...
<div id="new"></div>
<div id="old"></div>
...

JavaScript:

function loadNewData(url) {
  // prepend contents of 'new' div to 'old' div contents
  $('#old').prepend($('#new').html());

  // reload 'new' div with fresh data from 'url'
  $('#new').load(url).hide().fadeIn(3000);
}
Mat
  • 202,337
  • 40
  • 393
  • 406
0

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');

});
David Fox
  • 10,603
  • 9
  • 50
  • 80
  • I found this code very useful! Thanks! I run it every fifth seconds. One problem though: I also want to update #oldMessages every now and then, how can i do that without affecting the fading? – Daniel Jun 26 '11 at 19:16
  • @Daniel In what way do you need to update #oldMessages? I thought that's what this was doing? – David Fox Jun 26 '11 at 23:52
  • When the page loads the first time I display all posts in #oldMessages. Every fifth second I run the code I got from you to search for new posts, and fade them above the old ones. This works perfectly. The problem is that when i display a post I also display elapsed time since the post was posted for example "2 minutes ago" or "one hour ago", that´s why I also need to update #oldMessages so that the elapsed time changes as the time goes. But I can´t do it the same time as I fade in new posts, because then the fading fails. – Daniel Jun 27 '11 at 07:48
  • @Daniel Oh wow--you need to update each post on every request. Let's see...I'll try to edit my answer. – David Fox Jun 27 '11 at 12:44
  • Thanks! I haven´t got it to work yet though. Do you mean like this: (An example)
    2011-06-27 10:12:10
    20 minutes ago
     – Daniel Jun 27 '11 at 14:49
  • @Daniel If you use a div for `.timePosted`, you might need `.html()` instead of `.val()`. When I tested it, I used a hidden input. So, the first line of the `.each` loop would look like: `var diff = new Date() - new Date($(this).html());` instead – David Fox Jun 27 '11 at 14:59
  • Thank you! Everything works perfectly except one thing. . For some reason the div displays in the posts I get from newPosts.php. Any idea why? EDIT: I used display: none !important; which made it work. Thanks so much for your help! – Daniel Jun 27 '11 at 17:01
0

Kindly check this question: Using fadein and append

it's for a similar thing, and the solution provided most likely the one you are looking for.

Community
  • 1
  • 1
Mohammed Swillam
  • 9,119
  • 4
  • 36
  • 47
0

try 'prepend':

var new = $('<div id="newMessages" style="display:hidden"></div>').load('newPosts.php');
$('#oldMessages').prepend(new);
$('#newMessages').fadeIn(3000);

sorry, code updated

WooDzu
  • 4,771
  • 6
  • 31
  • 61