jquery setting width to a variable value

Question

Could someone explain what's wrong with this snippet?

I'm looking to get the width of all images in a div.

var totalwidth = $("#imagecontainer > img").width();
$("#imagecontainer").width(totalwidth);

sorry, thought it was just a syntax problem (un)working example here:
http://jsfiddle.net/TZ2nT/3/
the container div does not accept the value for some reason?

The snippet doesn't look to be wrong at all? What is your context of the question? — Hari Pachuveetil
– Hari Pachuveetil, Commented Sep 20, 2010 at 16:07
Syntactically, nothing. Without more information (markup, specific error, etc) all we can do is guess. — Ian Henry
– Ian Henry, Commented Sep 20, 2010 at 16:07
You may be interested in the CSS solution display: inline-block to make the DIV wrap to your image. That way, if people don't have Javascript enabled, it degrades peacefully. — Robert
– Robert, Commented Sep 20, 2010 at 16:10

user113716 · Accepted Answer · 2010-09-20 16:41:19Z

5

did u tried this

var width = $("#imagecontainer  img:first").width();
var totalWidth = width * $("#imagecontainer  img").length;
console.log(totalWidth);

Edit :

$(function() {
  var totalwidth = 0;
  var arey = [];
  $('#imagecontainer img').each(function() {
    var width = $(this).width();
    width = parseInt(width);
    arey.push(width);
  });

  for(var i in arey) {
   totalwidth +=arey[i];
  }
  $('#imagecontainer').width(totalwidth);
  $('#readout').html(totalwidth);
});

Test it here http://jsbin.com/ayira3

edited Sep 20, 2010 at 16:41

user113716

323k64 gold badges454 silver badges441 bronze badges

answered Sep 20, 2010 at 16:06

user372551

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

1 Comment

jack Over a year ago

Wow thanks. I know this is not what I asked for but it's what I was looking for. Cheers!

user113716 · Accepted Answer · 2010-09-20 16:07:29Z

1

You haven't really described what is wrong, but I'm guessing you're running the code before the image has been fully downloaded, so it doesn't yet have a width.

If that's the case, try this:

$("#imagecontainer > img").load(function() {
    var $th = $(this);
    $th.parent().width( $th.width() );
});

Remember that jQuery's .ready() method does not wait for images to load. You can use the load() method agains the <img> element instead. This way the code will not run until you actually have an image.

If you ever need to run code after all images have loaded, you can use:

$(window).load(function() {...

answered Sep 20, 2010 at 16:07

user113716

323k64 gold badges454 silver badges441 bronze badges

5 Comments

jack Over a year ago

thanks but i can get and pass the value elsewhere though (see example), so i don't think that's the problem.

user113716 Over a year ago

@jack - In the example you posted, the imagecontainer is getting the width. So what is it not doing for you?

Robert Over a year ago

I modified your example slightly and it's working for me. jsfiddle.net/TZ2nT/4 outputs 782 vs 782 for me.

user372551 Over a year ago

@jack if want to cache the total width of the images, you need to sum up the individual width. $("#imagecontainer > img").width(); this won't give you the total width

jack Over a year ago

ah how stupid, i wanted the width of all the images, didn't notice that the value was only for one image! thanks for pointing this out.

Collectives™ on Stack Overflow

jquery setting width to a variable value

2 Answers 2

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related