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

FromCode delay to start

4 Answers 85 Views
Rotator
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Daniel asked on 07 May 2010, 12:36 AM
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> 
 

4 Answers, 1 is accepted

Sort by
0
Accepted
Fiko
Telerik team
answered on 12 May 2010, 07:40 AM
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.
0
Daniel
Top achievements
Rank 1
answered on 15 Jun 2010, 03:15 AM
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
0
Accepted
Fiko
Telerik team
answered on 17 Jun 2010, 03:04 PM
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
0
Daniel
Top achievements
Rank 1
answered on 17 Jun 2010, 11:25 PM
Thanks Fiko, that did the trick.

Daniel
Tags
Rotator
Asked by
Daniel
Top achievements
Rank 1
Answers by
Fiko
Telerik team
Daniel
Top achievements
Rank 1
Share this question
or