Rad Rotator IE issue

5 posts, 0 answers
  1. loai taha
    loai taha avatar
    44 posts
    Member since:
    Apr 2007

    Posted 26 Mar 2010 Link to this post

    Hi,

    I'm trying to control my rotator from JavaScript code. Everything works fine on FF and Chrome, and when i try on IE 8 I get the following JavaScript error (Message: 'null' is null or not an object). below is my JavaScript code,

    function startUpScripts() {                
                    var newsTickerRotator = $find('<%= newsTickerRotator.ClientID %>'); 
                    newsTickerRotator.repaint(); 
                    newsTickerRotator.add_mouseOver(newsTickerMouseOver); 
                    newsTickerRotator.add_mouseOut(newsTickerMouseOut); 
                    startRotator(newsTickerRotator, Telerik.Web.UI.RotatorScrollDirection.Right); 
                } 
     
                function newsTickerMouseOver() { 
                    stopRotator($find('<%= newsTickerRotator.ClientID %>')); 
                } 
     
                function newsTickerMouseOut() { 
                    startRotator($find('<%= newsTickerRotator.ClientID %>'), Telerik.Web.UI.RotatorScrollDirection.Right); 
                } 
     
     
                function startRotator(rotator, direction) { 
                    if (!rotator.autoIntervalID) { 
                        rotator.autoIntervalID = window.setInterval(function() { 
                            rotator.showNext(direction); 
                        }, rotator.get_frameDuration()); 
                    } 
                } 
     
                function stopRotator(rotator) { 
                    if (rotator.autoIntervalID) { 
                        window.clearInterval(rotator.autoIntervalID); 
                        rotator.autoIntervalID = null
                    } 
                } 
     
                function showNextItem(rotator, direction) { 
                    rotator.showNext(direction); 
                } 

    I also added the following code to the body tag in order to run my rotator on page load (<body onload="startUpScripts();" >). If I refresh IE it works fine, but if I open it for the first time I get the error. I'm really wondering if JQuery ready events runs before the rotator is rendered!!!!!

    Appreciates your help.

  2. loai taha
    loai taha avatar
    44 posts
    Member since:
    Apr 2007

    Posted 27 Mar 2010 Link to this post

    Seems like no solutions for this issue!
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. loai taha
    loai taha avatar
    44 posts
    Member since:
    Apr 2007

    Posted 29 Mar 2010 Link to this post

    I'm really wondering if there is any one at Telerik who reads our posts? Should I open a support ticket... or shall I wait for your kind reply?

    On the other hand, the RadRotator documentation is very weak and lacks the client side API examples. If I were you I would enrich the RadRotator documentation in order to save us and you the time of going through all this of back and forth posts on forums.
  5. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 29 Mar 2010 Link to this post

    Hi,

    Please try calling the startUpScripts() in the OnClientLoad client-side event of the RadRotator? This way you will be sure that the client-object of the Rotator is created, when you want to call some of its methods.

    If this does not help, please open a support ticket and send fully working project. We will do our best to find a solution.


                function startUpScripts()
                {
                    var newsTickerRotator = $find('<%= newsTickerRotator.ClientID %>');
                    newsTickerRotator.repaint();
                    newsTickerRotator.add_mouseOver(newsTickerMouseOver);
                    newsTickerRotator.add_mouseOut(newsTickerMouseOut);
                    startRotator(newsTickerRotator, Telerik.Web.UI.RotatorScrollDirection.Right);
                }
            </script>
     
        </telerik:RadCodeBlock>
    </head>
    <<body onload="startUpScripts();">
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            </Scripts>
        </asp:ScriptManager>
        <br />
        <br />
        <br />
        <div style="width: 1500px; height: 1000px;">
            <telerik:RadRotator ID="newsTickerRotator" runat="server" CssClass="image_rotator"
                Width="404" Height="445" ScrollDirection="Left" ScrollDuration="500" RotatorType="AutomaticAdvance"
                FrameDuration="2000" PauseOnMouseOver="false" ItemWidth="404" ItemHeight="445"
                OnClientLoad="startUpScripts">



    All the best,
    Pero
    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. loai taha
    loai taha avatar
    44 posts
    Member since:
    Apr 2007

    Posted 30 Mar 2010 Link to this post

    hi Pero,

    Thanks for your help and support, the provided solution worked perfectly. However, I found another way to do this, by setting a timer on the page load or document ready events. An example of that is settimeout("startupscripts()","500"). I really don't know what's wrong with IE, but apperantly DOM are not fully loaded when the functions that reference these DOMs are called as per my case. Therefore, and for all who face such a problem, replace the function you want to call inside a JavaScript timer initializer with max of half second time out and things should work perfectly across all browsers.

    On a separate note, Please Please Please.... enhance the RadRotator document since it lacks lots of explanations and client side API examples.

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