Next Prev

Ticker Tape

This component vertically scrolls a number of items within a container. Each page of items is pulled from a server which supplies JSON data.
The parameters are: the data url, a css class for the container, and the time to pause between scrolling each item. Very simple! I had to do this for a project recently and couldn't find any useful "modern" implementations, so I rolled my own. The core js file is 8.5k without any compression at all, or dependencies.

Visit PhpDaddy.com

Play with this script by changing the html bellow. Submit your changes by clicking on this bar. Refresh the page to reset changes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="http://www.ajaxdaddy.com/web20/tickertape/">
      <style type="text/css">
        body {color: white;background: #52616F;} 
        a {  color: white; }
      </style>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<title></title>
	<link   type="text/css"       href="css/tickertape.css" rel="stylesheet"> 
  
</head>
<body>
	<script type="text/javascript" src="javascript/TickerTape.js"></script>
	<script type="text/javascript">var ticker = new TickerTape('demo-data.txt', 'styledTickerTape', 3000);</script>
</body>
</html>

Play with this script by changing the html above. Submit your changes by clicking on this bar. Refresh the page to reset changes.

Comment on this example

2008-06-13 20:25:37

var urlWithParams = this.dataUrl + concatCharacter + "lastId=" + this.lastId; //random number in url = no cache urlWithParams=urlWithParams+"&rand="+Math.random();

Welcome to AjaxDaddy.com

A large collection of nifty web 2.0 demos

Ticker Tape

Comment on this example