www.webdeveloper.com
Results 1 to 3 of 3

Thread: Animated TD height = works only when the TD is empty of content

  1. #1
    Join Date
    Feb 2014
    Posts
    5

    Animated TD height = works only when the TD is empty of content

    Hello people,


    What I want to accomplish is a table TD that is 20px high and grows downwards when the mouse is over it.

    The problem is that it works only when the TD is empty (ie <TD> nothing here </TD> )

    If the TD is not empty, its almost impossible to make it start at 20 px high (because the content makes it longer, as normal).

    The only thing I could find is to use overflow:hidden in the stylesheet. This works in the beginning, but at the table grows it
    does not add more content. It is as if the content got clipped in the beginning and that's it.

    I would imagine that overflow:hidden refreshes itself everytime the table changes size, but that does not seem
    to be the case.

    Could I FORCE it to refresh somehow ? Force the table to redraw itself or its content ?

    Or alternatively, instead of animating the table height, I could "inject" into it the content text, could that be a possibility ?
    So that each line I add, it becomes longer, so the end result could be the same (although its hard to achieve the smooth
    animation I have now )

    THanks ofr

  2. #2
    Join Date
    Feb 2014
    Posts
    5
    I THINK I got it !

    The table gets overflow:hidden, but the TD gets overflow:visible.
    This way the content of the TD is not lost, however it is not shown because of the overflow:hidden of the table.

    But, is this a proper way to do it ? Im a beginner (20 years programmer, but only a few days with web development)
    I got me some books but they are not going into so much depth as I would like, so I am just tinkering with it myself.

  3. #3
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    242
    On each mouseover event, this would add 10 px to the total height of a td element.

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
        <title>Untitled</title>
        <style type="text/css">
            td {border: 1px solid black;}
        </style>
        <script type='text/javascript'>
            function grow(that) {
                that.style.height = (that.offsetHeight + 10) + "px";
                
                return;
            }
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td onmouseover="grow(this)">Hello World!</td>
            </tr>
        </table>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles