How do we smoothly increase the height of the element when the text is added?



  • Hello.
    There's a challenge. Take the element.

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

    I need to ensure that, once a large number of texts are added to this element, its height has increased smoothly and becomes the size of the text.

    PS: No. use of any library.



  • Operating 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>
    



Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2