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

Rad Rotator IE issue

4 Answers 82 Views
Rotator
This is a migrated thread and some comments may be shown as answers.
loai taha
Top achievements
Rank 1
loai taha asked on 26 Mar 2010, 12:35 PM
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.

4 Answers, 1 is accepted

Sort by
0
loai taha
Top achievements
Rank 1
answered on 27 Mar 2010, 08:03 PM
Seems like no solutions for this issue!
0
loai taha
Top achievements
Rank 1
answered on 29 Mar 2010, 09:53 AM
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.
0
Pero
Telerik team
answered on 29 Mar 2010, 12:06 PM
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.
0
loai taha
Top achievements
Rank 1
answered on 30 Mar 2010, 01:32 PM
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,
Tags
Rotator
Asked by
loai taha
Top achievements
Rank 1
Answers by
loai taha
Top achievements
Rank 1
Pero
Telerik team
Share this question
or