Jquery Spy

1 March 2009| 7 Comments| Print

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.

demodemo

7 Comments

  • Ignacio Ricci

    Sweet. I like it.
    Thanks :)

  • luk3

    Looks very good, i gonna try to feed data from a db, thanks for share.

  • Ashley (author)

    Luk3,

    Let me know how you get on, or if you have any problems :)

    Ashley

  • 網站製作學習誌 » [Web] 連結分享

    [...] Jquery Spy [...]

  • ash

    how would you edit this to stop the content from looping back to 1. eg, once the content gets to 14, it stops until you add 15 to the list?

  • dlv

    great! i think this upgrade is really nice, especially the start delay, i’m gonna try it !

  • A.Jendrysik

    Nice effect, i will build this effect in a Typo3 site.

    Greetings from de

Leave a comment...

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This is a Gravatar-enabled site. To get your own globally-recognized-avatar, register at Gravatar.