Easing problem when tile height increased

6 posts, 0 answers
  1. Bryan McFarland
    Bryan McFarland avatar
    14 posts
    Member since:
    Feb 2010

    Posted 14 Dec 2013 Link to this post

    Hi Guys,

    When I set the Height property of a tile, part of the content showed on the tile before easing animation occurred.  And when easing animation happened, the content did not completely scroll off.

    I understand that the Shape property is important for proper tile easing to occur, but shouldn't there be a way for the height of the tile to be increased and easing to work properly?

    Also, is there anyway for a tile to automatically increase in height to handle whatever content I place in the tile?

    Bryan
  2. Stanimir
    Admin
    Stanimir avatar
    1653 posts

    Posted 17 Dec 2013 Link to this post

    Hello Bryan,

    Could you provide me with a sample code declaration of a tile, which I can use to reproduce the problem locally? I will debug it and provide you with a suitable solution.

    Regards,
    Stanimir
    Telerik
    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 the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Bryan McFarland
    Bryan McFarland avatar
    14 posts
    Member since:
    Feb 2010

    Posted 17 Dec 2013 Link to this post

    Hi Guys,


    I didn't do anything special.  Just create a RadTile whose content is longer than the height of the standard tile height, then set the height of the radtile to something that will accommodate the height of the content.  Also, make sure easing is used, not Fade, but animation.



    Bryan

    :-)

  5. Stanimir
    Admin
    Stanimir avatar
    1653 posts

    Posted 17 Dec 2013 Link to this post

    Hello Bryan,

    Check the following code and see if it will be of any help for you:
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            //<![CDATA[
            Sys.Application.add_load(function () {
                OverwriteTileAnimation($find("<%=tile1.ClientID%>"));
            });
     
            function OverwriteTileAnimation(tile) {
                var element = tile.get_element(),
                    $ = $telerik.$,
                    //400 is the height of the content
                    contentHeight = 400;
                         
                $(".rtileContent", element).height(contentHeight + "px");
                $.extend(tile.get_peekAnimationManager().get_animationStrategy(), {
                    show: function () {
                        this.$element.stop(true).animate({ top: -contentHeight + "px" },
                        this.options.duration,
                        this.options.easing,
                        this._showAnimationEndHnadler);
                    }
                });
            }
            //]]>
        </script>
    </telerik:RadCodeBlock>
    <telerik:RadContentTemplateTile ID="tile1" runat="server" Height="400">
        <PeekTemplateSettings Animation="Slide" Easing="easeInCubic" HidePeekTemplateOnMouseOut="true" ShowInterval="2000" ShowPeekTemplateOnMouseOver="true" />
        <ContentTemplate>
            <div style="height: 400px; background-color: red;">content</div>
        </ContentTemplate>
        <PeekTemplate>
            <div style="height: 400px; background-color: green;">peek content</div>
        </PeekTemplate>
    </telerik:RadContentTemplateTile>



    Regards,
    Stanimir
    Telerik
    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 the blog feed now.
  6. Bryan McFarland
    Bryan McFarland avatar
    14 posts
    Member since:
    Feb 2010

    Posted 17 Dec 2013 Link to this post

    Hi Guys,


    Thanks for the code.  I'll try that.  On a similar note, is there a way for a tile to "dynamically" expand its height to make sure the content is not cropped (cut off)? I have some tiles that will have 3 or 4 lines of content, while other tiles might have 20 lines of content.



    Bryan



  7. Stanimir
    Admin
    Stanimir avatar
    1653 posts

    Posted 18 Dec 2013 Link to this post

    Hello,

    This time I will provide you with two approaches of how to achieve this behavior.
    1. A modification of the code, which I provided in my previous post.
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            //<![CDATA[
            Sys.Application.add_load(function () {
                OverwriteTileAnimation($find("<%=tile1.ClientID%>"));
            });
     
            function OverwriteTileAnimation(tile) {
                var element = tile.get_element(),
                    $ = $telerik.$;
     
                $(".rtileContent:first", element).height("");
                $.extend(tile.get_peekAnimationManager().get_animationStrategy(), {
                    show: function () {
                        this.$element.stop(true).animate({ top: -this.contentElement.offsetHeight + "px" },
                        this.options.duration,
                        this.options.easing,
                        this._showAnimationEndHnadler);
                    }
                });
            }
            //]]>
        </script>
    </telerik:RadCodeBlock>
    <telerik:RadContentTemplateTile ID="tile1" runat="server" Height="200">
        <PeekTemplateSettings Animation="Slide" Easing="easeInCubic" HidePeekTemplateOnMouseOut="true" ShowInterval="2000" ShowPeekTemplateOnMouseOver="true" />
        <ContentTemplate>
            <div style="background-color: red;line-height: 25px;">
                line 1
                <br/>
                line 2
                <br/>
                line 3
                <br/>
                line 4
                <br/>
                line 5
                <br/>
                line 6
                <br/>
                line 7
                <br/>
                line 8
                <br/>
                line 9
                <br/>
                line 10
                <br/>
                line 11
                <br/>
                line 12
                <br/>
                line 13
                <br/>
                line 14
                <br/>
                line 15
                <br/>
                line 16
                <br/>
                line 17
                <br/>
            </div>
        </ContentTemplate>
        <PeekTemplate>
            <div style="height: 400px; background-color: green;">peek content</div>
        </PeekTemplate>
    </telerik:RadContentTemplateTile>

    2. This approach can be used to target all the tiles on the page, without the need to apply the OverwriteTileAnimation function to each one.
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <style type="text/css">
            .rtileContent {
                height: auto !important;
            }
        </style>
        <script type="text/javascript">
            //<![CDATA[
            $telerik.$.extend(Telerik.Web.UI.Tile.SlideAnimationStrategy.prototype, {
                show: function () {
                    this.$element.stop(true).animate({ top: -this.contentElement.offsetHeight + "px" },
                    this.options.duration,
                    this.options.easing,
                    this._showAnimationEndHnadler);
                }
            });
            //]]>
        </script>
    </telerik:RadCodeBlock>
    <telerik:RadContentTemplateTile ID="tile1" runat="server" Height="200">
        <PeekTemplateSettings Animation="Slide" Easing="easeInCubic" HidePeekTemplateOnMouseOut="true" ShowInterval="2000" ShowPeekTemplateOnMouseOver="true" />
        <ContentTemplate>
            <div style="background-color: red;line-height: 25px;">
                line 1
                <br/>
                line 2
                <br/>
                line 3
                <br/>
                line 4
                <br/>
                line 5
                <br/>
                line 6
                <br/>
                line 7
                <br/>
                line 8
                <br/>
                line 9
                <br/>
                line 10
                <br/>
                line 11
                <br/>
                line 12
                <br/>
                line 13
                <br/>
                line 14
                <br/>
                line 15
                <br/>
                line 16
                <br/>
                line 17
                <br/>
            </div>
        </ContentTemplate>
        <PeekTemplate>
            <div style="height: 400px; background-color: green;">peek content</div>
        </PeekTemplate>
    </telerik:RadContentTemplateTile>



    Regards,
    Stanimir
    Telerik
    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 the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017