1
2	(function($) {
3
4	$.fn.newsScroll = function(options) {
5
6	return this.each(function() {
7
8	var
9	$this = $(this),
10
11	defaults = {
12	speed: 400,
13	delay: 3000,
14	list_item_height: $this.children('li').outerHeight()
15	},
16
17	settings = $.extend({}, defaults, options);
18
19	setInterval(function() {
20	$this.children('li:first')
21	.animate({
22	marginTop : '-' + settings.list_item_height,
23	opacity: 'hide' },
24
25	settings.speed,
26
27	function() {
28	$this
29	.children('li:first')
30	.appendTo($this)
31	.css('marginTop', 0)
32	.fadeIn(300);
33	}
34	); // end animate
35	}, settings.delay); // end setInterval
36	});
37	}
38
39	})(jQuery);

1
2	// Create a self-invoking anonymous function. That way,
3	// we're free to use the jQuery dollar symbol anywhere within.
4	(function($) {
5
6	// We name our plugin "newscroll". When creating our function,
7	// we'll allow the user to pass in a couple of parameters.
8	$.fn.newsScroll = function(options) {
9
10	// For each item in the wrapped set, perform the following.
11	return this.each(function() {
12
13	var
14	// Caches this - or the ul widget(s) that was passed in.
15	// Saves time and improves performance.
16	$this = $(this),
17
18	// If the user doesn't pass in parameters, we'll use this object.
19	defaults = {
20	speed: 400, // How quickly should the items scroll?
21	delay: 3000, // How long a rest between transitions?
22	list_item_height: $this.children('li').outerHeight() // How tall is each list item? If this parameter isn't passed in, jQuery will grab it.
23	},
24	// Create a new object that merges the defaults and the
25	// user's "options". The latter takes precedence.
26	settings = $.extend({}, defaults, options);
27
28	// This sets an interval that will be called continuously.
29	setInterval(function() {
30	// Get the very first list item in the wrapped set.
31	$this.children('li:first')
32	// Animate it
33	.animate({
34	marginTop : '-' + settings.list_item_height, // Shift this first item upwards.
35	opacity: 'hide' }, // Fade the li out.
36
37	// Over the course of however long is
38	// passed in. (settings.speed)
39	settings.speed,
40

1
2	<?php
3
4	require 'simplepie.inc';
5	$feed = new SimplePie('https://code.tutsplus.com
6	$feed->handle_content_type();
7
8	?>
9
10	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
11	<html xmlns="http://www.w3.org/1999/xhtml">
12	<head>
13	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
14	<link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8" />
15	<title>Super Duper News Scroller</title>
16	</head>
17
18	<body>
19
20	<div id="container">
21	<h1>Super Duper News Scroller: <small>Built With PHP, SimplePie, and jQuery</small</h1>
22
23	<ul id="widget">
24	<?php foreach($feed->get_items(0, 15) as $item) : ?>
25	<li>
26	<?php echo $item->get_description(); ?>
27	<h4><a href="<?php echo $item->get_permalink(); ?>"><?php echo $item->get_title(); ?></a></h4>
28	<p>
29	<?php echo $item->get_date(); ?>
30	</p>
31	</li>
32	<?php endforeach; ?>
33	</ul>
34	</div><!--end container-->
35
36	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
37	<script type="text/javascript" src="jquery.newsScroll.js"></script>
38
39	<script type="text/javascript">
40	$('#widget').newsScroll({

How to Build a Super Duper News Scroller