RadRotator & jQuery

4 posts, 0 answers
  1. Support
    Support avatar
    13 posts
    Member since:
    Feb 2012

    Posted 10 May 2013 Link to this post

    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?
  2. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 15 May 2013 Link to this post

    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
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Support
    Support avatar
    13 posts
    Member since:
    Feb 2012

    Posted 17 May 2013 Link to this post

    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


    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="RotatorSample.aspx.cs" Inherits="RotatorSample" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html>
     
    <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>
  5. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 21 May 2013 Link to this post

    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:
    <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.
Back to Top