Search code examples
jquerycssreal-time

Show height change in real time

I just wrote a script that returns a div's height compared to it's parent into percentage.

I just need to find a way to display that height change in real time while animating the change.

This is what I have so far: jsFiddle

JS:

var full = $('#wrap').height();
var value = $('#bla').height();
var percentage = value*100/full ;

$('h1').html( percentage + '%');

$('#bla').delay(1500).animate({
    height: '74%'
},2200, "easeOutElastic");
Solution

  • see this fiddle

    you can set an interval which looks for the height of the div and update the text accordingly

    var inter=setInterval(function(){
    var full = $('#wrap').height();
    var value = $('#bla').height();
    var percentage = value*100/full ;
    $('h1').html( percentage + '%');
},10)