Chrome rotator.showNext (Left) issue

3 posts, 1 answers
  1. Christian
    Christian avatar
    64 posts
    Member since:
    Apr 2008

    Posted 26 Jun 2015 Link to this post

    We have an issue using Chrome where the rotator show empty image on showNext with left navigation, right works fine but when clicking left again two times the empty/white space appears and it wont restart from index 0 when navigating left. please see site below,

    http://www.mrplant.se/

    <div style="position:relative;">
    <div ID="rotatorRight" style="display:none;" onclick="navigate('Right'); return false;"></div>
    <div ID="rotatorLeft" style="display:none;" onclick="navigate('Left'); return false;"></div>
    <div class="rotatorContainer">
        <telerik:RadRotator ID="RadRotator1" runat="server" PauseOnMouseOver="false" OnClientItemShowing="slideShowHandler" OnClientLoad="rotatorLoad" SlideShowAnimation-Type="CrossFade" SlideShowAnimation-Duration="8000" FrameDuration="4000" ScrollDuration="1200" ScrollDirection="Left" RotatorType="AutomaticAdvance" Visible="false">
            <ItemTemplate>
                <asp:Image ID="Image1" runat="server" ImageUrl='<%# Container.DataItem %>' AlternateText=""/>
            </ItemTemplate>
        </telerik:RadRotator>
    </div>
    </div>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function rotatorLoad(sender, eventArgs)
        {
            var count = sender.get_items().length;
            var rotatorRight = document.getElementById('rotatorRight');
            var rotatorLeft = document.getElementById('rotatorLeft');
     
            if (count < 2 || count == null || count == 'undefined') {
                rotatorRight.style.display = 'none';
                rotatorLeft.style.display = 'none';
            }
            else if (count > 0)
            {
                rotatorRight.style.display = 'block';
                rotatorLeft.style.display = 'block';
            }
        }
     
        function navigate(navigation)
        {
            var rotator = $find("<%=RadRotator1.ClientID %>");
     
            switch (navigation)
            {
                case "Right":
                    rotator.showNext(Telerik.Web.UI.RotatorScrollDirection.Right);
                    break;
                case "Left":
                    rotator.showNext(Telerik.Web.UI.RotatorScrollDirection.Left);
                    break;
            }
        }
     
        function slideShowHandler(sender, args)
        {
            var count = sender.get_items().length;
            var currentIndex = args.get_item().get_index() + 1;
            var rotatorRight = document.getElementById('rotatorRight');
            var rotatorLeft = document.getElementById('rotatorLeft');
     
            if (!sender.isScrollingForward())
            {
                if (currentIndex == 1)
                {
                    rotatorRight.style.visibility = 'none';
                }
                else
                {
                    rotatorRight.style.visibility = 'visible';
                }
            }
     
            if (count == 1) {
                rotatorLeft.style.visibility = 'none';
                rotatorRight.style.visibility = 'none';
            }
     
            if (currentIndex == count)
            {
                rotatorLeft.style.visibility = 'none';
            }
            else
            {
                rotatorLeft.style.visibility = 'visible';
            }
     
        }
    </script>
    </telerik:RadCodeBlock>
     

     

    public partial class ucImageRotator : System.Web.UI.UserControl
    {
        private string path;
     
        public string Path
        {
            get { return path; }
            set { path = value; }
        }
     
        protected void Page_Load(object sender, EventArgs e)
        {
            if (path != "")
            {
                string virtualPath = "~/images/rotators/" + path;
                RadRotator1.DataSource = GetFilesInFolder(virtualPath);
                RadRotator1.DataBind();
            }
        }
     
        protected List<string> GetFilesInFolder(string path)
        {
            string physicalPathToFolder = Server.MapPath(path);
            List<string> virtualPathsCollection = new List<string>();
     
            if (Directory.Exists(physicalPathToFolder))
            {
                string[] physicalPathsCollection = System.IO.Directory.GetFiles(physicalPathToFolder);
                 
                foreach (String file in physicalPathsCollection)
                {
                    string virtualPath = VirtualPathUtility.AppendTrailingSlash(path) + System.IO.Path.GetFileName(file);
                    if (System.IO.Path.GetExtension(file) == ".png")
                    {
                        System.Drawing.Image objImage = System.Drawing.Image.FromFile(file);
                        int width = objImage.Width;
                        int height = objImage.Height;
                        RadRotator1.Height = height;
                        RadRotator1.Width = width;
                        virtualPathsCollection.Add(virtualPath);
                    }
                }
                if (virtualPathsCollection.Count > 0)
                {
                    this.Visible = true;
                    RadRotator1.Visible = true;
                }
                else
                {
                    this.Visible = false;
                    RadRotator1.Visible = false;
                }
            }
            return virtualPathsCollection;
        }
    }

     

     

     

  2. Answer
    Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 30 Jun 2015 Link to this post

    Hi Christian,

    I have already answered you about that in the support ticket sent to us (ID: 948706). Please refer to it to continue the conversation there. 

    As for anyone else interested on teh same matter, the suggestion is to set ItemWidth and ItemHeight properties with accurate values. By that, the generated item will have proper width and height. 

    <telerik:RadRotator ID="RadRotator1" runat="server" PauseOnMouseOver="false"
        OnClientItemShowing="slideShowHandler" OnClientLoad="rotatorLoad" SlideShowAnimation-Type="CrossFade"
        SlideShowAnimation-Duration="8000" FrameDuration="4000" ScrollDuration="1200" ScrollDirection="Left"
        RotatorType="AutomaticAdvance" Visible="false" ItemHeight="349px" ItemWidth="980px">
        <ItemTemplate>
            <asp:Image ID="Image1" runat="server" ImageUrl='<%# Container.DataItem %>' AlternateText="" />
        </ItemTemplate>
    </telerik:RadRotator>


    Regards,
    Ianko
    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. Christian
    Christian avatar
    64 posts
    Member since:
    Apr 2008

    Posted 30 Jun 2015 in reply to Ianko Link to this post

    Ianko, just to let you and everyone else know, setting height and width sorted the issue. thank you!
Back to Top