set_currentItemIndex with Animation

7 posts, 1 answers
  1. Julian
    Julian avatar
    4 posts
    Member since:
    Jun 2011

    Posted 29 Jul 2011 Link to this post

    Hi! 

    In this thread I read about the animation feature with the set_currentItemIndex()-Method

    So I tried it. But it does not work for me. Here is what I've done to get it work:

    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadRotator ID="RadRotator1" runat="server" DataSourceID="xmlDataSource1"
            FrameDuration="360000000" Width="675" ItemWidth="675" Height="265" ScrollDirection="Up"
            ItemHeight="265">
            <ItemTemplate>
                <div class="itemTemplate">
                    <img src="Images/<%# XPath("filename") %>" style="border: 0px;" alt="banner" />
                </div>
            </ItemTemplate>
        </telerik:RadRotator>
        <asp:XmlDataSource ID="xmlDataSource1" runat="server" DataFile="banners.xml"></asp:XmlDataSource>
        <div class="nav">
            <a href="#" onclick="javascript:setNewContent(0);">Banner 1</a>
            <a href="#" onclick="javascript:setNewContent(1);">Banner 2</a>
            <a href="#" onclick="javascript:setNewContent(2);">Banner 3</a>
            <a href="#" onclick="javascript:setNewContent(3);">Banner 4</a>
            <a href="#" onclick="javascript:setNewContent(4);">Banner 5</a>
        </div>
    here the js:
    
    function setNewContent(selectedContentIndex) {
        // finding the radRotator
        var rotator = $find('<%= RadRotator1.ClientID %>');
     
        rotator.set_currentItemIndex(selectedRotatorItem, true);
    }
    But doesn't work. What I have to do? //EDIT: What does not work? -> The animation does not work... the banner changes but without animation 

    Also it would be nice if you could show me how to turn off auto-scrolling, cannot find anything how to do this. 


    Thanks in advance!


    Julian
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 29 Jul 2011 Link to this post

    Hello Julian,

     

    Animation for the set_currentItemIndex() has been implemented for the Carousel and CoverFlow modes so far, as there are difficulties in having it work correctly in all scenarios. We have added this request in our ToDo list and we will do our best to implement it in one of the upcoming releases, but for the time being I cannot provide an exact time estimate on when this feature will be fully implemented.


    As to your other question, the default rotator type is AutomaticAdvance and thus you should change the RotatorType property to the desired mode - different possibilities are shown below:

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

    Regards,
    Svetlina
    the Telerik team

    Browse the vast support resources we have to jump start 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.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Julian
    Julian avatar
    4 posts
    Member since:
    Jun 2011

    Posted 29 Jul 2011 Link to this post

    Ok, as this not works I implemented my own way to scroll to a specific item with the showNext()-Method:

    var currentRotatorItem = 0;
     
            function setNewContent(selectedContentIndex) {
                if (selectedRotatorItem > currentRotatorItem) {
                    rotator.showNext(Telerik.Web.UI.RotatorScrollDirection.Up);
                    currentRotatorItem++;
                    rotateToItem(selectedRotatorItem);
                }
                else if (selectedRotatorItem < currentRotatorItem) {
                    rotator.showNext(Telerik.Web.UI.RotatorScrollDirection.Down);
                    currentRotatorItem--;
                    rotateToItem(selectedRotatorItem);
                }
            }

    This work... well... lets say ok. Not really what I want to have because the items are between the current and selected item are "skipped" and with the setTimeout()-Method it does not work. (Maybe an idea how to get this implemented better?)

    But the Problem here is: As soon as the Browser loses the focus it won't work anymore. Why? Maybe you have an idea?
  5. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 03 Aug 2011 Link to this post

    Hi Julian,

     I am afraid that your code is not runnable - there is no definition either of the selectedRotatorItem object nor the rotateToItem method. Please, provide a simple, fully runnable page and we will examine it for you and see what could be done in this particular case.

    All the best,
    Svetlina
    the Telerik team

    Browse the vast support resources we have to jump start 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.

  6. Julian
    Julian avatar
    4 posts
    Member since:
    Jun 2011

    Posted 03 Aug 2011 Link to this post

    Sorry for that!

    I uploaded (http://www.megaupload.com/?d=MYTEXIFU) an fully working example with the problem I described in my second post in this thread. 


  7. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 05 Aug 2011 Link to this post

    Hi Julian,

    I ran your demo and what I can see is that you have not set the RotatorType property to FromCode, as was advised previously. This is the correct way to achieve a rotator that will not scroll automatically, not by setting an extremely large value for the frame duration.

      If this does not solve your difficulty please explain the exact problem you are having in greater detail, as I am not sure I can understand what does "the browser losing focus" mean. You could not click on the links if the browser is not the focused application and if you click niside it would gain focus. In case you need to show us some unexpected behavior along with the explanations and reproduction steps I believe you may find Jing useful - a free screen capture tool.

     

    Regards,
    Marin
    the Telerik team

    Browse the vast support resources we have to jump start 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.

  8. Julian
    Julian avatar
    4 posts
    Member since:
    Jun 2011

    Posted 05 Aug 2011 Link to this post

    I meant, once the Browser (the window e.g. Firefox or Chrome) lost his focus and I focused it again, the links did not work anymore. (The rotator hasn't rotated the banners) 

    But the RotatorType -> FromCode fixed my problem, so thanks a lot!

    (And Jing could really be useful for me as well, thanks for that too) 


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