jquery ui slider modify width according to children elements

Question

i have jquery ui slider with a huge width in px.

.scroll-content {width:2400px;}

and structure:

<div class="scroll-pane ui-widget ui-widget-header ui-corner-all">
   <div class="scroll-content">
     <div class="scroll-content-item ui-widget-header"><img src="img/img1.jpg" /></div>
     <div class="scroll-content-item ui-widget-header"><img src="img/img2.jpg" /></div>
   </div>
 <div class="scroll-bar-wrap ui-widget-content ui-corner-bottom">
  <div class="scroll-bar"></div>
 </div>
</div>

how could i get the width of the inside elements and put that width to the slider container?

thank you

Answer 1

There are a number of ways you could do this really. One is to loop through the scroll-content-item divs and add up the widths of each, applying that the the main scroll-content div.

var totalWidth = 0;

$('.scroll-content-item').each(function(){
    totalWidth = totalWidth + $(this).width();
});

$('.scroll-content').css('width', totalWidth + 'px');