Use your left/right keys to browse tutorials
Jquery Spy

Jquery Spy

1 Star2 Stars3 Stars4 Stars5 Stars
Posted on March 1, 2009

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



More tutorials from Papermashup
Comments
15 discussions around Jquery Spy
Older Comments
  1. AK says:

    This doesn’t work with the latest JQuery.

  2. Cool Work. i like this tutorial. regards from kassel

  3. Khang Toh says:

    For anyone having trouble with with latest version of jQuery, something after 1.4.2 broke spy, the last version that did work is 1.4.2

Older Comments




Never miss an update from Papermashup

Get notified about the latest tutorials and downloads.

Subscribe by Email

Get alerts directly into your inbox after each post and stay updated.
Subscribe
OR

Subscribe by RSS

Add our RSS to your feedreader to get regular updates from us.
Subscribe

Get in contact

Please use the form below to get in contact. If your question is related to a free script download, please use the comments on the article page as community members are more likely to respond quicker than I can personally.

About Me

I'm Ashley Ford, Co-founder and Technical Director at Harkable.com London, UK. Previously I worked at InMobi, Spotify and MySpace. My interests include photography and making short videos I'm also an avid F1 fan. I'm always working on side projects. Here are a few: Easy Poll, We Deliver.



What do you specialise in?

I spend a lot of time coding in PHP and MySQL, as well as front end XHTML and CSS. I also specialise in javascript and the jQuery framework as well as being an avid designer. You can find me on dribbble

Interested in advertising?

If you'd like to advertise on Papermashup.com please get in touch via the contact link below for advertising opportunities.

How do I contact you

You can contact me here. and I'm available for consultation, freelance, programming book reviews.

Get on the mailing list

Join over 3000 people who have subscribed to the Papermashup inbox message, and be the first to find out about tutorial, competitions and giveaways.