Jquery Spy

A while ago i spent a long time looking into how Digg made their original spy script, which i can no longer find on their site. They do however have a flash spy which is pretty cool and can be found here. I found a similar script to do the job over at leftlogic.com and used that for a while for a small project of my own, and over the past few weeks found the need to use the spy script for a project at MySpace that I’m working on that aggregates RSS feeds from various sources into one feed and displays them in a simple spy in date order. Due to the scale of the site the page needs to be cached and scalable for other projects.

So with that in mind I went on the hunt for a new Spy script and found this one over at Jquery for designers.

For the project, we modified the code so on load it paused before the next list item came in allowing for a better user experience, the code was also modified to order the list items correctly which was not the case in the original script.

This script requires Jquery version 1.2.6.

The JavaScript:

$(document).ready(function(){
	$('ul.spy').simpleSpy('4','4000');

			$('ul.spy li').reverseOrder(); 

});

(function ($) {
$.fn.reverseOrder = function() {
	return this.each(function() {
		$(this).prependTo( $(this).parent() );
	});
};

$.fn.simpleSpy = function (limit, interval) {
    limit = limit || 4;
    interval = interval || 4000;

    return this.each(function () {
            // capture a cache of all the list items
            // chomp the list down to limit li elements
        var $list = $(this),
            items = [], // uninitialised
            currentItem = limit,
            total = 0, // initialise later on
            start = 0,//when the effect first starts
            startdelay = 4000;//set the initial delay onload.
            height = $list.find('> li:first').height();

        // capture the cache
        $list.find('> li').each(function () {
            items.push('
	<li>' + $(this).html() + '</li>
');
        });

        total = items.length;

        $list.wrap('
<div class="spyWrapper">').parent().css({ height : height * limit });

        $list.find('> li').filter(':gt(' + (limit - 1) + ')').remove();
        function spy() {
            // insert a new item with opacity and height of zero
            var $insert = $(items[currentItem]).css({
                height : 0,
                opacity : 0,
                display : 'none'
            }).prependTo($list);

            // fade the last item out.
            $list.find('> li:last').animate({ opacity : 0}, 1000, function () {
                // increase the height of the new first item.
                 $insert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000);
                    // fade the first item in and remove the last one
                    $(this).remove();

            });

            currentItem++;
            if (currentItem >= total) {
                currentItem = 0;
            }

            setTimeout(spy, interval)
        }

        if (start < 1) {
               setTimeout(spy,startdelay);
                start++;
            } else {
            spy();
            }

    });
};

})(jQuery);

The HTML:

<div id="sidebar">
        <ul class="spy">
        	<li>
        		<a href="#" title="Title"><img width="70" height="70" src="image/image1.jpg" title="Title" /></a>
        		<h5><a href="#" title="View round">List Item 1</a></h5>
        		<p class="info">Nov 29th 2008 by <a href="#" title="Visit Profile">Profile</a></p>
        		<p class="tags"></p>
        	</li>
</ul>
</div>

The style and content of the spy is completely up to you, you could easily add a PHP database query and while loop to this script to make this dynamic. If anyone has any questions implementing a database query into this leave a comment below.

This entry was posted in Downloads, Tutorials, jQuery and tagged jQuery, Spy. Bookmark the permalink.