RadRotator "stop running this script" issue in IE

[Felipe]

Hello,

I am using a radrotator to build a document viewer interface which works (for the most part) on the client.

the viewer works great and is lightning fast on browsers like chrome and firefox.  on IE it is a bit slower, but not terrible...

that is, until you get more than ~50 items or so in the radrotator.  At this point, IE freezes and gives the error

"Stop running this script?

 

A script on this page is causing your browser to run slowly. if it continues to run your computer might become unresponsive"

before one is able to do anything.

from what i can tell, the radrotator uses a lot of behind-the scenes jquery to move and slide all of the items around on the page, and IE reaches a point where it decides it doesn't want to do that, once you get around 50 items in the slider.

has this issue been noted before?  is there anything i can do to lighten the load on Internet explorer?

i am happy to put up any code where necessary, however i thought putting up a live link might be better... since the javascript I am using is probably the only relevent code...

if you go to the following link:

http://www.plsx.com/finder/viewer2.aspx?doc=3549&slide=72280&q=marcellus&f=(1.1)&

then you should receive an error as described above. similarly, if you instead go to the link:

http://www.plsx.com/finder/viewer.aspx?doc=3549&slide=72280&q=marcellus&f=(1.1)&

the records are truncated at 50 items, and you can see it works.

any help is much appreciated!

[Niko]

Hello Leland,

The RadRotator, when in CoverFlow mode, waits for all the images within the items to load in order to be able to calculate various animation scenarios. Being the case in IE(I should suppose you don't mean version 9), the script that loads the images indeed seems to be having issues loading that many images. This seems to be a browser limitation that we cannot control. Currently I cannot provide you with a workaround. Still we will investigate the case and see if there are any ways to improve the loading of the images and speed up the process.

Best wishes,
Niko
the Telerik team

[Felipe]

Hello Niko,

Thank you for the response...  Indeed I agree that this is a browser limitation - but as with many things (styling for example) we must anticipate the limitations of the browser and provide a working solution for any browser.

I have done some research on this error and found out that explorer has a built-in limit for the number of statements it can execute from a parent call - 5 Million.  In addition, it has a 10 second timeout for loops.

I have also heard (though I am not sure if this is true) that Explorer is a bit more strict about the parsing of javascript - and it tries to detect infinite loops and can raise this error in this case.

In my case, I have made sure that I don't have any potentially offensive code that could be the source of the problem, and think that indeed the issue is within the code of the rotator in coverflow mode.

I noticed something interesting...

If one loads the page, and does not move the rotator to any item other than its initial item, and doesn't touch anything - the error is avoided.
if one then moves the rotator to the next item, the error pops up.
if one chooses "no" in the error popup, then it will work for ~3 seconds, and then pop up again. Repeating this process, the error will pop up three times total.
After the third error, the page works fine....

I find this interesting for a couple of reasons.

1) It would appear that if the error pops up 3 times, there might be 15 million executed statements?!  that seems a bit steep to me...
2) You mentioned that the rotator must load all of the images in order to make some calculations... however, this shows that even if all of the images are loaded entirely (ie, we wait for a minute after page load) the error still occurrs...  telling us that this isn't really a timing issue, but rather a # of statements executed issue?

Could you please educate me on what happens differently the very first time the rotator moves, versus the second time?  clearly, the first time the rotator moves, much more code is executed...

also, i found this article:
http://www.picnet.com.au/blogs/Guido/post/2010/03/04/How-to-prevent-Stop-running-this-script-message-in-browsers.aspx

which, perhaps, something of the sort could be implemented in the rotator's client library?


This is a pretty big issue for us... we just bought the telerik controls for a website we have built, but we now cannot go live because of these issues with IE compatability.

