News Scroller with jQuery in ASP.NET

Introduction

I have create a real time viewer for another website in ASP.NET using jQuery. If you not familiar with jquery, you can read more here jquery.com. 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 http://202.75.40.204/blogarate/Realtime_.aspx.

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

• HTML/ASPX
• CSS
• Javascript
• AJAX

HTML/ASPX

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>
            <li class="headline">Message 2 </li>
            <li class="headline">Message 3 </li>
            <li class="headline">Message 4 </li>
            <li class="headline">Message 5 </li>
        </ol>
    </div>

CSS

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.

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

Javascript

<script type="text/javascript">// JScript Filevar BlogarateRealtime = {
            timer: 10, // seconddisplay: 5, // how many item displayedinterval: null,
            animation: 500, //milisecondinit: function() {if (!BlogarateRealtime.interval) {// stop scrolling when mouseover the message// start scroll again when mouseout$("#content .wrapper").mouseover(function() {
                        BlogarateRealtime.stopScroll();
                    }).mouseout(function() {
                        BlogarateRealtime.startScroll();
                    })
                    BlogarateRealtime.RatingUpdate();
                    BlogarateRealtime.startScroll();
                }
            },

            RatingUpdate: function() {var i;// add class active when mouseover// remove class active when mouse outvar cpostItem = $(".wrapper .headline");
                $(cpostItem).mouseover(function() {
                    $(this).addClass("active");
                }).mouseout(function() {
                    $(this).removeClass("active");
                });// xxx.shx return realtime message (rewly post)var html = $.ajax({
                    url: 'http://xxx.ashx/',
                    async: false}).responseText;// 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 infomationvar 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() {
                        $(postItem[BlogarateRealtime.display]).remove();
                    });// add class active when mouse over// remove class active when mouseout$(postItem).mouseover(function() {
                        $(this).addClass("active");
                    }).mouseout(function() {
                        $(this).removeClass("active");
                    });
                }

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

AJAX

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

Live Demo

You can see the effect in http://202.75.40.204/blogarate/Realtime_.aspx . You will only see the scroll effect if only new post rated.