Play/Pause button working with hot spots

[marcelo2605]

I'm using the plugin with a simple configuration:

$("div#makeMeScrollable").smoothDivScroll({
        autoScrollingMode: "onStart",
        autoScrollingDirection: "right"
});

So I need to add a play / pause button. And did the following:

$("#btn").text('pause');
$("#btn").toggle(
        function(){
                $("#makeMeScrollable").smoothDivScroll("stopAutoScrolling")
                $(this).text('play');
        },
        function(){
                $("#makeMeScrollable").smoothDivScroll("startAutoScrolling")
                $(this).text('pause');                          
        }
)

This works well. But when I click on one of the hotspots with the scroll paused, I have to click twice on the play / pause button to pause the scroll again. Is there a way to fix this?

Thanks for this great plugin. Many brazilian developers use it.

UPDATE:

I tried this and it worked for a while, but after the page crashed

            $("#makeMeScrollable").smoothDivScroll({autoScrollingStopped: function(eventObj, data) {
                $('#btn').text('play');
                $('#btn').click(function(){
                    $("#makeMeScrollable").smoothDivScroll("startAutoScrolling")
                });
            }});            

            $("#makeMeScrollable").smoothDivScroll({autoScrollingStarted: function(eventObj, data) {
                $('#btn').text('pause');
                $('#btn').click(function(){
                    $("#makeMeScrollable").smoothDivScroll("stopAutoScrolling")
                });
            }});            

[tkahn]

Your code in the first example should work. Do you have an example page?
Also, you should end the method call with a semicolon:

$("#makeMeScrollable").smoothDivScroll("startAutoScrolling");

but I don't think it has anything to do with this error.

[marcelo2605]

Hello Thomas. Thanks for the reply!

Here is a test page with what I'm trying to do:

http://www.pratadesign.com.br/exemplos/

The problem is that after some use, the scroll stops working correctly.

[tkahn]

I think that at least part of problem has to do with with keeping the internal state of the plugin in sync with the toggle button. Consider this:

1. The plugin is autscrolling.
2. The user moves the mouse over one of the hot spots. What happens (internally) is that Smooth Div Scroll stops the autoscrolling.
3. Now you have a button that says "pause" to stop the auto scrolling, but since it has already been stopped clicking the button once won't do anything. You will have to click it twice to start the scrolling again. This is due to the toggle setting of the button.

To fix this you should rewrite the button code so instead of being just a toggle button it has to know if the scroller is running or not and change states after this. One way to accomplish this is to use the callbacks autoScrollingStopped and autoScrollingStarted.

Good luck!

[marcelo2605]

Hi Thomas,

I'm doing exactly that. See how's the code:

$("#makeMeScrollable").smoothDivScroll({autoScrollingStopped: function(eventObj, data) {
                $('#btn').text('play');
                $('#btn').click(function(){
                    $("#makeMeScrollable").smoothDivScroll("startAutoScrolling")
                });
            }});            

            $("#makeMeScrollable").smoothDivScroll({autoScrollingStarted: function(eventObj, data) {
                $('#btn').text('pause');
                $('#btn').click(function(){
                    $("#makeMeScrollable").smoothDivScroll("stopAutoScrolling")
                });
            }});            

It works for a while, but then the page starts to be slow and the play / pause button failure

[tkahn]

Hmm, it sounds like you get some sort of memory leak or circular reference. The code in the latest example is not okay since you are initializing Smooth Div Scroll twice. Will this work? I just wrote down the code in a text editor but I can't test it:

var scrolling = true;

var Stopped = function(eventObj, data) {
    $('#btn').text('play');
    scrolling = false;
}

var Started = function(eventObj, data) {
    $('#btn').text('pause');
    scrolling = true;
}

$("#makeMeScrollable").smoothDivScroll({
    autoScrollingStopped: Stopped,
    autoScrollingStarted: Started
});

$('#btn').click(function(){
    if(scrolling) {
        $("#makeMeScrollable").smoothDivScroll("stopAutoScrolling");
    } else {
        $("#makeMeScrollable").smoothDivScroll("startAutoScrolling")
    }
});

When seing how you use the plugin, an idea would be to provide a public method for getting the current status of the plugin. In its simplest form it could be isAutoScrolling that returned true or false. It could also be more advanced and return a JSON object with all kinds of status codes. There is one such method today (getScrollerOffset).

[marcelo2605]

Thanks Thomas. Now ist's works.

[tkahn]

Okay! Glad it worked out for you. I'm closing this issue now.