We just found that we get the same issue on a separate page (in certain cases which we can't figure out yet) which uses a radgrid and radtreeview...

I really appreciate any help you guys can offer.  thanks.

[Felipe]

if anyone is interested in the solution i made, one can view a live version of the document viewer here:

http://www.plsx.com/finder/viewer.aspx?doc=1837&slide=52713&q=barnett&f=(1.1)&#doc=1837&slide=52713&

notice the viewer changes slightly with browsing in IE versus browsing in chrome/firefox.  the code used to do this was as follows:



Detect if current browser is IE on page load:

protected void Page_Load(object sender, EventArgs e)
{
    if (Request.Browser.Browser == "IE") ConfigureForIE();
}

private void ConfigureForIE()
{
    this.form1.Attributes.Add("class", "isIE");

    _rotator.ControlButtons.DownButtonID = "hiddenBtn1";
    _rotator.ControlButtons.UpButtonID = "hiddenBtn2";

    _rotator.RotatorType = RotatorType.Buttons;
    _rotator.Width = Unit.Pixel(96);
    _rotator.ItemHeight = Unit.Pixel(50);
    _rotator.ItemWidth = Unit.Pixel(65);

    _resultRotator.ControlButtons.DownButtonID = "hiddenBtn1";
    _resultRotator.ControlButtons.UpButtonID = "hiddenBtn2";

    _resultRotator.RotatorType = RotatorType.Buttons;
    _resultRotator.Width = Unit.Pixel(96);
    _resultRotator.ItemHeight = Unit.Pixel(50);
    _resultRotator.ItemWidth = Unit.Pixel(65);

}

here is the original markup for the rotator - this is used if browser is not IE - if it is IE, the ConfigureForIE method changes many of these properties (above)

<telerik:RadRotator EnableViewState="false"
            ID="_rotator"
            OnClientItemShown="RotatorClientItemShown"
            OnClientLoad="docRotatorLoad"
            OnClientItemShowing="RotatorClientItemShowing"
            OnClientItemClicked="RotatorClientItemClicked"
            runat="server" Width="146px" Height="700px" BorderStyle="None"
            CssClass="horizRotator"
            ItemHeight="94" ItemWidth="122"
            RotatorType="CoverFlowButtons" ScrollDirection="Down"
            Skin="Sitefinity">
    <ItemTemplate>
    </ItemTemplate>
    <ControlButtons DownButtonID="nextButton" UpButtonID="prevButton" />
</telerik:RadRotator>

some CSS to adjust the styling of the rotator if browser is IE so that the Buttons mode behaves similarly to the coverflow mode

.isIE .rrItem {margin-top:10px; padding:0px !important;}
.isIE {padding-right:50px;}
.isIE .rrItemsList {left:-25px !important;}

.isIE .rotatorSelected {position:relative; left: 28px !important;}
.isIE .rotatorSelected, .isIE .rotatorSelected div
{
    width:122px !important;
    height:94px !important;
}

.isIE .rotatorSelected img
{
    width:118px !important;
    height:90px !important;
}

this javascript is called after every item change for the rotator.  it is used to update the GUI to reflect the newly selected item.  more importantly, it is used to add a "rotatorSelected" css class to the rotator item so that you can style it differently.

var currentItem;

function UpdateGUIAfterRotatorItemChange(item) {
    //add/remove selected item class
    if (currentItem) { currentItem.removeCssClass("rotatorSelected"); }

    if (item) {
        item.addCssClass("rotatorSelected");
        currentItem = item;

        //update GUI and everything here to reflect a new selected item....
        setHash(GetAttributeValue(item, "DocumentID"), GetAttributeValue(item, "SlideID"));
    }
}

[Niko]

Hello Leland,

After extended testing and debugging we, finally, managed to find the source of the slowness in IE. Provided is the workaround that you can test and incorporate in your project until the fix is available through the internal build:

Telerik.Web.UI.Animations.jCoverFlow.prototype._getAnimationQuery = function()
{
    var query = this._query;
    if(!query)
    {
        var items = this._items;
        query = $telerik.$();

        for(var i = 0, length = items.length; i < length; i++)
            query.add(items[i].element);

        this._query = query;
    }

    return query;
}

Hope this helps. As a sign of gratitude for your help and persistence in this matter, I have updated your Telerik points.

Regards,
Niko
the Telerik team

[Felipe]

Niko,

thank you very much for the work you guys have done.  I will implement this later today and let you guys know how it works.

you guys certainly do get an A+ for your support. cheers.

[Felipe]

Hello Niko,

In order to get this working properly - will I have to download a build of the rotator control and edit this function manually?

If so, could you kindly point me in the right direction?

I first tried overriding the function by just putting it in a script block on the main page, but this didnt seem to fix the issue.

thanks.

[Niko]

Hello Leland,

The approach that you have taken by simply putting the fix within the main page is perfectly fine. The only condition is to put it at the end of the page, so that is loads last. Please, find attached a sample project that demonstrates this approach. I should apologize for the large size of the attachment as it contains a lot of images, with which I carried out my tests.

Hope this helps. 

All the best,
Niko
the Telerik team