Papermashup

Subscribe


Tweets


"@KBedders @elerichardson I'm Free!!!!!! Call / Whatsapp me!!!"

@ashleyford 2 weeks ago

"@KBedders moomin!"

@ashleyford 2 weeks ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Jquery Spy

AshleyAshley

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

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 15
  • AK
    Posted on

    AK AK

    Reply Author

    This doesn’t work with the latest JQuery.


  • Webdesign Kassel
    Posted on

    Webdesign Kassel Webdesign Kassel

    Reply Author

    Cool Work. i like this tutorial. regards from kassel


  • Khang Toh
    Posted on

    Khang Toh Khang Toh

    Reply Author

    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


  • VaskarG
    Posted on

    VaskarG VaskarG

    Reply Author

    Great!! I am going to use this in my new project but when I try to increase image size(height). There is a problem in increasing height of image.

    Is there any solution for this?

    I am waiting your reply.

    Thank you


  • lamsonuniversal
    Posted on

    lamsonuniversal lamsonuniversal

    Reply Author

    Works like magic! Wonder how I can get the “spry ul” showing only 3 list items instead of 4 as is the default.
    Thanks


  • Hrvoje Kićo Ljubić
    Posted on

    Hrvoje Kićo Ljubić Hrvoje Kićo Ljubić

    Reply Author

    I have found one error in my code and i solved it, but now I cant transform it in horizontal style. In css i add one extra line to

    #sidebar li {
    display:inline;
    }

    but it isn’t in horizontal style , can you write me code for horizontal style


  • Hrvoje Kićo Ljubić
    Posted on

    Hrvoje Kićo Ljubić Hrvoje Kićo Ljubić

    Reply Author

    I have put this code into my code and it isn’t showing pictures when i open it in my browser(i have changed urls to images in my folder). do you know what the problem?


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @Hrvoje do you have a demo link you can post here so we can try and debug it?


  • A.Jendrysik
    Posted on

    A.Jendrysik A.Jendrysik

    Reply Author

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

    Greetings from de


  • dlv
    Posted on

    dlv dlv

    Reply Author

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


  • ash
    Posted on

    ash ash

    Reply Author

    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?


  • luk3
    Posted on

    luk3 luk3

    Reply Author

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


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      Luk3,

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

      Ashley


  • Ignacio Ricci
    Posted on

    Ignacio Ricci Ignacio Ricci

    Reply Author

    Sweet. I like it.
    Thanks :)