tristar500 · February 21, 2012 21:52
diff --git a/gistfile1.txt b/gistfile1.txt
 <!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>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>vTicker</title>
 <meta name="description" content=" " />
 <meta name="keywords" content=" " />

 <style type="text/css" media="all">
 body,html
 {
 	padding: 0;
 	margin: 0;
 }

 body
 {
 	background: #cccccc;
 }
 #scrollup {
 	font-family: sans-serif;
 	position: relative;
 	overflow: hidden;
 	border: 1px solid #000;
 	height: 200px;
 	width: 200px;
 	padding: 0;
 	margin:0;
 	background: aqua;
 }
 li.headline {
 	list-style-type: none;
 	position: absolute;
 	top: 210px;
 	left: 5px;
 	height: 100%;
 	width:95%;
 	background:white;
 		padding: 0;
 	margin:0;
 }
 .headline span{
 	color: red;
 	display: block;
 	padding: 10px 0 0 0;
 	font-size: .8em;
 	text-align:right;
 }

 </style>

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 <script type="text/javascript" src="jquery.vticker.js"></script>

 <script type="text/javascript">

 </script>

 </head> 
 <body>

 <ul id="scrollup">
   <li class="headline"> This is headline number 1. It's the first one that you'll see. Others will arrive shortly.1 
 	<span>A Person's Name</span></li> 
   <li class="headline"> This is headline number 2. It's the first one that you'll see. Others will arrive shortly.2  
   <span>A Person's Name</span></li> 
   <li class="headline"> This is headline number 3. It's the first one that you'll see. Others will arrive shortly.3  
   <span>A Person's Name</span></li> 
   <li class="headline"> This is headline number 4. It's the first one that you'll see. Others will arrive shortly.4  
   <span>A Person's Name</span></li>     
 <ul>


 <script>
 var headline_count;
 var headline_interval;
 var current_headline = 0;
 var old_headline = 0;

  $(document).ready(function(){
   headline_count = $("li.headline").size();
   $("li.headline:eq("+current_headline+")").css('top','5px');
 
   headline_interval = setInterval(headline_rotate,5000); //time in milliseconds
   $('#scrollup').hover(function() {
     clearInterval(headline_interval);
   }, function() {
     headline_interval = setInterval(headline_rotate,5000); //time in milliseconds
     headline_rotate();
   });
 });
 
 function headline_rotate() {
   current_headline = (old_headline + 1) % headline_count; 
   $("li.headline:eq(" + old_headline + ")").animate({top: -205},"slow", function() {
     $(this).css('top','210px');
   });
   $("li.headline:eq(" + current_headline + ")").show().animate({top: 5},"slow");  
   old_headline = current_headline;
 }


 </script>
 </body>
 </html>
	<!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>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>vTicker</title>
	<meta name="description" content=" " />
	<meta name="keywords" content=" " />

	<style type="text/css" media="all">
	body,html
	{
	padding: 0;
	margin: 0;
	}

	body
	{
	background: #cccccc;
	}
	#scrollup {
	font-family: sans-serif;
	position: relative;
	overflow: hidden;
	border: 1px solid #000;
	height: 200px;
	width: 200px;
	padding: 0;
	margin:0;
	background: aqua;
	}
	li.headline {
	list-style-type: none;
	position: absolute;
	top: 210px;
	left: 5px;
	height: 100%;
	width:95%;
	background:white;
	padding: 0;
	margin:0;
	}
	.headline span{
	color: red;
	display: block;
	padding: 10px 0 0 0;
	font-size: .8em;
	text-align:right;
	}

	</style>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script type="text/javascript" src="jquery.vticker.js"></script>

	<script type="text/javascript">

	</script>

	</head>
	<body>

	<ul id="scrollup">
	<li class="headline"> This is headline number 1. It's the first one that you'll see. Others will arrive shortly.1
	<span>A Person's Name</span></li>
	<li class="headline"> This is headline number 2. It's the first one that you'll see. Others will arrive shortly.2
	<span>A Person's Name</span></li>
	<li class="headline"> This is headline number 3. It's the first one that you'll see. Others will arrive shortly.3
	<span>A Person's Name</span></li>
	<li class="headline"> This is headline number 4. It's the first one that you'll see. Others will arrive shortly.4
	<span>A Person's Name</span></li>
	<ul>


	<script>
	var headline_count;
	var headline_interval;
	var current_headline = 0;
	var old_headline = 0;

	$(document).ready(function(){
	headline_count = $("li.headline").size();
	$("li.headline:eq("+current_headline+")").css('top','5px');

	headline_interval = setInterval(headline_rotate,5000); //time in milliseconds
	$('#scrollup').hover(function() {
	clearInterval(headline_interval);
	}, function() {
	headline_interval = setInterval(headline_rotate,5000); //time in milliseconds
	headline_rotate();
	});
	});

	function headline_rotate() {
	current_headline = (old_headline + 1) % headline_count;
	$("li.headline:eq(" + old_headline + ")").animate({top: -205},"slow", function() {
	$(this).css('top','210px');
	});
	$("li.headline:eq(" + current_headline + ")").show().animate({top: 5},"slow");
	old_headline = current_headline;
	}


	</script>
	</body>
	</html>