This week, we’ll learn how to combine PHP, SimplePie, and jQuery to build a simple news scroller widget for your website. It’s much easier than you might think; so let’s begin.
Note that I modified the code slightly after recording this screencast. Don’t worry, they’re just minor changes; but as with anything, you should continuously refactor your code.
Final NewsScroll Plugin
(function($) {
$.fn.newsScroll = function(options) {
return this.each(function() {
var
$this = $(this),
defaults = {
speed: 400,
delay: 3000,
list_item_height: $this.children('li').outerHeight()
},
settings = $.extend({}, defaults, options);
setInterval(function() {
$this.children('li:first')
.animate({
marginTop : '-' + settings.list_item_height,
opacity: 'hide' },
settings.speed,
function() {
$this
.children('li:first')
.appendTo($this)
.css('marginTop', 0)
.fadeIn(300);
}
); // end animate
}, settings.delay); // end setInterval
});
}
})(jQuery);
With Commenting
// Create a self-invoking anonymous function. That way,
// we're free to use the jQuery dollar symbol anywhere within.
(function($) {
// We name our plugin "newscroll". When creating our function,
// we'll allow the user to pass in a couple of parameters.
$.fn.newsScroll = function(options) {
// For each item in the wrapped set, perform the following.
return this.each(function() {
var
// Caches this - or the ul widget(s) that was passed in.
// Saves time and improves performance.
$this = $(this),
// If the user doesn't pass in parameters, we'll use this object.
defaults = {
speed: 400, // How quickly should the items scroll?
delay: 3000, // How long a rest between transitions?
list_item_height: $this.children('li').outerHeight() // How tall is each list item? If this parameter isn't passed in, jQuery will grab it.
},
// Create a new object that merges the defaults and the
// user's "options". The latter takes precedence.
settings = $.extend({}, defaults, options);
// This sets an interval that will be called continuously.
setInterval(function() {
// Get the very first list item in the wrapped set.
$this.children('li:first')
// Animate it
.animate({
marginTop : '-' + settings.list_item_height, // Shift this first item upwards.
opacity: 'hide' }, // Fade the li out.
// Over the course of however long is
// passed in. (settings.speed)
settings.speed,
// When complete, run a callback function.
function() {
// Get that first list item again.
$this.children('li:first')
.appendTo($this) // Move it the very bottom of the ul.
// Reset its margin top back to 0. Otherwise,
// it will still contain the negative value that we set earlier.
.css('marginTop', 0)
.fadeIn(300); // Fade in back in.
}
); // end animate
}, settings.delay); // end setInterval
});
}
})(jQuery);
Final Page
<?php
require 'simplepie.inc';
$feed = new SimplePie('http://net.tutsplus.com/rss');
$feed->handle_content_type();
?>
<!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" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8" />
<title>Super Duper News Scroller</title>
</head>
<body>
<div id="container">
<h1>Super Duper News Scroller: <small>Built With PHP, SimplePie, and jQuery</small</h1>
<ul id="widget">
<?php foreach($feed->get_items(0, 15) as $item) : ?>
<li>
<?php echo $item->get_description(); ?>
<h4><a href="<?php echo $item->get_permalink(); ?>"><?php echo $item->get_title(); ?></a></h4>
<p>
<?php echo $item->get_date(); ?>
</p>
</li>
<?php endforeach; ?>
</ul>
</div><!--end container-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.newsScroll.js"></script>
<script type="text/javascript">
$('#widget').newsScroll({
speed: 2000,
delay: 5000
});
// or just call it like:
// $('#widget').newsScroll();
</script>
</body>
</html>
That’s It
In twenty minutes, we were able to build a nice and simple scroller. You’re now free to take the plugin and expand it to your needs. What you have here should be considered the first step. How can you improve upon it?
You Also Might Like…
Extending SimplePie to Parse Unique RSS Feeds
A few days ago, as I prepared our Create a Slick Flickr Gallery with SimplePie tutorial, it occurred to me that we haven’t posted many articles that covered SimplePie. Considering how fantastic a library it is, I think it’s time to take a closer look.
You Still Can’t Create a jQuery Plugin?
It’s tough. You read tutorial after tutorial, but they all assume that you know more than you actually do. By the time you’re finished, you’re left feeling more confused than you initially were. Why did he create an empty object? What does it mean when you pass “options” as a parameter? What do “defaultsettings” actually do?
Never fear; I’m going to show you exactly how to build your own “tooltip” plugin, at the request of one of our loyal readers.
jQuery for Absolute Beginners
Hi everyone! Today, I posted the final screencast in my “jQuery for Absolute Beginners” series on the ThemeForest Blog. If you’re unfamiliar – over the course of about a month, I posted fifteen video tutorials that teach you EXACTLY how to use the jQuery library. We start by downloading the library and eventually work our way up to creating an AJAX style-switcher.
Diving into PHP: Video Series
Today marks the beginning of a brand new series on the ThemeForest blog that will show you EXACTLY how to get started with PHP. Just as with the “jQuery for Absolute Beginners” screencasts, we’ll start from scratch and slowly work our way up to some more advanced topics. If you’ve been hoping to learn this language, be sure to pay a visit and subscribe to the RSS feed to be updated when new videos are posted.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
Pingback: BLOG { jörg steinhauer } » Gods of GFX #2
Pingback: How to Build a Super Duper News Scroller | DeanWorks
Pingback: NETTUTS.com: How to Build a Super Duper News Scroller : Dragonfly Networks
Pingback: Daily Digest for 2009-03-20 | This is Chris
Pingback: vivanno.com::aggregator » Archive » Construire un super nouveau scroll
Pingback: Construire un super nouveau scroll | traffic-internet.net
Pingback: ForTheLose.org - FTL Weekly Review - Vol. 7
Pingback: NETTUTS.com: How to Build a Super Duper News Scroller | pcsourcenetwork.com