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

[Solved] Rad Rotator IE issue

4 Answers 129 Views

Rotator

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

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

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 />

<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.

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,