Automatic rotator with paging buttons

6 posts, 1 answers
  1. Dave
    Dave avatar
    4 posts
    Member since:
    Jun 2010

    Posted 15 Sep 2010 Link to this post

    How do I create a rotator similar to the one on this homepage?

    I've tried so many different methods from the documentation and forum but none seem to work the same as the above.

    Basically, I have 4 big buttons with text in them that are meant to control the sliding rotator (button 1 skips to rotator frame 1 and pauses, button 3 skips to rotator frame 3 and pauses, etc.) when the mouse is not hovering over a button or rotator frame, the rotator is cycling through the 4 frames every 6 seconds.

    I think the reason I'm finding it difficult is because I also want the button's css class to change to ButtonOn when either the mouse is hovered over it or the rotator is on the frame corresponding to it. The rest of the time the class should be ButtonOff.

    Any suggestions anyone? Cheers!
  2. Answer
    Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 16 Sep 2010 Link to this post

    Hi Dave,

     I am glad to inform you that in the latest release you can now achieve what you require by using the new set_currentItemIndex method. Furthermore, there is an online demo which is very similar to what you need below:

    http://demos.telerik.com/aspnet-ajax/rotator/examples/pagerintegration/defaultcs.aspx

    I hope that my reply is helpful, let me know how it goes and in case you have additional questions.

    Greetings,
    Svetlina
    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. Dave
    Dave avatar
    4 posts
    Member since:
    Jun 2010

    Posted 17 Sep 2010 Link to this post

    Thanks this works great.

    There was a problem: When placing the rotator, buttons and RadCodeBlock in to an asp:Content control the buttons stopped working. The reason being that the button ID referenced in the javascript was rewritten server-side. If anybody else has this problem the solution is to change the line in the javascript example from:

    var buttonIdSelector = String.format("#Button{0}:first", index);

    To:

    var buttonIdSelector = String.format("yourContentPlaceHolderID_Button{0}:first", index);
  5. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 23 Sep 2010 Link to this post

    Hello Dave,

    I am glad I could help. The reason for the behavior you describe is that a MasterPage is an INaming Container and thus it changes the IDs of the content controls. This is general ASP.NET knowledge and how the things work and it is not directly related to RadControls.

    What I can recommend is to use the ClientID property to dynamically evaluate the ID instead of hard-coding it - both manners will work but dynamic evaluation is more elegant solution because it will also work if you change IDs or structure in the future.

    More information about INaming Containers is available below:

    http://msdn.microsoft.com/en-us/library/system.web.ui.inamingcontainer.aspx

    Best wishes,
    Svetlina
    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. Jaime Weise
    Jaime Weise avatar
    25 posts
    Member since:
    Nov 2008

    Posted 16 Nov 2010 Link to this post

    Slide In with the images
    Here is a little code that will get a slightly different effect. I worked this out before realizing that there was a fix for the Rotator.

    <style type="text/css">
     
        ul.rrClipRegion, ul.rrItemsList LI
        {
            float:none !important;
        }
       .horizontalRotator, .rrClipRegion,  .rrItemsList, .rrRelativeWrapper
       {
           height:auto !important;
       }
         
         
    </style>
    <script type="text/javascript">
     
        var currentItemIndex;
        var rotatorCount;
     
        function showing(sender, e) {
                  // update the currentItemIndex 
            switch (sender._animationDirection) {
                case 1:
                    currentItemIndex--;
                    currentItemIndex = (currentItemIndex + rotatorCount) % rotatorCount;
                    break;
     
                case 2:
                    currentItemIndex++;
                    currentItemIndex = currentItemIndex % rotatorCount;
     
                    break;
                default:
          // initialize the currentItemIndex
                    currentItemIndex = 0
     
                    break;
            }
       // clear slides
            for (var i = 0; i < rotatorCount; i++) {
                sender._items[i]._element.style.display = "none";
            }
       // Show the correct slide.
            sender._items[currentItemIndex]._element.style.display = "block";
        }
     
        function goToSlide(index) {
            var rotator = Sys.Application.findComponent('<%# RadRotator1.ClientID %>');
            var clicks = (index % rotatorCount) - (currentItemIndex % rotatorCount);
            if (clicks < 0) {
     
    // move to the right.
                clicks = Math.abs(clicks)
                for (var i = 0; i < clicks; i++) {
                    rotator._rightButton.click()
                }
            }
            else {
    // move to the left.
                for (var i = 0; i < clicks; i++) {
                    rotator._leftButton.click()
                }
             
            }
     
        }
     
        function rotatorLoaded(sender, e) {
     
            rotatorCount = sender._items.length;
       // set the initial slide.
            showing(sender, e);
        }
    </script>
            <asp:ImageButton ID="LeftButton" runat="server"
                     ImageUrl="/Images/slide-menu/left-arrow.jpg" />
    <asp:ImageButton ID="RightButton" runat="server"
                     ImageUrl="/Images/slide-menu/right-arrow.jpg" />
     
    <telerik:RadRotator ID="RadRotator1" runat="server" CssClass="horizontalRotator"
        ScrollDuration="200" Width="760" ItemWidth="760" RotatorType="Buttons" OnClientLoad="rotatorLoaded"
        OnClientItemShowing="showing">
        <ControlButtons LeftButtonID="RightButton" RightButtonID="LeftButton" />
            <ItemTemplate>
    // Add your own data or create some items instead of the template.
                <%# Container.DataItem %>
            </ItemTemplate>
    </telerik:RadRotator>

  7. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 19 Nov 2010 Link to this post

    Hi jaime,

     Thank you for sharing your solution with others. A quick recommendation which will make the code better is to always use public getters and setters where possible e.g


    sender._items[currentItemIndex]._element.style.display = "block";

    should become

    sender.get_items()[currentItemIndex].get_element().style.display = "block";

    In this manner if we fix some bug in the control it will be available in your code after upgrade as well. Furthermore, sometimes there is additional logic in those setters and getters and not only setting the value of the private property.

    Greetings,
    Svetlina
    the Telerik team
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017