Getting silky smooth marquee to stop/start on mouseover/out on more than one area

Question

I'm using The Silky Smooth Marquee on my page and so far it's worked great, but I need to add another bit to it: the ability to stop the marquee when I'm hovering on the scrollbar, and start back up when not hovering on it.

The scrollbar is javascript: http://n-son.com/scripts/jsScrolling/. The div that contains the scrollbar has the class Scrollbar-Track. Here's my current version:

http://www.palosverdes.com/sandbox/soverflow/index.cfm

I've tried to tailor the existing jquery function but I've had no luck so far. Here's the function:

$('div.demo marquee').marquee('pointer').mouseover(function () {
        $(this).trigger('stop');
    }).mouseout(function () {
        $(this).trigger('start');
    }).mousemove(function (event) {
        if ($(this).data('drag') == true) {
            this.scrollLeft = $(this).data('scrollX') + ($(this).data('x') - event.clientX);
        }
    }).mousedown(function (event) {
        $(this).data('drag', true).data('x', event.clientX).data('scrollX', this.scrollLeft);
    }).mouseup(function () {
        $(this).data('drag', false);
    });
});

Answer 1

You can try adding mouseover/out events to the scrollbar just as you have for the marquis. Something like this:

$("#scrollbar").mouseover(function(){
    $('div.demo marquee').trigger('stop');
)};

$("#scrollbar").mouseout(function(){
    $('div.demo marquee').trigger('start');
)};

You trigger the events the same way you do with the mouseover events for the marquis itself, but you do it from the scrollbar's mouseover/out events.