HTML+JQuery Equalizer Bars aligned to bottom / middle

Question

I'm trying to build a very simple HTML/JQuery Equalizer. The Problem I can't fix is, to align the bars to the bottom and expand to the top.

Here's my Code:

window.setInterval(function(){
  $('.eqitem').each(function(){
    $(this).height(Math.floor(Math.random() * 250) + 50 );
  });
}, 500);

.parent{
    height: 300px;
}

.eqitem{
    float: left;
    height: 0px;
    width: 10px;
    background: darkred;
    margin-right: 5px;
    -webkit-transition: height 0.5s ease-out;
    transition: height 0.5s ease-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
    <div id="eq">
        <div class="eqitem"></div>
        <div class="eqitem"></div>
        <div class="eqitem"></div>
        <div class="eqitem"></div>
        <div class="eqitem"></div>                    
    </div>
</div>

I tried vertical-align, absolute and relative positioning, bottom attribute, ... Nothing of the above seems to work or even causes unwanted problems.

Thank you guys so much for helping.

score 3 · Accepted Answer · answered Aug 10 '17 at 21:04

You need to mix relative and absolute positioning to position items at the bottom of a relatively positioned container.

To achieve what you want, you need something like this js:

var offset_width = 15;
var i = 0;
$('.eqitem').each(function(){
    $(this).css('left', (i*offset_width) + 'px');
  i++;
});

and this css:

   #eq {
      position:relative;
    display: block;
    height: 300px;
    width: 100px;
     }
    .eqitem{
        position:absolute;
        height: 0px;
        width: 10px;
        background: darkred;
        margin-right: 5px;
        -webkit-transition: height 0.5s ease-out;
        transition: height 0.5s ease-out;
        display:inline-block;

        bottom:0;
    }

Please have a look at the fiddle here: https://jsfiddle.net/catbadger/pzy15m8e/1/

Thank you so much! It works perfectly now. I almost had this solution, but the "float: left" possibly destroyed it. — Elefant793, Aug 10 '17 at 21:12

Vandesh · Answer 2 · 2017-08-10T21:21:10.620

3

You can achieve this in a simple and elegant way using the following -

#eq{
  display : flex;
  height: 300px;
}

.eqitem{
   display: inline-block;
  align-self: flex-end;
}

Checkout the Fiddle
Checkout the Browser Compatibility

edited Aug 10 '17 at 21:21

answered Aug 10 '17 at 21:15

Vandesh

6,368
1
26
38

While this works if every one of your users is using the latest browsers, it doesn't work in all of the browsers I need to support... https://www.w3schools.com/cssref/css3_pr_flex.asp – catbadger Aug 10 '17 at 22:29
1

Yup. That's why the link to Browser Compatibility in the answer to check if anyone facing a similar problem is fine with it. Although, I would say 97.19% is a pretty good coverage! – Vandesh Aug 11 '17 at 00:07

HTML+JQuery Equalizer Bars aligned to bottom / middle

2 Answers2