This is a migrated thread and some comments may be shown as answers.

AutoAdvance with Buttons?

2 Answers 103 Views
Rotator
This is a migrated thread and some comments may be shown as answers.
Christopher
Top achievements
Rank 1
Christopher asked on 29 Feb 2012, 05:26 PM
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

2 Answers, 1 is accepted

Sort by
0
Kevin
Top achievements
Rank 2
answered on 02 Mar 2012, 02:23 PM
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.
0
Slav
Telerik team
answered on 02 Mar 2012, 03:59 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Rotator
Asked by
Christopher
Top achievements
Rank 1
Answers by
Kevin
Top achievements
Rank 2
Slav
Telerik team
Share this question
or