Search This Blog

Monday, November 12, 2007

technorati like - News Scroller with jQuery

I have create a real time viewer for in ASP.NET using jQuery. If you not familiar with jquery, you can read more here It's a very powerful javascript library.

Let me explain how the real time viewer/scroller/ticker/ works:

When web user access to realtime.aspx. The page will bind 5 latest rated blog and show on screen. once the user/visitor rate on the blog, the newly rated blog will show on top, the rest will scroll down and the last one will be deleted. To see real example, please check on

There are few things that we need to take care of in my case:

  • CSS
  • Javascript
  • AJAX

I'm using in the scroller <ol> because we have more than one (5) message want to display.

<div id="content">
<ol class="wrapper">
<li class="headline">
Message 1
<li class="headline">
Message 2
<li class="headline">
Message 3
<li class="headline">
Message 4
<li class="headline">
Message 5

invoice software

Create CSS for #content and .wrapper with height: 395px; width: 500px; overflow: hidden; The height: 395px; is the trick here. You will get what i mean when go along.
Each headline will have height: 78px; 5 headline will give total of 390px.

#content {
position: relative;
overflow: hidden;
height: 395px;
width: 500px;
clear: both;
float: left;
width: 500px;
padding-left: 0;
list-style-type: none;
.headline {
position: relative;
height: 78px;
width: 500px;
overflow: hidden;
border-bottom: 1px solid #CCC;
float: left;
list-style-type: none;
z-index : 1;
margin-top: -100px;
/* for IE */
filter: alpha(opacity=40);
/* CSS3 standard */
opacity: 0.4;
/* for Mozilla */
-moz-opacity: 0.4;
border-bottom: none;

invoice software


// JScript File
var BlogarateRealtime = {
timer : 10, // second
display : 5, // how many item displayed
interval: null,
animation: 500, //milisecond

init: function() {
if (!BlogarateRealtime.interval) {

// stop scrolling when mouseover the message
// start scroll again when mouseout
$("#content .wrapper").mouseover(function(){

RatingUpdate: function(){
var i;

// add class active when mouseover
// remove class active when mouse out
var cpostItem = $(".wrapper .headline");
$(cpostItem).mouseover(function() {
}).mouseout(function() {

// xxx.shx return realtime message (rewly post)
var html = $.ajax({
url: http://xxx.ashx/ ,
async: false
// return 3 value:
//1. PostUpdating[0] - any blog rated
//2. PostUpdating[1] - new blog ID
//3. PostUpdating[2] - new blog information

var PostUpdating = html.split("");

// check if any new blog rated (1 = yes, 0 = no)
if (PostUpdating[0] == "1")

// assign currentItem with new blog infomation
var currentItem = PostUpdating[2];
// add class next to currentItem
// pre append currentItem to #content .wrapper
$(currentItem).addClass("next").prependTo("#content .wrapper");
// scrolling (animate) the new blog to marginTop -1
$(".wrapper .next").animate( { marginTop: -1 }, BlogarateRealtime.animation, function() {
// remove marginTop -1, class next and fadeIn new blog
$(".wrapper .next").css("marginTop", -1);
$(".wrapper .next").removeClass("next");
$(".wrapper .next").fadeIn(BlogarateRealtime.animation);

var postItem = $(".wrapper .headline");
// fade out and remove the last post
$(postItem[BlogarateRealtime.display]).animate( { opacity: .50 }, BlogarateRealtime.animation, function(){
} );
// add class active when mouse over
// remove class active when mouseout
$(postItem).mouseover(function() {
}).mouseout(function() {

startScroll: function() {
if (!this.interval) {
this.interval = setInterval("BlogarateRealtime.RatingUpdate()", this.timer * 1000);
stopScroll: function() {
if (this.interval) {
this.interval = false;
// initial once ducument finish loaded

The call of http://xxx.ashx/ will return newly added post if there is any.

You can see the effect in . You will only see the scroll effect if only new post rated. Done.

Leave me a message or a comment if you have any. Thanks


Alejandro José said...

Can you please post a zip file with functional code of this news scroller?

Nitin Sharma said...

Please correct your Demo URL :
It is not responding