Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery .width() chrome and safari problem

I have set in css the height of an image to a certain value and the width modifies automatically so that the aspect ratio is preserved. I'm using the .width() jquery function to get the width of the image after the css resized the image. in Firefox and internet explorer this works great but in chrome and safari the width returned is always 0 for each image. the code that i am using is the following:

var total=0; 
var widthdiv=0;
$(function(){
    $('.thumb').each(function(){
       widthdiv=$(this).width();
       total+=widthdiv;
       alert(widthdiv); //added so i can see what value is returned.
    });
});

and the css for the images:

#poze img{
    height:80px;
    width:auto;
    border:0px;
    padding-right:4px;    
}
like image 226
Bogdan Avatar asked Oct 26 '10 09:10

Bogdan


1 Answers

In document.ready (which you're currently using) images may or may not be loaded, if they're not in cache they probably aren't loaded. Instead use the window.onload event when the images are loaded, like this:

var total=0; 
$(window).load(function() {
  $('.thumb').each(function() {
    total += $(this).width();
  });
});
like image 94
Nick Craver Avatar answered Oct 27 '22 11:10

Nick Craver