set_currentItemIndex with Animation

[Julian]

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

[Svetlina Anati]

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

[Julian]

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?

[Svetlina Anati]

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

[Julian]

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. 

[Marin Bratanov]

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

[Julian]

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