FromCode delay to start

[Daniel]

Hi. We previously had a page with several rotators on it. They were rotated from ButtonsOver which worked fine. We're now using FromCode as we needed to position the rotator button controls else where. Everything is working okay except when you initially mouseover the button control (first time), there is the normal FrameDuration of 700ms. We want it to start straight away like ButtonsOver without the initial delay. Thanks.

Daniel

JS

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

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

        function showNextItem(clickedButton, rotator, direction) {
            rotator.showNext(direction);
            refreshButtonsState(clickedButton, rotator);
        }

        // Refreshes the Stop and Start buttons
        function refreshButtonsState(clickedButton, rotator) {
            var jQueryObject = $telerik.$;
            var className = jQueryObject(clickedButton).attr("class");

            switch (className) {
                case "start":
                    {// Start button is clicked

                        jQueryObject(clickedButton).removeClass();
                        jQueryObject(clickedButton).addClass("startSelected");

                        // Find the stop button. stopButton is a jQuery object
                        var stopButton = findSiblingButtonByClassName(clickedButton, "stopSelected");

                        if (stopButton) {// Changes the image of the stop button
                            stopButton.removeClass();
                            stopButton.addClass("stop");
                        }

                    } break;
                case "stop":
                    {// Stop button is clicked

                        jQueryObject(clickedButton).removeClass();
                        jQueryObject(clickedButton).addClass("stopSelected");

                        // Find the start button. startButton is a jQuery object
                        var startButton = findSiblingButtonByClassName(clickedButton, "startSelected");
                        if (startButton) {// Changes the image of the start button
                            startButton.removeClass();
                            startButton.addClass("start");
                        }

                    } break;
            }
        }

        // Finds a button by its className. Returns a jQuery object
        function findSiblingButtonByClassName(buttonInstance, className) {
            var jQuery = $telerik.$;
            var ulElement = jQuery(buttonInstance).parent().parent(); // get the UL element
            var allLiElements = jQuery("li", ulElement); // jQuery selector to find all LI elements

            for (var i = 0; i < allLiElements.length; i++) {
                var currentLi = allLiElements[i];
                var currentAnchor = jQuery("A:first", currentLi); // Find the Anchor tag

                if (currentAnchor.hasClass(className)) {
                    return currentAnchor;
                }
            }
        }

ASPX

<telerik:RadRotator ID="rrNewToTheZoo" runat="server" Height="196px" Width="220px"
                                            Skin="Default" FrameDuration="700" ItemWidth="220px" RotatorType="FromCode" ScrollDirection="Up"
                                            DataSourceID="sdsNewToTheZoo">
                                            <ItemTemplate>
                                                <table border="0" cellpadding="0" cellspacing="0" class="mini_profile_info">
                                                    <tr>
                                                        <td>
                                                            <a href="/people/profiles/?empno=<%# DataBinder.Eval(Container.DataItem, "pkEmployeeNumber")%>">
                                                                <%# DataBinder.Eval(Container.DataItem, "fullname")%></a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <%# DataBinder.Eval(Container.DataItem, "positionDescription")%>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td style="padding-bottom: 10px;">
                                                            <%# DataBinder.Eval(Container.DataItem, "directorate")%>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </ItemTemplate>
                                        </telerik:RadRotator>

                                                    <div class="rotator_custom_up">
                                                        <a href="#" onmouseout="stopRotator(this, $find('<%= rrNewToTheZoo.ClientID %>')); return false;"
                                                            onmouseover="startRotator(this, $find('<%= rrNewToTheZoo.ClientID %>'), Telerik.Web.UI.RotatorScrollDirection.Up); return false;">
                                                            <img src="/images/rotator_up_out.gif" width="9" height="6" alt="" /></a></div>

[Fiko]

Hello Daniel,

In your scenario you can use ButtonsOver mode of the RadRotator control control and custom buttons at the same time. You can set the custom buttons in the RadRotator's declaration and then they will be used instead of the embedded ones:

<telerik:RadRotator ID="RadRotator1" runat="server" DataSourceID="XmlDataSource1"
    InitialItemIndex="2" RotatorType="ButtonsOver" Width="100px" ItemWidth="100px" ItemHeight="100px"
    Height="100px">
    <ItemTemplate>
        <asp:Image ID="Image1" runat="server" CssClass="imgSize" ImageUrl='<%# XPath("ImageURL") %>'
            AlternateText="IMAGE" />
    </ItemTemplate>
    <ControlButtons LeftButtonID="LeftButtonID" RightButtonID="RightButtonID" />
</telerik:RadRotator>
<img id="LeftButtonID" alt="Left" src="left.jpg" />
<img id="RightButtonID" alt="Right" src="right.jpg" />

I hope this helps.

Greetings,
Fiko
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.

[Daniel]

Hi Fiko, sorry for the late response. That works okay. One thing that is missing though is the mouse over affect you get with the standard buttonsover. Is there anyway to accomodate for this? Thanks.

Daniel

[Fiko]

Hello Daniel,

In your case you can use CSS approach (using hover pseudo class) or attach handlers to the OnClientButtonOut and OnClientButtonOver handlers:

<telerik:RadRotator ID="RadRotator1" runat="server" DataSourceID="XmlDataSource1"
    InitialItemIndex="2" RotatorType="ButtonsOver" Width="100px" ItemWidth="100px"
    ItemHeight="100px" Height="100px">
    <ItemTemplate>
        <asp:Image ID="Image1" runat="server" CssClass="imgSize" ImageUrl='<%# XPath("ImageURL") %>'
            AlternateText="IMAGE" />
    </ItemTemplate>
    <ControlButtons LeftButtonID="LeftButtonID" RightButtonID="RightButtonID" OnClientButtonOver="OnClientButtonOver"
        OnClientButtonOut="OnClientButtonOut" />
</telerik:RadRotator>

Then add manually add and remove your  css classes to the buttons as shown bellow:

<script type="text/javascript">
    function OnClientButtonOut(oRotator, args)
    {
        var hoveredElement = args.get_button();
        $telerik.$(hoveredElement).removeClass("buttonHover");
    }

    function OnClientButtonOver(oButton, args)
    {
        var hoveredElement = args.get_button();
        $telerik.$(hoveredElement).addClass("buttonHover");
    }
</script>

Greetings,
Fiko
the Telerik team

[Daniel]

Thanks Fiko, that did the trick.

Daniel