Calculate width with jQuery

Question

Depending on amout of <div clas="product"></div> I'm trying to set width for .productholder

 <div class="productholder">
    <div clas="product"></div>
    <div clas="product"></div>
    <div clas="product"></div>
    <div clas="product"></div>
    <div clas="product"></div>
 </div>

I can set fix width for .product if this will help.

I have tried this, but don't seems to be working:

var width = 0;
$('.product').each(function() {
    width += $(this).outerWidth( true );
});
$('.productholder').css('width', width + 250);

Thank you for your help in advance.

missing an s on class in each of <div class="product"> — Russ Cam
– Russ Cam, Commented Oct 6, 2009 at 22:43

Russ Cam · Accepted Answer · 2009-10-06 22:50:39Z

2

Have you tried specifying a unit?

var width = 0;
$('.product').each(function() {
    width += $(this).outerWidth( true );
});
$('.productholder').css('width', width + 250 + 'px');

By the way, <div class="productholder"> width will grow to accommodate the width of the inner <div> elements

EDIT:

Your code does work as is - Working Demo. Add /edit to the URL to see the code.

Does <div class="productholder"> have any text content? Are you specifying a height for it?

edited Oct 6, 2009 at 22:50

answered Oct 6, 2009 at 22:40

Russ Cam

126k34 gold badges211 silver badges275 bronze badges

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

2 Comments

Dom Over a year ago

i tried that. Div is absolute in relative container. Product themselves are floating; Div will not extend due to the fact that the div holding it has fixed width

Dom Over a year ago

My stupidity! Sorry. Messed something up in .js file. Many thanks for your help!

Mottie · Accepted Answer · 2009-10-06 23:06:03Z

1

Will this work for you?

 var holder = $('.productholder');
 var width = holder.find('.product').length * 250;
 holder.css('width', width + "px");

answered Oct 6, 2009 at 23:06

Mottie

86.7k30 gold badges132 silver badges248 bronze badges

Collectives™ on Stack Overflow

Calculate width with jQuery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related