This is how I would do it (demo here)... The actual code is contained in the addRow function. I added a simple "insert date" into the content, you can use ajax to retrieve whatever content.
The rest of the code is for demonstration purposes, mostly because I didn't like the div's going off the screen, so I added a max # of div's per column.
CSS
#wrapper { position: relative; left: 0; top: 0; width: 600px; margin: 0 auto; text-align: center; }
.column { position: relative; float: left; padding: 0; width: 50%; }
.column div { background: #eee; border: #333 1px solid; margin: 5px; padding: 5px; }
.column .top { background: #ccc; }
.newrow { display: none; }
HTML
<input type="button" rel="col1" style="margin: 5px; float: right;" value="Add row to right" />
<input type="button" rel="col0" style="margin: 5px; float: right;" value="Add row to left" />
<input type="button" rel="both" style="margin: 5px; float: right;" value="Add row to both" />
<div id="wrapper">
<div id="col0" class="column"><div class="top">Content added below</div></div>
<div id="col1" class="column"><div class="top">Content added below</div></div>
</div>
Script
$(document).ready(function(){
var maxRows = 10;
$(':button').click(function(){
var el = $(this).attr('rel');
if ( el=="both" ) { el="col1"; addRow("col0"); }
addRow(el);
// remove extra rows
$('#wrapper').find('.column').each(function(){
$(this).find('.row:gt(' + maxRows + ')').remove();
})
});
})
function addRow(el){
// get whatever contents here
var content = (new Date).toString();
// add new row
$('#'+el).find('.top').after('<div class="newrow row">' + content + '</div>')
$('.newrow').fadeIn('slow',function(){ $(this).removeClass('newrow') });
}
Update: Ok, I see you didn't ask for code, but I but this bit together... it should be more along the lines of what you want.
Assuming this json structure:
({
"news": [
{ "id" : "0010", "date" : "Sun Dec 20 2009 12:10:00 GMT-0500 (Eastern Standard Time)", "title" : "News item 10" },
{ "id" : "0009", "date" : "Sun Dec 20 2009 12:09:00 GMT-0500 (Eastern Standard Time)", "title" : "News item 9" },
{ "id" : "0008", "date" : "Sun Dec 20 2009 12:08:00 GMT-0500 (Eastern Standard Time)", "title" : "News item 8" },
{ "id" : "0007", "date" : "Sun Dec 20 2009 12:07:00 GMT-0500 (Eastern Standard Time)", "title" : "News item 7" },
{ "id" : "0006", "date" : "Sun Dec 20 2009 12:06:00 GMT-0500 (Eastern Standard Time)", "title" : "News item 6" },
{ "id" : "0005", "date" : "Sun Dec 20 2009 12:05:00 GMT-0500 (Eastern Standard Time)", "title" : "News item 5" },
{ "id" : "0004", "date" : "Sun Dec 20 2009 12:04:00 GMT-0500 (Eastern Standard Time)", "title" : "News item 4" },
{ "id" : "0003", "date" : "Sun Dec 20 2009 12:03:00 GMT-0500 (Eastern Standard Time)", "title" : "News item 3" },
{ "id" : "0002", "date" : "Sun Dec 20 2009 12:02:00 GMT-0500 (Eastern Standard Time)", "title" : "News item 2" },
{ "id" : "0001", "date" : "Sun Dec 19 2009 12:01:00 GMT-0500 (Eastern Standard Time)", "title" : "News item 1" }
]
})
CSS (same as before)
HTML
<div id="wrapper">
<div class="column"><div class="top">Content added below</div></div>
</div>
Script
$(document).ready(function(){
initData();
})
function initData(){
var o = {
maxRows: 10, // max # of rows to show
updateJSON : 15, // update data every 30 seconds
updateScreen : 1, // update screen every 2 seconds with data
count: 0, // count # of cycles of setTimeout
lastID: -1, // last news ID
debug: false // debug
};
var cycle;
if (o.debug) $('#wrapper').prepend('<div id="debug"></div>')
getData( [] );
function addRow(content){
// update data if this function has cycled 30/2 times - so we only use one settimeout function
o.count++;
if ( o.debug ) $('#debug').html('seconds passed = ' + o.count*o.updateScreen + ', content.length = ' + content.length);
if ( o.count >= o.updateJSON/o.updateScreen ) {
o.count = 0;
getData(content);
}
if ( content.length > 0) {
// remove last array element
var n = content.pop();
// if content length is zero, the set last ID
if (content.length === 0) o.lastID = n[0];
// add new row, rel contains the id - not used by the script, but there if you need it.
$('#wrapper').find('.top').after('<div class="newrow row" rel="' + n[0] + '">' + n[2] + '<br />' + n[1] + '</div>');
$('.newrow').fadeIn('slow', function(){ $(this).removeClass('newrow') });
}
$('#wrapper').find('.row:gt(' + (o.maxRows-1) + ')').remove();
cycle = setTimeout( function(){ addRow(content) } , o.updateScreen * 1000 );
}
function getData(content){
var tmparray = [];
var lastIDfound = false;
$.ajax({
type: "GET",
url: "newsitems.js",
dataType: "json",
success: function(data) {
$.each(data.news, function(news){
if (this.id == o.lastID) lastIDfound = true;
if (!lastIDfound){
// return month day year time (assuming US notation)
var newsDate = this.date.split(' ').slice(1,5);
// get today's month day year
var today = new Date().toString().split(' ').slice(1,4).join(' ');
// show only the time if the date is today
var newsTime = (newsDate.slice(0,3).join(' ') == today ) ? 'posted at ' + newsDate[3] : 'from ' + newsDate.join(' ');
tmparray.push([ this.id, newsTime, this.title ]);
}
});
// if tmparray length is zero, then return
if (tmparray.length === 0) return;
// if last item shown hasn't changed, then return with no new data
if (tmparray[0][0] == o.lastID) return;
// set last ID
if (o.lastID == -1) o.lastID = tmparray[0][0];
clearTimeout(cycle);
if (content.length === 0) {
addRow( tmparray );
} else {
addRow( content.concat( tmparray ) );
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
if (!$('#error').length) $("#wrapper").prepend('<div id="error"></div>');
$('#error').html(errorThrown + '<br />');
}
})
}
}