FromCode delay to start

5 posts, 2 answers
  1. Daniel
    Daniel avatar
    175 posts
    Member since:
    Feb 2009

    Posted 06 May 2010 Link to this post

    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> 
                                                                <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">  
                                                            <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> 
     
  2. Answer
    Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 12 May 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Daniel
    Daniel avatar
    175 posts
    Member since:
    Feb 2009

    Posted 14 Jun 2010 Link to this post

    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
  5. Answer
    Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 17 Jun 2010 Link to this post

    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
    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
  6. Daniel
    Daniel avatar
    175 posts
    Member since:
    Feb 2009

    Posted 17 Jun 2010 Link to this post

    Thanks Fiko, that did the trick.

    Daniel
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017