This is a migrated thread and some comments may be shown as answers.
Chrome rotator.showNext (Left) issue
2 Answers 4 Views
This is a migrated thread and some comments may be shown as answers.
Christian
Top achievements
Rank 1
Christian asked on 26 Jun 2015, 09:31 AM

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 Answers, 1 is accepted

Sort by
0
Accepted
Ianko
Telerik team
answered on 30 Jun 2015, 08:30 AM
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
0
Christian
Top achievements
Rank 1
answered on 30 Jun 2015, 08:41 AM
Ianko, just to let you and everyone else know, setting height and width sorted the issue. thank you!
Asked by
Christian
Top achievements
Rank 1
Answers by
Ianko
Telerik team
Christian
Top achievements
Rank 1
Share this question
or