Radrotator pause function acting unexpectedly

[Annika]

Hey there, I'm trying to use a RadRotator to create functionality where whenever an image is clicked, an accompanying DIV is shown or hidden. This is a different DIV depending on the image which is clicked, and only one can be shown at a time. If the onclick javaScript event changes the style to 'block' I want the rotator to be paused, and only resume when the div is changed to 'none' style. This works fine for a couple seconds, however when I leave it for half a minute (to read the text in the div for example) and then click the image in the rotator it'll shoot over to another image (so the image will change on click) and the DIVs won't show or collapse. I am yet to find a pattern in the behaviour, but I feel like the rotator isn't fully paused but rather still going underwater - and we just can't see it.

I have added the code below, if you guys could tell me which function to use or what else to try that'd help immensely!

.aspx:

<div style="padding: 10px 10px 10px 10px;" id="ImageRotatorDiv">
    <telerik:RadRotator OnClientLoad="onRotatorLoadHandler" runat="server" ID="ImageCarouselRotator" Name="CarouselRotator" Width="1000" Height="550" CssClass="rotatorStyle" Style="cursor: default; margin: 0 auto;" ItemWidth="1000" ItemHeight="550" RotatorType="SlideShow" ScrollDirection="Right" FrameDuration="3000" SlideShowAnimation-Duration="500" SlideShowAnimation-Type="Fade" PauseOnMouseOver="False">

        <Items> //I add the images dynamically from a certain SiteFinity image folder
        </Items>
    </telerik:RadRotator>
</div>

//Example of one of the divs
<div class="hiddenDiv" id="DivShow1">
    <h1>Diginissim</h1>
    <p>In a mauris posuere, hendrerit nisi ut, rhoncus leo. Donec viverra mi ac ipsum placerat bibendum. Cras vel lacus nec augue laoreet maximus vel ac ex. Cras eu rhoncus dui, id iaculis risus. Aliquam consequat ex erat, sit amet consequat mi varius ac.</p>
    <p>Integer luctus nunc ut porttitor dignissim. Pellentesque efficitur, nibh in euismod mattis, enim urna efficitur massa, id venenatis dui dui at ex.</p>
</div>

 

JavaScript:

function showHide(id) {
        for (var divName in divNamesArray) {          //gets all the (currently hidden) divs on the page
            if (divNamesArray.hasOwnProperty(divName)) {
                var div = document.getElementById(divNamesArray[divName]);
                if (div === null || div === undefined) {         //check
                    continue;
                }
                if (divNamesArray[divName] === id) {       //each image gets the correct DIV name attached to it on load, this all works fine
                    if (div.style.display === 'none') {
                        div.style.display = 'block';
                        oRotator.pause();       //Wrong function?
                    } else {
                        div.style.display = 'none';
                        oRotator.resume();
                    }
                }
            }
        }
    }

 

I'm looking forward to hearing your ideas!

[Vessy]

Hи Annika,

The provided code is not enough to test the experienced behavior, thus I would advise that you go through the following options:

• Check whether whether there is no any JavaScript error thrown in the moment when your logic stops working.
• Console log each firing of the showHide() function, the IDs of the divs, their visibility state and the animation state of the Rotator. In this way you should be able to track the exact moment in which the Rotator's stops to function properly.

Regards,
Vessy
Telerik

[Annika]

Hi Vessy,

Thank you for your reply. I have already tried those options, basically showHide() does fire every time the rotator is clicked, but the first few times it just doesn't pause. There are no JavaScript errors thrown. I have set break points and clicked through each part of the code and the rotator, and everything behaves as expected except for the rotator. It just doesn't pause.

I'm unsure what other code you might need, but I will add the .cs codebehind below. Please let me know if there's anything else you require!

 

protected override void InitializeControls(GenericContainer container)
        {
            var lImageList = RetrieveCarouselImages();
            var rrImageCarousel = ImageCarouselRotator;
            var fn = 1;

            if (lImageList == null) return;
            foreach (var limage in lImageList)
            {
                var image = new System.Web.UI.WebControls.Image
                {
                    ID = ("carousel" + fn),
                    ImageUrl = limage.Url,
                    CssClass = "CarouselItem",
                    AlternateText = ""
                    //OnClientClick = ;
                };

                image.Attributes.Add("onclick", "showHide('DivShow" + fn + "');");
                fn ++;

                var ici = new RadRotatorItem();
                ici.Controls.Add(image);

                rrImageCarousel.Items.Add(ici);
            }
        }

        public static IQueryable<Image> RetrieveCarouselImages()
        {
            var librariesManager = LibrariesManager.GetManager();

            var album = librariesManager.GetAlbums().FirstOrDefault(a => a.Title == "Carousel");

            return
                album.Images()
                    .Where(
                        i => (i.Status == ContentLifecycleStatus.Live) && (i.Status != ContentLifecycleStatus.Deleted));
        }

[Vessy]

Hi Annika,

We examined the provided code, but the Rotator behaves properly on our side after removing the not runnable parts of it. I am attaching my test page to this reply, so you can examine it and compare the changes between it and the configuration used by you.

Regards,
Vessy
Telerik