Hi, we have a RadRotator in a DIV.
We have also jQuery code that do "slideUp" and "slideDown" of this DIV.
if I include <script src="js/jquery-1.9.1.min.js" /> RadRotator don't work fine, if I omit <script src="js/jquery-1.9.1.min.js" />, "slideUp" and "slideDown" don't work.
I have read this article
http://www.telerik.com/help/aspnet-ajax/introduction-using-jquery.html
but no solution suggested work fine
How is possible solve the problem?
We have also jQuery code that do "slideUp" and "slideDown" of this DIV.
if I include <script src="js/jquery-1.9.1.min.js" /> RadRotator don't work fine, if I omit <script src="js/jquery-1.9.1.min.js" />, "slideUp" and "slideDown" don't work.
I have read this article
http://www.telerik.com/help/aspnet-ajax/introduction-using-jquery.html
but no solution suggested work fine
How is possible solve the problem?
3 Answers, 1 is accepted
0
Hi,
It is strange that including the jQuery reference breaks the RadRotator on your page. As explained in the help article you linked, the jQuery object that is embedded in the RadControls for ASP.NET AJAX is available as $telerik.$ to avoid compatibility issues with versions that are already used.
Have you tried using only the alias $telerik.$? The version of jQuery that is available with the RadControls matches the one you are trying to include in your project.
I have also prepared a sample project that demonstrates a working RadRotator with externally referenced jQuery library. If you are still having difficulties, please check the sample and send step by step instructions for reproducing the problem so that I can inspect it locally and provide a more to the point answer.
All the best,
Slav
the Telerik team
It is strange that including the jQuery reference breaks the RadRotator on your page. As explained in the help article you linked, the jQuery object that is embedded in the RadControls for ASP.NET AJAX is available as $telerik.$ to avoid compatibility issues with versions that are already used.
Have you tried using only the alias $telerik.$? The version of jQuery that is available with the RadControls matches the one you are trying to include in your project.
I have also prepared a sample project that demonstrates a working RadRotator with externally referenced jQuery library. If you are still having difficulties, please check the sample and send step by step instructions for reproducing the problem so that I can inspect it locally and provide a more to the point answer.
All the best,
Slav
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Support
Top achievements
Rank 2
Rank 2
answered on 17 May 2013, 09:30 AM
Thanks for the reply.
We have the release Q1 2012.
Perhaps the problem is due to RadAjaxPanel.
In your example if you add RadAjaxPanel, the example does not work properly
We have the release Q1 2012.
Perhaps the problem is due to RadAjaxPanel.
In your example if you add RadAjaxPanel, the example does not work properly
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="RotatorSample.aspx.cs" Inherits="RotatorSample" %><%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script></head><body> <form id="form1" runat="server"> <asp:ScriptManager runat="server" /> <script type="text/javascript"> $(document).ready(function () { $(".btnToggleDiv").click(function () { if ($("div:first").is(":hidden")) { $("div").slideDown(); } else { $("div").slideUp("slow"); } }); }); </script> <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" LoadingPanelID="LoadingPanel1" Height="100%" Width="100%"> <div style="width: 200px; height: 150px;"> <telerik:RadRotator ID="RadRotator1" runat="server" FrameDuration="3000" RotatorType="Buttons" Height="113px" ItemHeight="113px" Width="190px" ItemWidth="150px" Skin="Default"> <ItemTemplate> <img src="<%# ResolveUrl("images/" + Container.DataItem) %>" alt="" /> </ItemTemplate> </telerik:RadRotator> </div> </telerik:RadAjaxPanel> <input type="button" class="btnToggleDiv" value="Show/hide rotator" /> </form></body></html>0
Hello,
Indeed, when you add the RadAjaxPanel there is a problem with the slide down animation. This happens because the selector in your script no longer references the div element that wraps the RadRotator. Please add an id that will help reference the correct div element as shown in the following code sample:
Regards,
Slav
the Telerik team
Indeed, when you add the RadAjaxPanel there is a problem with the slide down animation. This happens because the selector in your script no longer references the div element that wraps the RadRotator. Please add an id that will help reference the correct div element as shown in the following code sample:
<script type="text/javascript"> $(document).ready(function () { $(".btnToggleDiv").click(function () { if ($("div#rotatorContainer").is(":hidden")) { $("div#rotatorContainer").slideDown(); } else { $("div#rotatorContainer").slideUp("slow"); } }); });</script><input type="button" class="btnToggleDiv" value="Show/hide rotator" /><telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" LoadingPanelID="LoadingPanel1" Height="100%" Width="100%"> <div id="rotatorContainer" style="width: 200px; height: 150px;"> <telerik:RadRotator ID="RadRotator1" runat="server" FrameDuration="3000" RotatorType="Buttons" Height="113px" ItemHeight="113px" Width="190px" ItemWidth="150px" Skin="Default"> <ItemTemplate> <img src="<%# ResolveUrl("images/" + Container.DataItem) %>" alt="" /> </ItemTemplate> </telerik:RadRotator> </div></telerik:RadAjaxPanel>Regards,
Slav
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.