It was working fine in my website before in IE8 and Firefox, but now with IE9 it stuffs up as in attached images.
Ideas? I've got the latest release of Telerik tools.
The demo site for the Rotator appears fine within IE9 too.
code below.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestRotator.aspx.cs" Inherits="TestRotator" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
runat
=
"server"
>
<
title
></
title
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
>
</
telerik:RadScriptManager
>
<
div
>
<
telerik:RadRotator
ID
=
"RadRotator1"
runat
=
"server"
RotatorType
=
"Coverflow"
Width
=
"500px"
OnClientItemShown
=
""
Skin
=
"Vista"
>
<
ItemTemplate
>
<
asp:Image
ID
=
"Image1"
runat
=
"server"
Height
=
"100px"
Width
=
"200px"
ImageUrl='<%# Container.DataItem %>'
AlternateText="<%# VirtualPathUtility.GetFileName(Container.DataItem.ToString()) %>"
BorderStyle="Solid" BorderWidth="4px" BorderColor="Black" />
</
ItemTemplate
>
</
telerik:RadRotator
>
</
div
>
</
form
>
</
body
>
</
html
>
protected
void
Page_Load(
object
sender, EventArgs e)
{
RadRotator1.RotatorType = Telerik.Web.UI.RotatorType.CoverFlow;
RadRotator1.DataSource = GetFilesInFolder(
"~/Images/HomeRotator"
);
RadRotator1.DataBind();
}
protected
List<
string
> GetFilesInFolder(
string
folderVirtualPath)
{
string
physicalPathToFolder = Server.MapPath(folderVirtualPath);
// Get the physical path
string
[] physicalPathsCollection = System.IO.Directory.GetFiles(physicalPathToFolder);
// Get all child files of the given folder
List<
string
> virtualPathsCollection =
new
List<
string
>();
// Contains the result
foreach
(String path
in
physicalPathsCollection)
{
// The value of virtualPath will be similar to '~/PathToFolder/Image1.jpg
string
virtualPath = VirtualPathUtility.AppendTrailingSlash(folderVirtualPath) + System.IO.Path.GetFileName(path);
virtualPathsCollection.Add(virtualPath);
}
return
virtualPathsCollection;
}
15 Answers, 1 is accepted
Please, make sure that you have set the ItemWidth/ItemHeight properties to the corresponding dimension values of the images - in your case 200/100. Also make sure that you have set the Height of the rotator as well, again it could be 100.
Hope this helps.
Greetings,
Niko
the Telerik team
Please, make sure that you have updated the animation settings of the rotator, more precisely the reflection settings for the items. Here is the key element from the demo that you may be missing:
<script type=
"text/javascript"
>
//<![CDATA[
// The set_scrollAnimationOptions method takes two arguments - the first one is the ClientID of the rotator, which we want to configure and the second one is
// a hash table with the options we want to apply.
Telerik.Web.UI.RadRotatorAnimation.set_scrollAnimationOptions(
"<%= exampleRotator.ClientID %>"
,
{
reflectionHeight: 0.5,
// The height of the reflection
reflectionOpacity: 1
// The opacity, applied to the reflection
}
);
//]]>
</script>
This script element should be placed right after the declaration of the rotator. In the demo for the CoverFlow you will find a more complex definition for the settings, where event a 2D transformation matrix is used to skew the items a little.
Please, find a simple test page with a rotator implementing the reflections for the items. I have tested it under IE9 and it works as expected.
Regards,
Niko
the Telerik team
Please, review the following video, capturing the execution of the RadRotator with the reflection under IE9 on my side - http://screencast.com/t/Kvi0YiVlrY. The reflection is visible and the rotator appears to be working just fine. Please, make sure that you are using the official version of the IE9 browser and that there are no meta tags for emulating the older browser engines - IE8 or IE7.
Kind regards,
Niko
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
- Began a completely new Telerik project.
- Used the supplied files using that latest release of the Telerik controls (2011.1.315.40)
- Selected supplied aspx as start page, compiled and ran the project
- RESULT: no reflection for IE9, but works in Firefox
I've also ensured:
- IE9 is the latest version fully up to date
- Windows 7 is fully updated
I have also tried:
- downgrading the Telerik controls to the 2010.3 last release to no avail
I am not sure how to progress this to a result. Is there different settings in IE9 that would block the transformation (although the transformation matrix does work when used, just not the reflection).
This is indeed a peculiar case. It turns out that using one and the same setup we both get different results. We will need to drill down the problem together. I should apologize if this turns out to be too much time and effort consuming.
Please, find attached a sample project that you just extract and run. Please, try running it on your end and let me know of the outcome. Thus, using one and the same project we can eliminate some of the possible causes for the problem.
Secondly, because the RadRotator uses <canvas> to draw the reflections, it may be an issue related to its 2d context. Could you, please, check, using the Developer Tools, if within the <li> item tag there is a generated <canvas> tag. If there is, then you may need to do some tests on the capabilities of the canvas under IE9. Here is a site you may utilize for the purpose - http://ie.microsoft.com/testdrive/Graphics/CanvasPad/?c=rotate, or http://ie.microsoft.com/testdrive/Graphics/CanvasPad/?c=rotate, or http://ie.microsoft.com/testdrive/Graphics/CanvasPad/?c=shadows.
Finally, if the tests above all work out OK, I suggest you open a support ticket and attach the project you are working with, so that I can investigate it and drill down the issue.
Hope I was able to give you enough directions to investigate the problem.
Best wishes,
Niko
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
I have also investigated the Canvas issue and in IE9 it does not contain the canvas at all. Firefox obviously does (as attached).
Please, open the attached project as a web site. I apologize if I have misled you.
Please, let me know of the outcome. I will further test on my side what may cause the canvas to not appear in the DOM tree.
Greetings,
Niko
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Please, try the new version of the website. There are some modifications made to the RadRotator lazy loading of images. Please, let me know of the outcome.
Greetings,
Niko
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
the reflection started working in IE9 via my original website. I am not sure what made it work, however, i have just found out what made it stop working:
When i added extra image files to the directory that i was binding to for the images, the reflection suddenly stopped again. All images still display in the rotator, but no reflection again. No canvas object at all.
Ideas?
Finally, I managed to reproduce the issue and it is reproducible under specific circumstances:
- Rotator is in CoverFlow mode and reflection is enabled.
- The browser is IE
- The cache has just been deleted.
I am indeed grateful to your persistence and patience in this matter. I have also updated your Telerik points.
Please, accept my apologies for the inconvenience caused.
Best wishes,
Niko
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.