Easing problem when tile height increased

[Bryan McFarland]

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

[Stanimir]

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

[Bryan McFarland]

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

:-)

[Stanimir]

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

[Bryan McFarland]

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

[Stanimir]

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