0

I made the following fiddle as an example: http://jsfiddle.net/GR7pg/ but need it to move downwards instead of up.

Basically what happened is I made all this for weeks and then when I delivered to the client, they now want the ticker to move downwards instead of upwards.

I was able to get the top item to move down and then disappear but then the rest of the items moved up still. Someone who is more familiar with jquery could change this easily I would hope? But me I have tried all sorts of tweaks which resulted in strange behavior.

Any help greatly appreciated! THanks

(function ($) {
    $.fn.extend({
        vscroller: function (options) {
            var settings = $.extend({ speed: 1000, stay: 4000, newsfeed: '', cache: true }, options);

        return this.each(function () {
            var interval = null;
            var mouseIn = false;
            var totalElements;
            var isScrolling = false;
            var h;
            var t;
            var wrapper = $('.news-wrapper');
                    var newsContents = $('.news-contents');

                    var i = 0;
                    totalElements = $.find('.news').length;

                    h = parseFloat($('.news:eq(0)').outerHeight());
                    $('.news', wrapper).each(function () {
                        $(this).css({ top: i++ * h });
                    });
                    t = (totalElements - 1) * h;
                    newsContents.mouseenter(function () {
                        mouseIn = true;
                        if (!isScrolling) {
                            $('.news').stop(true, false);
                            clearTimeout(interval);
                        }
                    });
                    newsContents.mouseleave(function () {
                        mouseIn = false;
                        interval = setTimeout(scroll, settings.stay);
                    });
                    interval = setTimeout(scroll, 1);

            function scroll() {
                if (!mouseIn && !isScrolling) {
                    isScrolling = true;
                    $('.news:eq(0)').stop(true, false).animate({ top: -h }, settings.speed, function () {

                        clearTimeout(interval);
                        var current = $('.news:eq(0)').clone(true);
                        current.css({ top: t });
                        $('.news-contents').append(current);
                        $('.news:eq(0)').remove();
                        isScrolling = false;
                        interval = setTimeout(scroll, settings.stay);

                    });
                    $('.news:gt(0)').stop(true, false).animate({ top: '-=' + h }, settings.speed);
                }
            }

        });
    }
});
})(jQuery);
ch4rlie
  • 102
  • 2
  • 9

1 Answers1

3

It mostly consists of changing some of the tops to bottoms and changing increments to decrements, etc.

This should do it http://jsfiddle.net/GR7pg/16/

gotohales
  • 3,665
  • 1
  • 20
  • 34
  • It is definitely moving down now, nice! But all the elements are all stacked on top of eachother, thats what I am seeing in the example? – ch4rlie Nov 09 '12 at 22:00
  • Heh oops, it was working in Firefox but I saw that issue in IE. Just updated the link. Missed one of the top to bottom swaps! – gotohales Nov 09 '12 at 22:01
  • Wow, thanks so much I really appreciate. I did notice that now, it does not loop the boxes anymore. Once it runs out, it just slowly goes blank. I am trying to figure it out myself, but if you happen to know why!?!? thanks again! – ch4rlie Nov 09 '12 at 23:27
  • Jeez I'm on a roll. This last one should be right. I hope. Goodness. – gotohales Nov 10 '12 at 00:03