Display height value of each div

Question

I am having trouble to get this done. What i want to achieve, is to display each div's height value, on its top. I'd also like to see those numbers animated , counting up when div height grows. So far, it displays same value for each one, and none of it is accurate. I use this graph just as an example in UI design, so that the div heights are randomly generated on button toggle.

I am really new to the Jquery, as in all other forms of web programing, so i can't assume what is wrong!

Thanks,

HTML:

<div class="statistics" >Statistics</div>
  <ul class="statisticsGraph">
     <li><div class="statLine"><span class="statCircle"></span><span class="number"></span></div></li>
     <li><div class="statLine"><span class="statCircle"></span><span class="number"></span></div></li>
     <li><div class="statLine"><span class="statCircle"></span><span class="number"></span></div></li>
     <li><div class="statLine"><span class="statCircle"></span><span class="number"></span></div></li>
     <li><div class="statLine"><span class="statCircle"></span><span class="number"></span></div></li>
     <li><div class="statLine"><span class="statCircle"></span><span class="number"></span></div></li>
     <li><div class="statLine"><span class="statCircle"></span><span class="number"></span></div></li>
   </ul>

CSS:

.statistics {
  position: relative;
  display: block;
  width: 100%;
  border-bottom: 1px solid #000;
  height: 30px;
  background: #fff;
  background: #000;
  color: #fff;
  padding:20px 20px;
  font-size: 20px;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
}

ul.statisticsGraph li {
  position: relative;
  display: inline-block;
  float: right;
  width: 10%;
  margin: 10px 5px 0 0;
  height: 230px;
}

.statLine {
  position: absolute;
  display: block;
  background: red;
  width: 5px;
  bottom: 0px;
  overflow:visible !important;
}
.statCircle {
  position: relative;
  display: block;
  width: 8px;
  height:8px;
  left: -8px;
  border-radius: 50%;
  background: yellow;
  border: 6px solid red;
}
.number {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 15px;
  color: #000;
  padding: 4px;
  font-size: 18px;
  top: -60px;
  left: -17px;
  border-radius: 3px;
  border: 1px solid #ffd800;
}

JQUERY:

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
  }

  $('.statistics').on('click',function(){
   $('.statLine').each(function(){
      var statsValue = $('.statLine').height(); 
    $(this).animate({'height':'0'}, function(){
      $(this).animate({'height' : getRandomInt(0,200)});
        $('.number').text(statsValue);        
    }); 

  }); 

  });

LIVE EXAMPLE:

http://jsfiddle.net/gundra/xzLt9/4/

score 2 · Accepted Answer · edited Jul 04 '14 at 14:33

You're getting the value of the first element height and adding that number to all the number fields. I've modified your code a bit to fix these issues.

See it here: http://jsfiddle.net/xzLt9/6/

$('.statistics').on('click', function () {
    $('.statLine').each(function () {
        var height = getRandomInt(0, 200);
        $(this).animate({
            'height': '0'
        }, function () {
            $(this).animate({
                'height': height
            }, function(){
                $('.number', this).text(height); // <--- this is the key
            });                
        });    
    });    
});

The line I marked as 'the key' selects the .number descendant of this, not all of them, and adds the height text value to it.

jcaron · Answer 2 · 2014-07-04T14:25:25.923

1

If you want to update the number while the animation is running, you need to use the step handler.

Also as pointed out by others, you need to look for the .number within the div you're looking at.

$('.statistics').on('click',function()
{
       $('.statLine').each(function()
         {
             $(this).animate({'height':getRandomInt(0,200)}, {step: function(v)
                {
                    $(this).find('.number').text(Math.round(v));
                }});
         });
});

Working jsfiddle: http://jsfiddle.net/xzLt9/17/

edited Jul 04 '14 at 14:25

answered Jul 04 '14 at 14:13

jcaron

17,302
6
32
46

`$.find()` would be slower than `$.children()` in many contexts. – Jared Farrish Jul 04 '14 at 14:17
Thanks Jcaron!! I combined your answer with Shomz's. It works well, and now i got exactly what i wanted. – gundra Jul 04 '14 at 14:45
@gundra, don't forget to up vote the answer if it helped you! :-) – jcaron Jul 04 '14 at 15:18
I tried. it seems like i can mark up only one answer in green. As for "vote up", it requires 15 reputation ( i got 13 atm ), soon i get 2 more, ill vote up :). Thanks again cheers – gundra Jul 04 '14 at 15:27

score 0 · Answer 3 · answered Jul 04 '14 at 14:06

0

$('.statLine').height();

This will be

$('.statLine').css('height');

answered Jul 04 '14 at 14:06

Arunkumar

5,150
4
28
40

score 0 · Answer 4 · edited May 23 '17 at 10:26

to select all the divs and loop through them :

$("div").each(function(item){
   $("#storage"+item).val($(this).css("height");
});

you could replace div with a class you assign to all the div you want to include and storage is something like textboxes which would have id like storage1, storage2

Then you wrap this up in the event of your choice This link show you how to listen to css changes like height : Event detect when css property changed using Jquery

score 0 · Answer 5 · answered Jul 04 '14 at 14:08

0

For start you can change var statsValue = $('.statLine').height(); to var statsValue = $(this).height(); because before you target all statline class divs, $(this) is for each div.

answered Jul 04 '14 at 14:08

AlexDom

701
4
14

score 0 · Answer 6 · answered Jul 04 '14 at 14:09

0

Using the value after the animate:

$('.statistics').on('click', function () {
    $('.statLine').each(function () {
        $(this)
            .animate({
                    'height': '0'
                }, 
                function () {
                    $(this)
                        .animate({
                            'height': getRandomInt(0, 200)
                        }, function an(){
                            $(this).children('.number').text($(this).height());
                        });
                });
    });
});

http://jsfiddle.net/xzLt9/12/

answered Jul 04 '14 at 14:09

Jared Farrish

48,585
17
95
104

If his code makes you a little bit confused, I did the same thing but used your code structure: http://jsfiddle.net/xzLt9/14/ There is absolutely no difference. – kfirba Jul 04 '14 at 14:12
@kfirba - The point was to demonstrate the *height* was not gettable for the second animate until *after* the animate fires (hence the wonky formatting). You have actually *not* done the same thing as this answer, you've copied Shomz's approach into the OP's confused formatting. – Jared Farrish Jul 04 '14 at 14:16

Display height value of each div

6 Answers6