AutoAdvance with Buttons?

[Christopher]

What is the preferred way to have a rotator auto advance ads, but also allow buttons for going back if they missed one?  It seems like the buttons are not available if you set the type to auto advance...  is there something there that I am missing?

Thanks,

-Chris

[Kevin]

Hello Christopher,

There is no option to have AutoAdvance along with buttons. The only way to achieve what you want is to use the FromCode RotatorType and then implement the scroll logic yourself. Here's an example of how I did it.

ASPX:

<telerik:RadRotator ID="rtMarquee" runat="server" ScrollDirection="Up" Height="100px" ItemHeight="100px" ItemWidth="600px" Width="600px"
                FrameDuration="8000" RotatorType="FromCode" OnClientLoad="rtMarquee_OnClientLoad"
                OnClientMouseOver="rtMarquee_OnClientMouseOver" OnClientMouseOut="rtMarquee_OnClientMouseOut"
                ScrollDuration="1000">
                <ItemTemplate>
                    ...Item Template stuff
                </ItemTemplate>
            </telerik:RadRotator>

<div class="marqueeButtons">
    <a class="upButton" title="Next" onclick="showNextItem(Telerik.Web.UI.RotatorScrollDirection.Up);return false;"></a>
    <a id="startButton" title="Pause" class="pauseButton"></a><a class="downButton" title="Previous" onclick="showNextItem(Telerik.Web.UI.RotatorScrollDirection.Down);return false;"></a>
</div>

JS:

function rtMarquee_OnClientLoad(sender, args) {
                try {
                    startRotator();

                    // setup jQuery toggle
                    $telerik.$("#startButton").toggle(stopRotator, startRotator);
                }
                catch (e) {
                }
            }
            function rtMarquee_OnClientMouseOver(sender, args) {
                try {
                    stopRotator(false);
                }
                catch (e) {
                }
            }
            function rtMarquee_OnClientMouseOut(sender, args) {
                try {
                    startRotator(false);
                }
                catch (e) {
                }
            }

            function startRotator(toggleImage) {
                if (typeof toggleImage == "undefined") {
                    toggleImage = true;
                }

                var rotator = $find("<%=rtMarquee.ClientID %>");

                if (!rotator.autoIntervalID) {
                    rotator.autoIntervalID = window.setInterval(function() {
                        rotator.showNext(Telerik.Web.UI.RotatorScrollDirection.Up);
                    }, rotator.get_frameDuration());

                    if (toggleImage) {
                        // switch class on button
                        $telerik.$("#startButton").attr("class", "pauseButton");
                        $telerik.$("#startButton").attr("title", "Pause");
                    }
                }
            }

            function stopRotator(toggleImage) {
                if (typeof toggleImage == "undefined") {
                    toggleImage = true;
                }

                var rotator = $find("<%=rtMarquee.ClientID %>");

                if (rotator.autoIntervalID) {
                    window.clearInterval(rotator.autoIntervalID);
                    rotator.autoIntervalID = null;

                    if (toggleImage) {
                        // switch class on button
                        $telerik.$("#startButton").attr("class", "startButton");
                        $telerik.$("#startButton").attr("title", "Start");
                    }
                }
            }

            function showNextItem(direction) {
                var rotator = $find("<%=rtMarquee.ClientID %>");

                // check if rotator moving
                var isMoving = rotator.autoIntervalID ? true : false;

                stopRotator(false);
                rotator.showNext(direction);

                if (isMoving) {
                    startRotator(false);
                }
            }

My buttons move up and down, but you can change to move left and right if you want.

I used the following demo for as a starting point for the js code I wrote above.

http://demos.telerik.com/aspnet-ajax/rotator/examples/clientapicontrol/defaultcs.aspx

I hope that helps.

[Slav]

Hello guys,

There is another option to achieve this. You can use a RadRotator control with RotatorType property, set to Buttons, and configure the handler of the OnClientLoad event as shown in the following code snippet in order to incorporate auto scrolling:

function OnClientLoad(rotator, args) {
    if (!rotator.autoIntervalID) {
        rotator.autoIntervalID = window.setInterval(function () {
            rotator.showNext(Telerik.Web.UI.RotatorScrollDirection.Left);
        }, rotator.get_frameDuration());
    }
}

All the best,
Slav
the Telerik team