jQuery Spy (vertical ticker): after 4th iteration, list items are animated down, increasing the height of container

Question

we are using jQuery spy plugin by Remy Sharp, to build a vertical spy ticker. The module works fine for first 4 iterations and thereafter behaving strange - the list elements are eventually crawling down (increasing the actual height) of the parent container (a yellow border seen on the bottom is the actual border of parent div).

We don't see this problem on the original demo provided with this plugin website (http://jqueryfordesigners.com/demo/simple-spy.html).

But it happens only on our page, something tricky is there that needs a fix - please see our page, URL: http://www.jean.net16.net/

Thanks a lot for your support, in advance!

PS. for your reference on the spy plugin source: http://jqueryfordesigners.com/simple-jquery-spy-effect/

FYI, the ticker doesn't even appear in Chrome - there's definitely something wrong. — avramov, Apr 30 '12 at 08:35
with #adbar { height: 240px !important; overflow: hidden; } gets better — Toni Michel Caubet, Apr 30 '12 at 08:37
@ToniMichelCaubet thanks, but we have to fix the weird behaviour (crawling down) of this module — Jean, Apr 30 '12 at 08:43
@egasimus thanks, but its working on chrome n firefox here, but same problem.. — Jean, Apr 30 '12 at 08:45
please check this thread, http://stackoverflow.com/questions/5007892/jquery-simple-spy-no-longer-works-with-jquery-1-5 ..it is relevant to our topic, it seems there were some issues previously when this plugin is used with older versions of jQuery. Now, we are using jQuery 1.7.2 for this page, and plugin is working, but with this bug persists. — Jean, Apr 30 '12 at 09:46

score 1 · Answer 1 · edited Jul 22 '12 at 20:37

    $(function () {
    $('ul.spy').simpleSpy();
    });

    (function ($) {

    $.fn.simpleSpy = function (limit, interval) {

    limit = limit || 4;
    interval = interval || 4000;

    return this.filter(function(){ return typeof $(this).data("simpleSpy") == "undefined" }).each(function () {

        $(this).data("simpleSpy",true);

        var $list = $(this),
            items = [], // uninitialised
            currentItem = limit - 1,
            total = 0, // initialise later on
            height = $list.find('> li:first').height();

        $list.css({"position":"relative","overflow":"hidden"});
        $list.find('> li').each(function () {
            items.push('<li>' + $(this).html() + '</li>');
        });

        total = items.length;

        $list.find('> li').filter(':gt(' + (limit - 1) + ')').remove();

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

        // 2. effect        
        function spy() {
            // insert a new item with opacity and height of zero
            var $insert = $(items[currentItem]).css({
                height : 0,
                opacity : 0
            }).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);

                // AND at the same time - decrease the height of the LAST item
                 //$(this).animate({ height : 0 }, 1000, function () {
                    //finally fade the first item in (and we can remove the last)
                    $(this).remove();
                //});
            });

            currentItem++;

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

            setTimeout(spy, interval)
        }

        spy();
    });
};

})(jQuery);

//end of JS

also note that the markup should be like this:

Fisrt Block content goes here — Jean, May 28 '12 at 11:49

jQuery Spy (vertical ticker): after 4th iteration, list items are animated down, increasing the height of container

1 Answers1