RotatorType: need Buttons AND AutomaticAdvance

[Adam]

Hi,

We need the rotator to cycle using both the buttons AND advance automatically every 5 seconds if nothing is clicked
(RotatorType = Buttons AND AutomaticAdvance). Is this possble?

Also, we would like to pause the automatic advance if the user's mouse is hovered over the rotator.

Thanks!

[Shinu]

Hello Adam,

You could use client side api for rotating/pausing radrotator based on the requirement. The following documentation shows important client side methods of RadRotator.

RadRotator Client-Side

-Shinu.

[Adam]

Can you please send a code sample for both requests? That page has no practical samples.

[Pero]

Hi Adam,

Please take a look at the following examples from our online demos web-site:

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

You could easily combine them to implement your specific scenario.

PS. Visit our Code Library and Knowledge Base for additional information about the RadRotator control.


Sincerely yours,
Pero
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Adam]

Thanks, I was able to get this working. However, it should be easier to combine effects via the properties, without all of this script. Otherwise, you're better off using the free jquery cycle plugin :)

Here's my solution:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Rotator.ascx.cs" Inherits="App_Custom_ControlTemplates_Callouts_Rotator" %>
<telerik:RadRotator ID="rotator1" runat="server" Width="240px" Height="104px" ScrollDuration="500"
    FrameDuration='<%#FrameDuration%>' ItemWidth="200px" ItemHeight="104px" EnableAjaxSkinRendering="true"
    EnableEmbeddedSkins="true" EnableViewState="true">
    <ItemTemplate>
        <div class="rotator-wrapper">
            <strong class="title">
                <%#Eval("Title")%></strong>
            <br />
            <%#Eval("Content")%>
        </div>
    </ItemTemplate>
</telerik:RadRotator>

<script type="text/javascript">

    $(document).ready(
            function() {
            
                startRotator($find('<%= rotator1.ClientID %>'), Telerik.Web.UI.RotatorScrollDirection.Left);

                $(".rrClipRegion").hover(
                  function() {
                        stopRotator($find('<%= rotator1.ClientID %>'));
                  },
                  function() {
                        startRotator($find('<%= rotator1.ClientID %>'), Telerik.Web.UI.RotatorScrollDirection.Left);
                  }
                );


            }
        );

    function startRotator(rotator, direction) {
        if (!rotator.autoIntervalID) {
            //refreshButtonsState(clickedButton, rotator);
            rotator.autoIntervalID = window.setInterval(function() {
                rotator.showNext(direction);
            }, rotator.get_frameDuration());
        }
    }

    function stopRotator(rotator) {
        if (rotator.autoIntervalID) {
            //refreshButtonsState(clickedButton, rotator)
            window.clearInterval(rotator.autoIntervalID);
            rotator.autoIntervalID = null;
        }
    }

    function showNextItem(rotator, direction) {
        rotator.showNext(direction);
        //refreshButtonsState(clickedButton, rotator);
    }
</script>

[Chris]

Adam,

Thanks for your solution; I'm going to try and see how it works on my end, but that's exactly the functionality I'm looking for.  I agree it would be nice to have it as a standard rotator type.  I don't see the benefit of the AutomaticAdvance if you can't stop and go back and review something that just scrolled by.  My particular scenario I'm displaying five of potentially hundreds of products.  The client wants a slow auto advance, but if someone sees something they want, and then it auto advances, there'd be no way to go back with the default autoadvance. 

[Matteo Tognolo]

Hi to all,

I have tested the code above:

function stopRotator(rotator) {
        if (rotator.autoIntervalID) {
            //refreshButtonsState(clickedButton, rotator)
            window.clearInterval(rotator.autoIntervalID);
            rotator.autoIntervalID = null;
        }
    }

and receive a javascript error in "autoIntervalID". 'autoIntervalID' is null or not an object.

I have download the last version of all kit and instal it, but the error is the same.

How can I resolve?

Thanks in advance,

Matteo

[Niko]

Hi Matteo,

Can you provide more information about the error:

1. On which line it occurs?
2. What is the message?
3. When is the error occurring - at page load, when unloading the page or any other event?

Kind regards,
Nikodim
the Telerik team

[H. Baris]

Hi,

I have same issue.
Microsoft JScript runtime error: Unable to get value of the property 'autoIntervalID': object is null or undefined

on page load, in bold line:

function startRotator(rotator, direction) {
    if (!rotator.autoIntervalID) {
        //refreshButtonsState(clickedButton, rotator);
        rotator.autoIntervalID = window.setInterval(function () {
            rotator.showNext(direction);
        }, rotator.get_frameDuration());
    }
}

Correction:
If the script is placed on top of rotator's error taken, not taken placed in the bottom.
But buttons are not functional.

Another and last correction:
I converted Rotator's control buttons to img. And added onclick events to imgs. Everythings worked. 

[Niko]

Hello,

Such an error message is typical for the Internet Explorer browser and it is usually about the object that should have the property, and for some reason that object is null or undefined. This means that in your case for some reason the rotator variable is null or undefined, not the property autoIntervalID.
The reason for such a behavior may be different and the first that I can think of is reloading the RadRotator through Ajax requests and not refreshing the rotator reference. Still I will need a sample runnable project in order to investigate the issue in details. For that I advise you to open a support ticket and attach the sample project there.

Hope this helps.

Best wishes,
Niko
the Telerik team

[Leigh]

Apologies for replying to an old thread however I wanted to add a small addition to H. Baris's response that may be handy for anyone else attempting this.

As this error is being caused by the javascript running before the page is fully loaded I corrected the issue by swapping the dom ready for a load event. For example swap:

$(document).ready(function () {

for

$(window).load(function () {