SP Ticker

HTML


<ul id="sp_ticker">        
    <li><a href="">Zee News reports Q2 Net Profit of Rs. 59.4 million </a></li>
    <li><a href="">Microsoft set to launch Mango powered smartphones </a></li>
    <li><a href="">Matrox to showcase latest products at Inter BEE 2011 </a></li>
    <li><a href="">HISTORY impresses with 19.8 million viewers on Indian debut </a></li>
    <li><a href="">WWIL operating profit up by 21% </a></li>
    <li><a href="">Tata Teleservices unveils growth strategy and Photo Max </a></li>
</ul>
<script>
    ticker.start({width:800,speed:30});
</script>

Style/ CSS Download


#sp_ticker{border-radius:5px; background:#535353; font:normal 12px verdana; padding:5px 0px 5px 0px; display:block; margin:0px auto}
#sp_ticker li {display:inline}
#sp_ticker li a{margin-right:50px; line-height:18px; color:#fff; text-decoration:none; padding:2px;}
#sp_ticker li a:Hover{margin-right:50px; text-decoration:underline}

Javascript Download


var ticker={
    speed:100,
    width:500,
    interval:1,
    ticker_contents:null,    
    ele_to_scroll:null,
    scroll_width:0,
    intId:0,
    start:function(obj){            
        if(obj!=undefined){
            if(obj.width!=undefined){
                this.width=obj.width;
            }
            if(obj.speed!=undefined){
                this.speed=obj.speed;
            }
        }
        
        var ele=document.getElementById('sp_ticker');
        this.ticker_contents=ele.innerHTML;            
        ele.style.width=this.width+"px";
        ele.style.overflow="hidden";
        ele.style.position="relative";
        document.getElementById("sp_ticker").innerHTML="<span id='sp_ticker_contents' onmouseover='ticker.pause()' onmouseout='ticker.resume()' style='width:100%; white-space:nowrap; position:relative;'>"+this.ticker_contents+"</span>";
        this.ele_to_scroll=document.getElementById('sp_ticker_contents');
        this.scroll_width=document.getElementById('sp_ticker').scrollWidth;
        ticker.intId=setInterval(this.move,this.speed);
    },
    move:function(){        
        var ele=ticker.ele_to_scroll;
        var left_pos=ele.style.left;
        left_pos=left_pos.replace("px","");
        if(Math.abs(left_pos)<ticker.scroll_width){
            ele.style.left=left_pos-ticker.interval+"px";
        }else{
            ele.style.left=ticker.width+"px";
        }
    },
    pause:function(){        
        clearInterval(ticker.intId);
    },
    resume:function(){
        ticker.intId=setInterval(this.move,this.speed);
    }
}