+1-888-365-2779
Try Now
More in this section

Forums / General Discussions / RadRotate alignment

RadRotate alignment

16 posts, 0 answered
  1. James@Nw
    James@Nw avatar
    265 posts
    Registered:
    05 May 2009
    08 Jan 2010
    Link to this post
    Hi Guys,

    I'm having trouble with the layout of the RadRotator in this implementation of it.

    (http://demo.thedominion.ca) - The Latest News Section

    As you can see, when you click on the left and right buttons the lining up of the News Articles don't work.

    Could I ask you to look at this and tell me exactly what I need to adjust to get this working.

    In IE6 specifically I am having a lot of problems and have had to hide the RadRotator for now. So if you can give me a good break down of how to work with this, I would appreciate it!

    Thanks,
    James
  2. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    08 Jan 2010
    Link to this post
    Hello James,

    Thank you for using our services.

    Can you try to modify the rotator control and set the RotatorType="FromCode" then add the two html buttons which on click will scroll items in respective direction. Sample bellow:
    <style type="text/css">
    .RotatorItem
    {
        border: solid 1px #dff3ff !important;
        margin-right:5px;
        height: 110px;
    }
    .left
    {
        width: 31px;
        height: 34px;
        background-image: url(images/left.gif);
        border: 0px;
        background-color: transparent;
        cursor: hand;
    }
     
    .right
    {
        width: 31px;
        height: 34px;
        background-image: url(images/right.gif);
        border: 0px;
        background-color: transparent;
        cursor: hand;
    }
        </style>
     <telerik:RadRotator ID="RadRotator1" RotatorType="FromCode" runat="server" Width="400" Height="120px" ItemHeight="186px" ItemWidth="195"
        ScrollDuration="200"  Skin="Vista" WrapFrames="true">
        <Items>
           ...
        </Items>
    </telerik:RadRotator>
    <button onclick="$find('<%=RadRotator1.ClientID%>').showNext(Telerik.Web.UI.RotatorScrollDirection.Left);"
        type="button" class="left">
    </button>
    <button onclick="$find('<%=RadRotator1.ClientID%>').showNext(Telerik.Web.UI.RotatorScrollDirection.Right);"
        type="button" class="right">
    </button>

    This should make it behave better.

    Best wishes,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. Jacques
    Jacques avatar
    427 posts
    Registered:
    28 Jun 2007
    11 Jan 2010
    Link to this post
    Hi Radoslav,

    We've implemented your solution and we're about to test in different browsers, but one thing I've noticed is that we've lost the Fade transition effect. Is this is a result of the FromCode value?

    Is it possible to manually control:
    1. Transition effect and,
    2. Number of items to scroll (i.e. two at a time instead of one)

    ?

    Regards,
    Jacques
  4. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    11 Jan 2010
    Link to this post
    Hello J.Hov,

    Thank you for getting back to me.

    The fade effect is applied only if your Rotator type is set to be SlideShow or SlideShowButtons. As for scrolling two items you can create a javascript function that will call the showNext() function two times. Then you will invoke this function when the button is clicked. If you wish to have the animations you can create Rotator handled by code as this demo.

    Kind regards,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  5. Jacques
    Jacques avatar
    427 posts
    Registered:
    28 Jun 2007
    12 Jan 2010
    Link to this post
    Hi Radoslav,

    Thanks the solution worked. We've opted to leave out the transition effect since the timing doesn't permit us to look much further into this.

    When we completed the testing locally we uploaded to the customer's demo servers and we're a bit confused that the following is happening:
    Locally the old internally generated buttons are hidden by the CSS class rrButton with its display set to none. The new custom buttons then replace this functionality so everything works perfectly. For example:
    <href="javascript:void(0);" class="rrButton rrButtonRight"</a> 

    On the remote server the following inline style is automatically generated on the A tags for the buttons:
      style="display:block"
    For example:
    <href="javascript:void(0);" class="rrButton rrButtonRight" style="display: block;"</a> 

    I have no idea where that inline style is coming from. What would cause this behavior on the remote host?

    Regards,
    Jacques
  6. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    12 Jan 2010
    Link to this post
    Hi J.Hov,

    Thank you for getting back to me.

    Is it possible that you are using a custom skin and/or have disabled the embedded base style sheet of the RadRotator control? This might be one reason for this happening. With the built in skins which I am using on my environment I get the buttons as you on your local environment (without the inline style). Anyway you can try to add the following style rule which should eliminate the inline style for the built-in buttons:
    .RadRotator .rrButton
    {
        display: none;
        }


    Kind regards,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  7. Jacques
    Jacques avatar
    427 posts
    Registered:
    28 Jun 2007
    12 Jan 2010
    Link to this post
    Yes we're definitely using a custom skin. Here is the HTML for the control:
    1 <telerik:RadRotator ID="RadRotator1" runat="server" RotatorType="FromCode" EnableAjaxSkinRendering="false" 
    2                 EnableEmbeddedBaseStylesheet="false" EnableEmbeddedSkins="false" Skin="Dominion" 
    3                 Height="72" Width="395" ItemHeight="72" ItemWidth="186" WrapFrames="True" FrameDuration="1"
    4                 <ItemTemplate> 
    5                     <div class="tickerItem"
    6                         <asp:Image ID="NewsThumbnail" CssClass="tickerThumbnail" ImageAlign="Left" runat="server" 
    7                             Height="58px" Width="47px" /> 
    8                         <div class="tickerItemText"
    9                             <asp:Literal ID="CounterText" runat="server" /> 
    10                             <asp:HyperLink ID="NewsTitle" CssClass="tickerTitle" runat="server" /> 
    11                             <asp:Label ID="PublicationDate" runat="server" Style="display: none;" /> 
    12                         </div> 
    13                     </div> 
    14                 </ItemTemplate> 
    15                 <SlideShowAnimation Type="Pulse" /> 
    16             </telerik:RadRotator> 

    Why would this behave differently from the development machine to the hosting machine though?

    I will try your solution, thanks.

    Jacques

  8. Jacques
    Jacques avatar
    427 posts
    Registered:
    28 Jun 2007
    12 Jan 2010
    Link to this post
    We tried your solution but it didn't work. So we added !important which took care of the extra set of buttons that shouldn't be appearing.

    The main thing here is that the control is not behaving on the remote machine as it is locally. Locally the transition effects don't work which we expected. We also added the double script to make the items move two at a time. On the remote system the transition is still working and the items are jumping four at a time now.

    We'd really like to get it to work as it is locally now.

    Why would the two platforms behave so differently?

    Regards,
    Jacques
  9. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    12 Jan 2010
    Link to this post
    Hello J.Hov,

    Well the the reason is as I suggested. In your markup you have EnableEmbeddedBaseStylesheet="false" this is the reason you are getting the inline styles. When the base style sheet is disabled the control does not know anymore how to handle buttons, etc. unless provided with styling rules. This property is intended for performance optimization, i.e. when you want to load the base style sheet (or default JavaScript for the embedded scripts) from a location different from your server (CDN for example). I hope I am making sense now. More information can be gathered at: RadControls Diabling embedded resources.

    All the best,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  10. Jacques
    Jacques avatar
    427 posts
    Registered:
    28 Jun 2007
    12 Jan 2010
    Link to this post
    We have disabled those options by default for performance reasons because even though we do our own custom skin Sitefinity/Telerik still pushes out extra unnecessary stylesheet via web resource files.

    This still doesn't explain why the different between two local machines and two demo servers? It's working perfectly locally. Locally those options are also disabled but we're not getting that result (the inline style), so that would say that what you're saying about the inline style appearing because setting EnabledEmbbedded... = false is incorrect, because we have it the exact same way locally.

    Regards,
    Jacques
  11. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    12 Jan 2010
    Link to this post
    Hi J.Hov,

    I am not able to suggest anything further as I am not aware either of your local or production environment. There might be a number of reasons of the behavior differences. Are the two environments completely identical? Do you have differences in themes, styles, javascripts, etc. on your environments? Furthermore the inline styles can be coming both from client code and from server code.

    Please, double check if the code for the control on both environments is the same. Check if there is some javascript or server code adding display attributes to the buttons.

    Kind regards,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  12. Jacques
    Jacques avatar
    427 posts
    Registered:
    28 Jun 2007
    12 Jan 2010
    Link to this post
    We've double checked and the CSS file as well as the Ascx and Ascx.cs files have been copied across correctly.

    Here is the Ascx code:
    1 <%@ Control Language="C#" AutoEventWireup="true" CodeFile="NewsRotator.ascx.cs" Inherits="UserControls_NewsRotator" %> 
    2 <script type="text/javascript"
    3     function moveRight() 
    4     { 
    5         $find('<%=RadRotator1.ClientID%>').showNext(Telerik.Web.UI.RotatorScrollDirection.Left); 
    6         $find('<%=RadRotator1.ClientID%>').showNext(Telerik.Web.UI.RotatorScrollDirection.Left); 
    7     } 
    8     function moveLeft() 
    9     { 
    10         $find('<%=RadRotator1.ClientID%>').showNext(Telerik.Web.UI.RotatorScrollDirection.Right); 
    11         $find('<%=RadRotator1.ClientID%>').showNext(Telerik.Web.UI.RotatorScrollDirection.Right); 
    12     } 
    13 </script> 
    14 <table border="0" id="newsTicker" cellpadding="0" cellspacing="0"
    15     <tr> 
    16         <td rowspan="2" style="width:393px"
    17             <telerik:RadRotator ID="RadRotator1" runat="server" RotatorType="FromCode" EnableAjaxSkinRendering="false" 
    18                 EnableEmbeddedBaseStylesheet="false" EnableEmbeddedSkins="false" Skin="Dominion" 
    19                 Height="72" Width="395" ItemHeight="72" ItemWidth="186" WrapFrames="True" FrameDuration="1"
    20                 <ItemTemplate> 
    21                     <div class="tickerItem"
    22                         <asp:Image ID="NewsThumbnail" CssClass="tickerThumbnail" ImageAlign="Left" runat="server" 
    23                             Height="58px" Width="47px" /> 
    24                         <div class="tickerItemText"
    25                             <asp:Literal ID="CounterText" runat="server" /> 
    26                             <asp:HyperLink ID="NewsTitle" CssClass="tickerTitle" runat="server" /> 
    27                             <asp:Label ID="PublicationDate" runat="server" Style="display: none;" /> 
    28                         </div> 
    29                     </div> 
    30                 </ItemTemplate> 
    31                 <SlideShowAnimation Type="Pulse" /> 
    32             </telerik:RadRotator> 
    33         </td> 
    34         <td> 
    35             <onclick="moveRight();return false;" 
    36                 class="newsTickerButton newsTickerButtonRight">&nbsp;</a> 
    37         </td> 
    38     </tr> 
    39     <tr> 
    40         <td> 
    41             <onclick="moveLeft();return false;" 
    42                 class="newsTickerButton newsTickerButtonLeft">&nbsp;</a> 
    43         </td> 
    44     </tr> 
    45 </table> 
    46  

    This is the C# code:
    1 using System; 
    2 using System.Data; 
    3 using System.Configuration; 
    4 using System.Collections; 
    5 using System.Web; 
    6 using System.Web.Security; 
    7 using System.Web.UI; 
    8 using System.Web.UI.WebControls; 
    9 using System.Web.UI.WebControls.WebParts; 
    10 using System.Web.UI.HtmlControls; 
    11 using Telerik.News; 
    12 using Telerik.Cms.Engine; 
    13 using Telerik.Web.UI; 
    14 using Telerik.Cms.Engine.ContentViewFiltering; 
    15 using Telerik.News.WebControls;  
    16  
    17 using System.ComponentModel; 
    18  
    19 public partial class UserControls_NewsRotator : System.Web.UI.UserControl 
    20
    21     #region FIELDS 
    22     private string _ProviderName; 
    23     private NewsManager _NewsManager; 
    24     private string _NewsDetailsPath = ""
    25     private byte _Counter = 0; 
    26     private byte _MaxItems = 10; 
    27     #endregion 
    28     #region PROPERTY - ProviderName 
    29     public string ProviderName 
    30     { 
    31         get 
    32         { 
    33             return this._ProviderName; 
    34         } 
    35         set 
    36         { 
    37             this._ProviderName = value; 
    38         } 
    39     } 
    40     #endregion 
    41     #region PROPERTY - Rotator 
    42     [Browsable(true)] 
    43     public RadRotator Rotator 
    44     { 
    45         get 
    46         { 
    47             return this.RadRotator1; 
    48         } 
    49         set 
    50         { 
    51             this.RadRotator1 = value; 
    52         } 
    53     } 
    54     #endregion 
    55     #region PROPERTY - NewsDetailsPath 
    56     public string NewsDetailsPath 
    57     { 
    58         get 
    59         { 
    60             return _NewsDetailsPath; 
    61         } 
    62         set 
    63         { 
    64             _NewsDetailsPath = value; 
    65         } 
    66     } 
    67     #endregion 
    68     #region EVENTHANDLER - Page_Load 
    69     protected void Page_Load(object sender, EventArgs e) 
    70     { 
    71         //get the default content provider 
    72         if (String.IsNullOrEmpty(this._ProviderName)) 
    73             this._ProviderName = NewsManager.DefaultContentProvider; 
    74  
    75         //get the news manager 
    76         if (this._NewsManager == null
    77             this._NewsManager = new NewsManager(this._ProviderName); 
    78  
    79         //get the max rows from the config file 
    80         _MaxItems = Convert.ToByte(ConfigurationManager.AppSettings["NewsTickerMaxItems"]); 
    81  
    82         //create a filter build 
    83         //ContentFilterBuilder filter = new ContentFilterBuilder(); 
    84  
    85         //set the datasource of the rotator 
    86         DateTime filterDate = new DateTime(DateTime.Now.Year - 1, 1, 1); 
    87         //_NewsManager.Content.FilterExpression = "Publication_Date >= " + filterDate.ToShortDateString(); 
    88  
    89         RadRotator1.DataSource = _NewsManager.Content.GetContent(0, _MaxItems, "Publication_Date DESC"); 
    90         RadRotator1.ItemDataBound += new RadRotatorEventHandler(RadRotator1_ItemDataBound); 
    91         RadRotator1.DataBind(); 
    92     } 
    93     #endregion 
    94     #region EVENTHANDLER - RadRotator1_ItemDataBound 
    95     void RadRotator1_ItemDataBound(object sender, RadRotatorEventArgs e) 
    96     { 
    97         _Counter++; 
    98  
    99         Literal counter = (e.Item.FindControl("CounterText"as Literal); 
    100  
    101         //if the max items is smaller than the total items found 
    102         if (_MaxItems < _NewsManager.Content.ContentCount()) 
    103         { 
    104             //use max items instead 
    105             counter.Text = _Counter + " of " + _MaxItems.ToString(); 
    106         } 
    107         else //if the Content Count is smaller than the max count 
    108         { 
    109             //use the content count instead 
    110             counter.Text = _Counter + " of " + _NewsManager.Content.ContentCount().ToString(); 
    111         } 
    112          
    113  
    114         //get the icontent item 
    115         IContent contentItem = (IContent)e.Item.DataItem; 
    116  
    117         //set the title of this article 
    118         HyperLink link = (e.Item.FindControl("NewsTitle"as HyperLink); 
    119         link.Text = contentItem.GetMetaData("Title").ToString(); 
    120         link.NavigateUrl = _NewsDetailsPath + contentItem.UrlWithExtension; 
    121  
    122         //extract the library reference for the thumnail 
    123         string thumbnailReference = (string)contentItem.GetMetaData("Thumbnail"); 
    124  
    125         //get a reference to the current image object 
    126         Image img = e.Item.FindControl("NewsThumbnail"as Image; 
    127  
    128         //if the image object was found and the thumbnail reference is correct 
    129         if (img != null && thumbnailReference != "" && thumbnailReference != null
    130         { 
    131             //get the proper URL path for the image 
    132             img.ImageUrl = _GetUrl(thumbnailReference, true); 
    133         } 
    134  
    135         //set publication date 
    136         Label publicationDateLabel = (e.Item.FindControl("PublicationDate"as Label); 
    137         DateTime publicationDate = Convert.ToDateTime(contentItem.GetMetaData("Publication_Date").ToString()); 
    138         publicationDateLabel.Text = publicationDate.ToString("yyyy-MM-dd"); 
    139     } 
    140     #endregion 
    141     #region METHOD - _GetUrl(thumbnailReference,resolveAsAbsoluteUrl 
    142     private string _GetUrl(string thumbnailReference, bool resolveAsAbsoluteUrl) 
    143     { 
    144         if (thumbnailReference != null && thumbnailReference.StartsWith("~/")) 
    145             return this.ResolveUrl(thumbnailReference); 
    146         if (thumbnailReference != null && thumbnailReference.StartsWith("[")) 
    147         { 
    148             int idx = thumbnailReference.IndexOf("]"); 
    149             string provider = thumbnailReference.Substring(1, idx - 1); 
    150             string strId = thumbnailReference.Substring(idx + 1); 
    151             Guid id = new Guid(strId); 
    152             if (ContentManager.Providers.ContainsKey(provider)) 
    153             { 
    154                 IContent cnt = ContentManager.Providers[provider].GetContent(id); 
    155                 if (cnt != null
    156                     return VirtualPathUtility.ToAbsolute(cnt.UrlWithExtension, this.Context.Request.ApplicationPath); 
    157             } 
    158             else 
    159             { 
    160                 SiteMapNode node = SiteMap.Provider.FindSiteMapNodeFromKey(id.ToString()); 
    161                 if (node != null
    162                     return this.ResolveUrl(node.Url); 
    163             } 
    164             return String.Concat("Item not found: [", thumbnailReference, "]", id); 
    165         } 
    166         return thumbnailReference.ToString(); 
    167     } 
    168     #endregion 
    169
    170  

    Finally here is the CSS code:
    1 #newsTicker 
    2
    3     border0px solid red
    4     width411px
    5     padding: 0; 
    6     margin: 0; 
    7
    8 #newsTicker tr, #newsTicker tr td 
    9
    10     vertical-alignmiddle
    11
    12 .newsTicker 
    13
    14     width411px
    15
    16 .newsTicker hr 
    17
    18     displaynone
    19
    20 .RadRotator 
    21
    22     visibilityhidden
    23     padding-left: 0 !important; 
    24
    25 .RadRotator .rrButton 
    26
    27     displaynone !important; 
    28
    29  
    30 .rrRelativeWrapper 
    31
    32     positionrelative
    33     margin: 0 !important; /*MUST BE 0 for proper rendering*/ 
    34
    35  
    36 .rrClipRegion 
    37
    38     height: 100%; /* We change the width and height from the code, and then this setting becomes active! */ 
    39     overflowhidden
    40     positionabsolute
    41
    42  
    43 /*================== The list ========================*/ 
    44  
    45 .rrClipRegion .rrItemsList 
    46
    47     floatleft
    48     padding: 0; 
    49     margin: 0; 
    50     list-stylenone !important; 
    51
    52  
    53 .RadRotator ul.rrItemsList 
    54
    55     padding: 0; 
    56     margin: 0; 
    57
    58  
    59 .RadRotator ul.rrItemsList li.rrItem 
    60
    61     floatleft
    62     overflowhidden
    63     displayinline-block
    64     list-stylenone
    65     padding: 0; 
    66     padding-left10px !important; 
    67     margin: 0; 
    68     bordersolid 0px red
    69     height80px
    70
    71 .RadRotator ul.rrItemsList li.rrItem img.tickerThumbnail 
    72
    73     /* WORKING  margin-bottom: 11px;    margin-top: 7px;    border: solid 1px #7E7D82 !Important;   */ 
    74     floatleft
    75     margin-bottom11px
    76     margin-top7px
    77     bordersolid 1px #7E7D82 !important; 
    78
    79 .RadRotator ul.rrItemsList li.rrItem .tickerItem 
    80
    81     height72px
    82
    83 .RadRotator ul.rrItemsList li.rrItem .tickerItem .tickerItemText 
    84
    85     floatleft
    86     margin-bottom11px
    87     margin-top7px
    88     margin-left10px
    89     displayinline-block
    90     width110px
    91
    92  
    93 .RadRotator ul.rrItemsList li.rrItem a.tickerTitle 
    94
    95     font-familyVerdana
    96     font-size: 7.5pt
    97     font-weight: 600; 
    98     text-decorationnone
    99     displayblock
    100     line-height13px
    101     padding-top5px
    102     color#7E7D82
    103     height41px
    104     overflowhidden
    105
    106 .RadRotator ul.rrItemsList li.rrItem a.tickerTitle:hover 
    107
    108     text-decorationunderline
    109
    110 .rrButton 
    111
    112     font-size1px
    113     text-indent: -9999px
    114     displayblock
    115     positionabsolute/*.Button size is defined here, we use margins to position them too */ 
    116     height15px
    117     width15px
    118     line-height15px/* Very important for the layout!*/ 
    119     displaynone
    120     outlinenone
    121
    122  
    123 .rrButton:hover 
    124
    125     filter: alpha(opacity=100); 
    126     opacity: 1; 
    127     -moz-opacity: 1; 
    128     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
    129
    130  
    131 .rrButton.rrButtonUp 
    132
    133     background-position: 0 0; 
    134     top: -15px
    135     left: 50%; 
    136     margin-left: -8px
    137
    138  
    139 .rrButton.rrButtonRight 
    140
    141     background-imageurl(Images/TickerNext.gif); 
    142     background-repeatno-repeat
    143     height36px
    144     rightright: 0; 
    145     top: 0; 
    146     floatrightright
    147
    148  
    149 a.rrButton.rrButtonRight:hover 
    150
    151     background-imageurl(Images/TickerNextOver.gif); 
    152
    153  
    154 .rrButton.rrButtonDown 
    155
    156     background-position: 0 -30px
    157     top: 100%; 
    158     left: 50%; 
    159     margin-left: -8px
    160     margin-top1px
    161
    162  
    163 .rrButton.rrButtonLeft 
    164
    165     background-imageurl(Images/TickerBack.gif); 
    166     background-repeatno-repeat
    167     height36px
    168     rightright: 0; 
    169     top36px
    170     floatrightright
    171
    172  
    173 a.rrButton.rrButtonLeft:hover 
    174
    175     background-imageurl(Images/TickerBackOver.gif); 
    176
    177  
    178 .rrButton.rrButtonDisabled 
    179
    180     filter: alpha(opacity=20); 
    181     opacity: .2; 
    182     -moz-opacity: .2; 
    183     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"
    184
    185  
    186 .rrNoBorder .rrClipRegion 
    187
    188     border-width0px !important; 
    189
    190  
    191 /* Needed because IE cannot position vertical LI items properly. In addition to this css, the UL's width needs to be EXPLICITLY set from code if IE or Safari */ 
    192 html* .rrVerticalList li 
    193
    194     floatleft !important; 
    195
    196  
    197 .newsTickerButton 
    198
    199     displayblock
    200     height15px
    201     width13px
    202     bordernone
    203     padding: 0; 
    204     margin: 0; 
    205
    206 .newsTickerButtonRight 
    207
    208     background-imageurl(Images/TickerNext.gif); 
    209     background-repeatno-repeat
    210     height36px
    211     rightright: 0; 
    212     top: 0; 
    213     floatrightright
    214
    215 .newsTickerButtonRight:hover 
    216
    217     cursorpointer
    218     background-imageurl(Images/TickerNextOver.gif); 
    219
    220 .newsTickerButtonLeft 
    221
    222     background-imageurl(Images/TickerBack.gif); 
    223     background-repeatno-repeat
    224     height36px
    225     rightright: 0; 
    226     top: 0; 
    227     floatrightright
    228
    229 .newsTickerButtonLeft:hover 
    230
    231     cursorpointer
    232     background-imageurl(Images/TickerBackOver.gif); 
    233
    234  

    I'm not sure what else to look at because this control is behaving differently on two platforms. The code has been copied across correctly and both are running Sitefinity 3.6. Locally it's run on Windows XP, remotely it's run on Windows Server 2003 Standard Edition.

    Can you perhaps see something obvious that might cause the problem?

    Regards,
    Jacques





  13. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    12 Jan 2010
    Link to this post
    Hi J.Hov,

    I cannot see anything than the fact that you have some conflicting styles for the .rrButton Css class. Other than that the control works perfectly in my end. Please double check if all CSS files on your production and local environment are in sync. The first time I suggested applying this rule:
    .RadRotator .rrButton
    {
        display: none;
    }

    Did not work because you already had this in the CSS file:
        .rrButton
    {
        font-size: 1px;
        text-indent: -9999px;
        display: block;
        position: absolute; /*.Button size is defined here, we use margins to position them too */
        height: 15px;
        width: 15px;
        line-height: 15px; /* Very important for the layout!*/
        display: none;
        outline: none;
    }

    Please inspect all relevant files.

    I can also see that the RadRotator has been exposed as a public property of the control. There might have been property changes to the RadRotator through the Page Editor UI.
     
    Regards,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  14. Jacques
    Jacques avatar
    427 posts
    Registered:
    28 Jun 2007
    12 Jan 2010
    Link to this post
    Radoslav,

    Well spotted there. It was in fact the Rotator that was exposed publicly. We found that the RotatorType property was not set to FromCode.

    Strangely enough though, the rest of the properties were picked from the attributes set in the HTML view as one would expect. It's only RotatorType that doesn't pick up the correct value.

    Thanks for the help.

    Regards,
    Jacques
  15. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    12 Jan 2010
    Link to this post
    Hello J.Hov,

    Has setting the RotatorType to FromCode fixed the issue? To be honest I am not quite sure why this property was not picket up from the markup. However I am almost sure that if you drag & drop the new control to a page all properties will be set as they should.

    All the best,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  16. Jacques
    Jacques avatar
    427 posts
    Registered:
    28 Jun 2007
    12 Jan 2010
    Link to this post
    Hi Radoslav

    Yes thank you it did fix the problem.

    Much appreciated.

    Regards,
    Jacques
Register for webinar
16 posts, 0 answered