AutoAdvance with Buttons?

3 posts, 0 answers
  1. Christopher
    Christopher avatar
    2 posts
    Member since:
    May 2008

    Posted 29 Feb 2012 Link to this post

    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. Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 02 Mar 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 02 Mar 2012 Link to this post

    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.
Back to Top