How to set width using the maximum value of an array?

Question

I am trying to render an output like the one in the picture

Right now, I am trying to pass all the numeric values into an array, and then set the grey bars' lengths to the maximum of those values This is what I have so far, but it is not passing any values:

var contentValues = $('facet-amount').text();
var arr = parseInt(contentValues);
$(".facet-percentage").width(Math.max(...arr));

.facet {
  position: relative;
  border: 1px solid #dcdcdc;
  margin-top: 13px;
}
.facet-title {
  display: inline-block;
}
.facet-amount {
  display: inline-block;
  position: absolute;
  right: 2px;
}
.facet-percentage {
  background-image: -webkit-linear-gradient(top, #f8f8f8, #e5e5e5);
  display: inline-block;
  height: 10%;
  position: absolute;
  z-index: -1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content-type-facet" class="facet">
  <div class="facet-header">
    <h3>Content Type</h3>
  </div>
  <div>
    <span class="facet-percentage" style=""></span>
    <span class="facet-title">Chapter</span>
    <span class="facet-amount">400</span>
  </div>
  <div>
    <span class="facet-percentage" style=""></span>
    <span class="facet-title">Article</span>
    <span class="facet-amount">200</span>
  </div>
  <div>
    <span class="facet-percentage" style=""></span>
    <span class="facet-title">Reference Work Entry</span>
    <span class="facet-amount" id='ciao'>207</span>
  </div>
  <div>
    <span class="facet-percentage" style=""></span>
    <span class="facet-title">Protocol</span>
    <span class="facet-amount">16</span>
  </div>
  <div>
    <span class="facet-percentage" style=""></span>
    <span class="facet-title">Book</span>
    <span class="facet-amount">2</span>
  </div>
</div>

.facet-amount, with dot... and console.log(arr) then...

sinisake
– sinisake

2017-01-22 22:23:38 +00:00
Commented Jan 22, 2017 at 22:23 — sinisake
– sinisake, Commented Jan 22, 2017 at 22:23
So all .facet-percentage should be 400px?

Nenad Vracar
– Nenad Vracar

2017-01-22 22:25:53 +00:00
Commented Jan 22, 2017 at 22:25 — Nenad Vracar
– Nenad Vracar, Commented Jan 22, 2017 at 22:25

Tha'er AlAjlouni ثائر العجلوني · Accepted Answer · 2017-01-22 22:42:32Z

3

First, your are missing the dot in the selector of facet-amount in var contentValues = $('facet-amount').text(); it should be var contentValues = $('.facet-amount').text();.

Second, The $('.facet-amount').text(); won't return an array, instead it will return the text of the first element matching that selector, which is 400 in your case. To select all values you need to use $.each as an example, and after filling your array you can use the max function.

See the following as an example:

var arr = [];
$.each($('.facet-amount'), function(index, value) {
  arr[index] = parseInt($(value).text());
});
var max = Math.max(...arr);
console.log(max);
$(".facet-percentage").width(max);

.facet {
  position: relative;
  border: 1px solid #dcdcdc;
  margin-top: 13px;
}
.facet-title {
  display: inline-block;
}
.facet-amount {
  display: inline-block;
  position: absolute;
  right: 2px;
}
.facet-percentage {
  background-image: -webkit-linear-gradient(top, #f8f8f8, #e5e5e5);
  display: inline-block;
  height: 10%;
  position: absolute;
  z-index: -1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content-type-facet" class="facet">
  <div class="facet-header">
    <h3>Content Type</h3>
  </div>
  <div>
    <span class="facet-percentage" style=""></span>
    <span class="facet-title">Chapter</span>
    <span class="facet-amount">400</span>
  </div>
  <div>
    <span class="facet-percentage" style=""></span>
    <span class="facet-title">Article</span>
    <span class="facet-amount">200</span>
  </div>
  <div>
    <span class="facet-percentage" style=""></span>
    <span class="facet-title">Reference Work Entry</span>
    <span class="facet-amount" id='ciao'>207</span>
  </div>
  <div>
    <span class="facet-percentage" style=""></span>
    <span class="facet-title">Protocol</span>
    <span class="facet-amount">16</span>
  </div>
  <div>
    <span class="facet-percentage" style=""></span>
    <span class="facet-title">Book</span>
    <span class="facet-amount">2</span>
  </div>
</div>

But looking at your image, I think your intent is to set each one of the facets to its value, not the max of all, see this as a suggestion:

$('.facet-amount').each(function(index, element) {
  var $el = $(element);
  $el.siblings(".facet-percentage").width(parseInt($el.text()));
});

.facet {
  position: relative;
  border: 1px solid #dcdcdc;
  margin-top: 13px;
}
.facet-title {
  display: inline-block;
}
.facet-amount {
  display: inline-block;
  position: absolute;
  right: 2px;
}
.facet-percentage {
  background-image: -webkit-linear-gradient(top, #f8f8f8, #e5e5e5);
  display: inline-block;
  height: 10%;
  position: absolute;
  z-index: -1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content-type-facet" class="facet">
  <div class="facet-header">
    <h3>Content Type</h3>
  </div>
  <div>
    <span class="facet-percentage" style=""></span>
    <span class="facet-title">Chapter</span>
    <span class="facet-amount">400</span>
  </div>
  <div>
    <span class="facet-percentage" style=""></span>
    <span class="facet-title">Article</span>
    <span class="facet-amount">200</span>
  </div>
  <div>
    <span class="facet-percentage" style=""></span>
    <span class="facet-title">Reference Work Entry</span>
    <span class="facet-amount" id='ciao'>207</span>
  </div>
  <div>
    <span class="facet-percentage" style=""></span>
    <span class="facet-title">Protocol</span>
    <span class="facet-amount">16</span>
  </div>
  <div>
    <span class="facet-percentage" style=""></span>
    <span class="facet-title">Book</span>
    <span class="facet-amount">2</span>
  </div>
</div>

edited Jan 22, 2017 at 22:42

answered Jan 22, 2017 at 22:27

Tha'er AlAjlouni ثائر العجلوني

15.6k7 gold badges37 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Dambo Over a year ago

Thanks for the extra part! The documentation says that parseInt() <parses a string argument and returns an integer>. Why is it interpreted as a value in px then?

Tha'er AlAjlouni ثائر العجلوني Over a year ago

Referring to the documentation of the $.width function, if you pass a numeric value it will consider it as 'px' by default, if other values are intended it should be used explicitly.

Dambo Over a year ago

Thanks, I am trying to rescale those values from 1-100% 'cause otherwise they go out of bounds in my original case.

Tha'er AlAjlouni ثائر العجلوني Over a year ago

Then calculate the max first, and use a percentage out of the max, something like: $el.siblings(".facet-percentage").width((parseInt($el.text()) / max) + '%')

james_bond · Accepted Answer · 2017-01-22 22:44:55Z

1

You're missing the . in your class selector, and also your parseInt is incorrect, it will work only on the first element of the array.

Try this:

var maxValue = Math.max.apply(null, $('.facet-amount').map(function(){return +$(this).text();}).get());
$(".facet-percentage").width(maxValue);

Demo https://jsfiddle.net/LoLgz6wv/

edited Jan 22, 2017 at 22:44

answered Jan 22, 2017 at 22:35

james_bond

6,9263 gold badges30 silver badges39 bronze badges

1 Comment

sinisake Over a year ago

Didn't downvoted, but i guess that your sentence about Math.max fail was the reason... Actually, Math.max with spread syntax works fine with arrays: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

A. Kremlianski · Accepted Answer · 2017-01-22 22:34:45Z

0

In your code arr has a type of number.

You must create an array:

var arr = []; //empty array

$('facet-amount').each(function(){
  arr.push(parseInt($(this).text()));
 }

$(".facet-percentage").width(Math.max.apply(null, arr));

answered Jan 22, 2017 at 22:34

A. Kremlianski

845 bronze badges

Collectives™ on Stack Overflow

How to set width using the maximum value of an array?

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related