Is there any way to solve this problem?

much thanks in advance! John

With best regards, Paul

just wanted to give you some feedback, I tried around the last days to make this work with the spy/scrolling effect and the hoverscroll plugin…and because your code limits the DOM for my purposes I had to switch the code behind the scroller (I needed something that doesn’t fade out or remove the items…means if overflow is set to visible on the container, all the items should be displayed)…so I took the new jQuery Tools 1.1 (not yet released) and got it to work, I just don’t have the beautiful fading effect anymore (that hurts a little =D) but it does the job it’s supposed to…do you really think that is unpractical (understood your last comment a bit like this…)

thx anyways for your great work!

I say this because: the spy works by just showing 3 items, when a new item comes in, it fades the last item down, introduces the new item (and then removes the old last item). Therefore, you’ve only ever got 3 in the DOM.

If you don’t remove, you still have the problem of the last item being made invisible. So perhaps you can remove the lines of code in the spy that fade the last item down & then remove, but you’d also have to over come the missing scroll bar where the old items overflow (but perhaps you’ve solved that using the hoverScroll plugin?).

I would definitely encourage you to look at the drawing board again. One question that might solve your who issue: does the news come in that frequently that you need a spy? Or equally, do users spend long enough on that page to justify a spy? Or even if it’s for aesthetics, as the QuickSnapper one was, is it high enough and focused on the page?

If not – I think you should look at removing the spy. I don’t mean to discourage, only to keep stuff as simple as possibly when we’re working with pretty tricky UIs.

Hope that helps.

(function ($) {

$.fn.simpleSpy = function (limit, interval) {
  limit = limit || 3;
  interval = interval || 7000;

return this.each(function () {
  // 1. setup
    // capture a cache of all the list items
    // chomp the list down to limit li elements
    var $list = $(this),
      running = true,
      items = [], // uninitialised
      currentItem = limit,
      total = 0, // initialise later on
      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();

    $list.bind('stop', function () {
      running = false;
    }).bind('start', function () {
      running = true;
    });

    // 2. effect        
    function spy() {
      if (running) {
        // 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);

          // 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);

and it’s initialized with this function:

$(function () {
  $('ul.scroller').simpleSpy().bind('mouseenter', function () {
    $(this).trigger('stop');
  }).bind('mouseleave', function () {
    $(this).trigger('start');
  });
});

I combined it with the plugin from here: http://rascarlito.free.fr/hoverscroll/

this one is initialized as below (the plugin has to be installed):

$('ul.scroller').hoverscroll({
  vertical: true,
  width: 298,
  height: 330
});

you can see a half working example one http://devcfm.031.be/ when you scroll down to the bottom of the page, there is a spy for rss-news (I generate the li’s with simple-pie, thus there is already something like your newer version), when you hover it, it stops perfectly and also the scrolling would work, but the problem is, that there are only the 3 displayed newsitems visible, the others are not there somehow and because of that there is not much to scroll =)…so now my question:

How would I display the whole items.length (all list items visible but because overflow is set to hidden, only three are really visible, the scrolling does the rest) on mouseover?

could it be something like an else statement after the if(running) statement, such a thing as: else (when the spy is not running) display items.length? How can I achieve that? And how does it get back to “normal” (spy-functionality) after mouseout?

thx for any answer!

I would just like to know how I can add this effect to your script…would I have to place it in the “if(running)” statement of the script? So in case the spy is not running it activates the hoverscroll-plugin and then on mouseout it gets back to the spy animation?

thx 4 your help and keep up the good work!

cheers,

LuK

I try to integrate this ajax spy with WordPress but I need to load ajax-spy-helper.php from an other place than the root (from my theme directory in wordpress)…

I try to use a relative path with: $source.load(‘../ajax-spy-helper.php’); but I can’t load the file when I put it on my theme (from the root, no problem but I can’t use the worpress functions)…

Have you got a clue ?

Thanks

http://stocktwits.com/streams/all?popout=true

Please help me to do this effect.

I have to update my old code. but do you have option for Play/Stop button?

Thanks