Show height in percentage
HTML
<script>
var full = $('#wrap').height();
var value = $('#bla').height();
var percentage = value*100/full ;
$('h1').html( percentage + '%');
var inter=setInterval(function(){
var full = $('#wrap').height();
var value = $('#bla').height();
var percentage = value*100/full ;
$('h1').html( percentage + '%');
},10)
$('#bla').delay(1500).animate({
height: '74%'
},2200, "easeOutElastic");
</script>
<div id="wrap">
<div id="bla">
<h1 class="hitme"></h1>
</div>
</div>
CSS
#wrap{
width:300px;
height:500px;
position:relative;
padding:0;
margin:0 auto;
}
#bla{
width:100%;
height:23%;
position:relative;
padding:0;
margin:0;
background:#339933;
}
#bla h1{
position:absolute;
top:0;
bottom:0;
width:100%;
text-align:center;
margin:auto;
padding:0;
display:table;
}
JavaScript
var full = $('#wrap').height();
var value = $('#bla').height();
var percentage = value*100/full ;
$('h1').html( percentage + '%');
var inter=setInterval(function(){
var full = $('#wrap').height();
var value = $('#bla').height();
var percentage = value*100/full ;
$('h1').html( percentage + '%');
},10)
$('#bla').delay(1500).animate({
height: '74%'
},2200, "easeOutElastic");