Question

I’m using a jquery plugin on my page, vTicker, “for easy and simple vertical news automatic scrolling”. I’m using it in combination with an rss jquery plugin. It’s working fine, but I need to create a button that will do a manual scroll. Can anyone tell me how to do this? I’m guessing I need to call the moveUp function from the vTicker file, but because of the way the function is created, as well as how the vticker itself is created, I’m not really sure how to do it.

I create my vTicker like this:

$('#ticker1').rssfeed(uRL).ajaxStop(function() {
$('#ticker1 div.rssBody').vTicker();
})

And here is the vTicker code:

/*
* Tadas Juozapaitis ( [e-mail] )
*/
(function($){
$.fn.vTicker = function(options) {
    var defaults = {
        speed: 700,
        pause: 15000,
        showItems: 3,
        animation: '',
        mousePause: true,
        isPaused: false
    };

    var options = $.extend(defaults, options);


    moveUp = function(obj2, height){


        if(options.isPaused)
            return;

        var obj = obj2.children('ul');

        var iframe = $('#iFrame2');


        first = obj.children('li:first').clone(true);
        second = obj.children('li:odd:first').clone(true);

        iframe.attr('src', (second.children('h4').children('a').attr("href")));


        obj.animate({top: '-=' + height + 'px'}, options.speed, function() {
            $(this).children('li:first').remove();
            $(this).css('top', '0px');
        });

        if(options.animation == 'fade')
        {
            obj.children('li:first').fadeOut(options.speed);
            obj.children('li:last').hide().fadeIn(options.speed);
        }

        first.appendTo(obj);
    };

    return this.each(function() {
        var obj = $(this);
        var maxHeight = 0;

        obj.css({overflow: 'hidden', position: 'relative'})
            .children('ul').css({position: 'absolute', margin: 0, padding: 0})
            .children('li').css({margin: 0, padding: 0});

        obj.children('ul').children('li').each(function(){
            if($(this).height() > maxHeight)
            {
                maxHeight = $(this).height();
            }
        });

        obj.children('ul').children('li').each(function(){
            $(this).height(maxHeight);
        });

        obj.height(maxHeight * options.showItems);

        var interval = setInterval(function(){ moveUp(obj, maxHeight); }, options.pause);

        if(options.mousePause)
        {
            obj.bind("mouseenter",function(){
                options.isPaused = true;
            }).bind("mouseleave",function(){
                options.isPaused = false;
            });
        }
    });
};
})(jQuery);

Thanks for reading.

Answer 1

The short answer is, you can’t. The moveUp function is totally isolated within the scope of the plugin, and you cannot call it directly.

To modify the plugin so that you can manually scroll, add this just before the line return this.each(function() {:

$.fn.extend({
  vTickerMoveUp: function() {
    var obj = $(this);
    var maxHeight = 0;
    obj.children('ul').children('li').each(function(){
        if($(this).height() > maxHeight) maxHeight = $(this).height();
    });
    moveUp(obj, maxHeight);
  }
});

Then, to scroll, do this:

var ticker = $('#ticker1 div.rssBody').vTicker();
ticker.vTickerMoveUp();