Hi All,

 

I need to write a quick bit of js but don't know where to start.

I need to find the cumulative widths of all the divs in a parent div, then add them together and apply them as a width value to that parent div.

 

I've had a look around for a starting point but i'm not getting anywhere.

 

Can someone help me or at least point me in the right direction?

 

Thanks for any help in advance,

-Jack

Something like:

 

<style>
.one {
width:100px;
}
.two {
width:50px;
}
.three {
width:240px;
}
</style>


<div id="parentdiv">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>

<script>
var total_width = 0;
var parentdiv = document.getElementById('parentdiv');
var divs = parentdiv.getElementsByTagName('div');
for(var i = 0; i < divs.length; i++){
total_width += divs[i].offsetWidth;
}
parentdiv.style.width = total_width +"px";
</script>

Edited February 13, 201214 yr by Spitfire

Hi Thanks,

 

I get this error when using your code. Am i executing my JS too early or something?

 

TypeError: 'null' is not an object (evaluating 'parentdiv.getElementsByTagName')

 

 

The page i'm working on is here btw.

Edited February 13, 201214 yr by jackmcconnell

Actually, I think the JS function isn't able to read the #parentdiv at all as it's being dynamically generated with jQuery.

 

Didn't realise you were using jQuery though so I'll rewrite a better function in jQuery a bit later tonight.

Actually, I think the JS function isn't able to read the #parentdiv at all as it's being dynamically generated with jQuery.

 

Didn't realise you were using jQuery though so I'll rewrite a better function in jQuery a bit later tonight.

 

Ah great! Thanks very much. Very much appreciated!

I'm actually struggling with this one. For some odd reason, with jQuery no matter what element I tell it to select (ie: the div, article or even class names) to get the width of the articles, it always comes back with 1140px which is the page width. I'm guessing it's something to do with the CSS but not quite sure what

 

But generally, the idea would be:

var total_width = 0;
$('#parentdiv div').each(function(){
   total_width += $(this).width();
});​​​​​​​

$('#parentdiv div').width(total_width);

Edited February 14, 201214 yr by Spitfire

Thanks. Is this new bit of code to replace the whole of the one you posted earlier?

Here's all the JS running on my page at the mo:

 

<script>
$(function(){
	$('#main').wrapInner('<div id="parentdiv" />');
	$('article').wrap('<div></div>');
	$('body').mousewheel(function(event, delta) {
		this.scrollLeft -= (delta * 30);
		event.preventDefault();
	});   
});
</script>
<script>
	var total_width = 0;
	$('#parentdiv div').each(function(){
		total_width += $(this).width();
	});​​​​​​​
	$('#parentdiv div').width(total_width);
</script>

 

 

It is a tricky problem. I could do it with CSS if it wasn't for the fact that i need each div within the parentdiv to have an auto width.

Should work...

 

var total_width = 0;
jQuery("#parentdiv div article").each(function(){
   total_width += jQuery(this).width();
});

jQuery("#parentdiv").width(total_width);

 

BOOM

Thanks,

 

I now have this:

	
<script>
$(function(){
	$('#main').wrapInner('<div id="parentdiv" />');
	$('article').wrap('<div></div>');
	$('body').mousewheel(function(event, delta) {
		this.scrollLeft -= (delta * 30);
		event.preventDefault();
	});   
});
</script>
<script>
	var total_width = 0;
	jQuery("#parentdiv div article").each(function(){
		total_width += jQuery(this).width();
	});
	jQuery("#parentdiv").width(total_width);
</script>

 

...but it still doesn't work.

 

 

 

Yup, it was to replace the earlier script.

 

However, currently your site is throwing up this error:

Uncaught TypeError: Object [object Object] has no method 'mousewheel'

 

Which is breaking the jQuery right before mrchristoph's suggested bit of script. Also, you seem to be loading jQuery twice on the page which probably isn't helping either.

Yup, it was to replace the earlier script.

 

However, currently your site is throwing up this error:

Uncaught TypeError: Object [object Object] has no method 'mousewheel'

 

Which is breaking the jQuery right before mrchristoph's suggested bit of script. Also, you seem to be loading jQuery twice on the page which probably isn't helping either.

 

Ok, i've sorted that now. No errors, only one version of jQuery loading (1.6.2) but still nothing

Really confused. I'm doing my best to understand what's going on but it's a little above me. Thanks for all your help so far guys.

 

Any other suggestions?

Rookie mistake, need to wrap it in document ready:

 

jQuery(document).ready(function(){
  var total_width = 0;
  jQuery("#parentdiv div article").each(function(){
      total_width += jQuery(this).width();
  });

  jQuery("#parentdiv").width(total_width);
});

 

This should 100% work

Rookie mistake, need to wrap it in document ready:

 

jQuery(document).ready(function(){
  var total_width = 0;
  jQuery("#parentdiv div article").each(function(){
  	total_width += jQuery(this).width();
  });

  jQuery("#parentdiv").width(total_width);
});

 

This should 100% work

 

 

Yes! Thank you! You sir, are a legend.

Very much appreciated

 

 

Yes! Thank you! You sir, are a legend.

Very much appreciated