Hello.
There is a task. Take an element

<div id="myInfoElem" style = "width: 100px;">текст</div>

I need that after adding a large amount of text to this element, its height gradually increased and became the size of the text.

PS : Without using any libraries.

  • Please explain what it means "плавно" ? when added to a container if it has no overflow properties, it will increase in size to fit all the text - chernomyrdin
  • YES. When adding text, the height of the DIV element changes, for example, from 50px to 230px right away. I need the height to increase with animation. Those. so that the height of the element gradually increased, for example, from 50px to 230px (with the installation of this effect there are no problems). Well, to make the effect as if there is already text there and to stop increasing the height of the DIV at the right size — that is the main problem. With that, it is necessary to show something like (blah blah blah .....), and when pressed, the full text appears. - Anton Mukhin
  • A good idea. Can it be answered and more? - Anton Mukhin
  • Added as an answer. - ling

5 answers 5

Working code (at least firefox9 + ie8)

 <div id="outer" style="overflow: hidden; width: 100px;height: 25px; border: #0f0 1px dashed;"> <div id="inner" style="padding: 5px;"> text </div> </div> <input type="button" value="add text" onclick="g('inner').innerHTML += g('inner').innerHTML;animateSlide('outer', g('inner').offsetHeight+10);" /> <input type="button" value="remove text" onclick="g('inner').innerHTML = 'text ';animateSlide('outer', 25);" /> <script type="text/javascript"> function g(id) { return document.getElementById(id); } function animateSlide(id, toHeight) { var slowing = arguments[2] || 0.1; var frameDelay = arguments[3] || 50; var byTimeout = arguments[4] || false; if (!byTimeout && window['anim_slide_'+id]) clearTimeout(window['anim_slide_'+id]); var el = g(id); var dh = Math.ceil((toHeight - el.offsetHeight)*slowing); el.style.height = (parseInt(el.style.height)+dh)+'px'; if (Math.abs(dh) > 0) { window['anim_slide_'+id] = setTimeout('animateSlide("'+id+'", '+toHeight+', '+slowing+', '+frameDelay+', true)', frameDelay); } else window['anim_slide_'+id] = false; } </script>
  • How beautiful it works! Thank. - Anton Mukhin
  • @ Anton Mukhin please) Accept the update, fixed the bug. It was: if you poke several times, the height began to jump and the animation looped. It became: the previous animation breaks. - Sh4dow
  • Yes thank you! - Anton Mukhin

As an option: put another div in the container, set overflow:hidden to the container, change the contents of the internal div'a and read the new height according to it.

ADDED

 <style> .comment{height:50px;overflow:hidden;border:1px #000 solid} </style> <script> function f(x){ x.style.height = Math.round(Math.random()*300) + 'px'; var newHeight = x.clientHeight; var container = x.parentNode.parentNode; var oldHeight = container.clientHeight; //container.style.height = newHeight + 'px'; или анимация } </script> <div class="comment"> <div> <div style="height:50px;width:50px;background:#33c" onClick="f(this);"></div> </div> </div>

    Little <s> govnokoda </ s> type of animation) Sorry there is no time to think about it for normal work) Please do not punish them strictly)

     <html> <head> <script type="text/javascript"> function newHeight() { var div = document.getElementById("mydiv"); var divHeight = div.style.height; var newHeight = divHeight.substr(0, 2); newHeight = ++newHeight; div.style.height = newHeight + 'px'; } setInterval(newHeight, 8); </script> </head> <body> <div id="mydiv" style="height: 20px; background: #434343; width: 500px; margin: 20px auto; box-shadow: 0 0 10px rgba(0,0,0,0.5); border-radius: 5px; padding: 5px; font-weight: bold; text-align: center; color: #FFF; text-shadow: 1px 1px 1px #6b6b6b;">Тестируй меня в опере</div> </body> </html>

      Try to save clientHeight to a variable and then return the previous size (50px), and then animate to the saved value

      • Did not understand your idea. More? - Anton Mukhin

      embed a div (#txt) into another div (#txtholder) with overflow:hidden . Using JS, set the height to #txtholder = #txt . When you change the size of the nested, you verify the height of two layers. If #txtholder < #txt , then you check for the appearance of the border read "read more." Well, and then it remains to change the height of #txtholder .