Advertisement
News

How to Build a Super Duper News Scroller

by

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 Product

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...

  • Screenshot 1

    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.

    Visit Article

  • Screenshot 1

    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.

    Visit Article

  • Screenshot 1

    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.

    Visit Article

  • Screenshot 1

    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.

    Visit Article

Related Posts
  • Web Design
    UX
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Code
    PHP
    Creating a Photo Tag Wall With Twilio Picture Messaging & PHPProcedural to oop php retina preview
    Twilio's recently announced Picture Messaging has vastly opened up what we can do with text messaging, now we can attach photos to our text messages and have them get used in different ways. In our case, we are going to build a Photo Tag Wall, which will contain photos linked to tags that will be displayed on a website.Read More…
  • Code
    PhoneGap
    PhoneGap: Build a Feed Reader - Project StructurePhonegap feed reader@2x
    Although not specifically created to work together, jQuery Mobile and Cordova (also known as PhoneGap) are a very powerful duo to create hybrid, mobile apps. This series will teach you how to develop a feed reader using web technologies and these two frameworks. Over the course of this series, you'll also become familiar with the Cordova Connection and Storage Core Plugins and the Google Feed API.Read More…
  • Code
    Plugins
    A Better Forum List Widget for bbPressBbpress
    When bbPress was still a standalone installation, I had tried it out and wasn't really impressed. Things were clunky and it didn't always work the way it was supposed to. After languishing for a few years, Automattic decided to take bbpress and turn it into a plugin, improving the functionality leaps and bounds and making it a strong contender amongst other forum option for WordPress.Read More…
  • Code
    JavaScript & AJAX
    jQuery Succinctly: jQuery PluginsJquery cover
    Use the $ Alias When Constructing a Plugin When writing a jQuery plugin, the same conflict prevention routine used with regular, old jQuery code should be implemented. With this in mind, all plugins should be contained inside a private scope where the $ alias can be used without fear of conflicts or surprising results.Read More…
  • Code
    JavaScript & AJAX
    jQuery Succinctly: Core jQueryJquery cover
    Base Concept Behind jQuery While some conceptual variations exist (e.g. functions like $.ajax) in the jQuery API, the central concept behind jQuery is "find something, do something." More specifically, select DOM element(s) from an HTML document and then do something with them using jQuery methods. This is the big picture concept.Read More…