Radrotator pause function acting unexpectedly

4 posts, 0 answers
  1. Annika
    Annika avatar
    2 posts
    Member since:
    Sep 2015

    Posted 17 Feb Link to this post

    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!

  2. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 22 Feb Link to this post

    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
    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 Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Annika
    Annika avatar
    2 posts
    Member since:
    Sep 2015

    Posted 22 Feb in reply to Vessy Link to this post

    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));
            }

  5. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 25 Feb Link to this post

    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
    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 Feedback Portal and vote to affect the priority of the items
Back to Top