CODEWITHSUNDEEP
jquerycssreal-time
Alin
Alin

Reputation: 1228

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");

Upvotes: 1

Views: 229

Answers (2)

Pranali Maske
Pranali Maske

Reputation: 132

Try using $('#bla').innerHeight(); You can get changing height of the div including padding also.

Upvotes: 0

Naeem Shaikh
Naeem Shaikh

Reputation: 15715

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)

Upvotes: 1

Related Questions