Question

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);
Was it helpful?

Solution

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/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top