0

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

bboy
  • 1,357
  • 2
  • 15
  • 31

1 Answers1

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');
Steve O
  • 5,224
  • 1
  • 24
  • 26
  • thank you @Steve! i managed with this one, what do you think: `var total_width = 0; $('.scroll-content').find('img').each(function() { total_width += $(this).width() + 10; }); $( ".scroll-content" ).css('width', total_width);` – bboy Dec 06 '12 at 10:48
  • 1
    Yeah that's ok...I'd avoid using find as well as your selector as it just adds to the processing. I'd go with `$('.scroll-content-item img')` which does the same thing in this case. – Steve O Dec 06 '12 at 10:52
  • Great stuff, glad to help :) – Steve O Dec 06 '12 at 11:14