CODEWITHSUNDEEP
javascriptjqueryhtmlcss
troligtvis
troligtvis

Reputation: 133

Divide elements width depending on amount of elements

As the title say "Divide elements width depending on amount of elements" I want to have an progress-like bar where I can add elements and depending on the amount elements I have the progress bar would split.

enter image description here

This is fixed values now (33%, 33% and 34%) and I want them to change depending of how many elements I use.

Like if I have 4 elements in my list I want it to automatically divide equally with 4. Is there any easy way to do it? Maybe using only CSS? I don't mind javascript, but Im just saying that it could be something I've missed :)

Edit: I created 3 div's and gave them all different classes.

<section class="progress-part-list">
    <div class="progress-part-left">
        
    </div>
    
    <div class="progress-part-right">
        
    </div>
    
    <div class="progress-part-mid">
        
    </div>
</section>

In my CSS with my fixed values it is:

.progress-part-mid
{
    height: 100%;
    width: 34%;
    background-color: #52ff00;
    opacity: 0.9;
    display: block;
    float:left;
}

.progress-part-left
{
    height: 100%;
    width: 33%;
    background-color: red;
    opacity: 0.9;
    display: block;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    float:left
}

.progress-part-right
{
    height: 100%;
    width: 33%;
    background-color: yellow;
    opacity: 0.9;
    display: block;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    float:right;
}

Upvotes: 5

Views: 2550

Answers (3)

qJake
qJake

Reputation: 17139

Are you looking for something like this?

http://jsfiddle.net/FK7N5/

You want to select all the elements, and use that to calculate the percentage.

It doesn't matter how many elements you include in your container. Just make sure they all have a common class like "progress". Remember, you can have more than one class on an element, so you can have <div class="progress progress-first"> or <div class="progress progress-middle">.

The jQuery to make it work:

// Get all parts of the progress bar.
var bars = $('.bar');

// With each one, calculate the percentage and apply the width.
bars.each(function()
{
    $(this).css('width', (100 / bars.length) + '%');
});

Upvotes: 3

Justin
Justin

Reputation: 1329

Try giving each of the inside-elements a margin-right of -4px and use the following JS/jQuery:

$(document).ready(function(){
    $('div div').width($('div:first-child').width() / 3);
});

Here's a fiddle: http://jsfiddle.net/JthgV/

Is that what you're looking for?

P.S. Forgive the inline style. I did it that way for the sake of saving time.

Upvotes: 0

markasoftware
markasoftware

Reputation: 12662

As a person who uses javascript more than I should, the first thing that came to mind is to run some JavaScript on load, and then it can go though the 'child' property of the surrounding element (the one with class progress-part-list), then divide 100 by that, then set the styles to that.

Here's some code that would do this:

<script type="text/javascript">
var divd=100/(document.getElementsByClassName('progress-part-list')[0].children.length);
[].forEach.call(document.getElementsByClassName('progress-part-list')[0].children,function(curChild){
    curChild.style.width=divd+'%';
});
</script>

Put that just after the closing tag of the <section>

That's very crude, though, you might want to fix it to make it more elegant (like modifying class styles instead of inline styles, going through all instead of just the first progress-part-list, etc

It's also untested

Upvotes: 0

Related Questions