0

I am scaling images to fit within a div and I want to center them with letterboxes by using positions, but when I try to get the width of the element with .width() immediately after setting the height, .width() returns 0.

For example:

$(image).css("height", "100%");
console.log($(image).width());

This echoes 0 to the console, but if I call $(image).width() from the console sometime later, the correct value is given. How can I get the width of the <img> element immediately after I change it's height?

Edit:

So my code goes something like this:

$(window).load(function(){
    cSCMH();
});

function cSCMH()
{
    //Some other code
    for(var i = 0; i < $("sc mh im img").length; i++)
    {
        var image = $("sc mh im img")[i];
        
        //More code
        $(image).css("height", "100%");
        console.log($(image).width());
    }
}

The console still receives 0

Edit 2:

Okay so I think I know what the root of the problem is. The images don't appear to load into the page until they are made visible on the screen (I have them in a tab div where the display is set to none onload).

Is there any way to force the images to load even though they are not visible?

I have confirmed this is the issue. The images are not loaded until the div's display is set to block. How can I make the images load in onpageload instead?

Community
  • 1
  • 1
Liftoff
  • 24,717
  • 13
  • 66
  • 119
  • are you sure that the image is loaded before you do this – Arun P Johny Feb 26 '14 at 03:33
  • No, I'm not. I thought that if I called the event from $(document).ready(), it would be loaded. Is this not the case? – Liftoff Feb 26 '14 at 03:34
  • no... you need to use `$(window).load(function(){})` for the images to load.. document ready will not wait for images to load while window load does – Arun P Johny Feb 26 '14 at 03:35
  • So I put it inside a `$(window).load(function(){});`, but it is still not loading before the image widths are calculated. Does this have anything to do with the fact that I am calling this as a separate method? – Liftoff Feb 26 '14 at 03:37
  • can you share some more context to the problem like the markup and how the method is called etc – Arun P Johny Feb 26 '14 at 03:41
  • @ArunPJohny The basic layout of my code is in the edit to my post. – Liftoff Feb 26 '14 at 03:41
  • Might be worth reading to understand how to force the browser to do a layout via javascript: http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html – jfriend00 Feb 26 '14 at 03:52

4 Answers4

1

Try using the image's load event

function cSCMH() {
    $("sc mh im img").load(function () {
        var $img = $(this);
        $img.css("height", "100%");
        console.log($img.width());
    }).filter(function () {
        return this.complete;
    }).trigger('load');
}
Arun P Johny
  • 384,651
  • 66
  • 527
  • 531
0

Since height() does not provide callback function, You can use animate() here:

$(image).animate({"height": '100%'}, function() {  
     console.log($(image).width());
})

Also, to make sure all the images are loaded properly, you can wrap your code inside $(window).load(function() { ... });

$(window).load(function() {
    $(image).animate({"height": '100%'}, function() {  
        console.log($(image).width());
    })
});
Felix
  • 37,892
  • 8
  • 43
  • 55
0

You need to wait for dom change.

$(image).css("height", "100%");
setTimeout(function() {
  console.log($(image).width());
}, 0);
Tim Green
  • 3,571
  • 2
  • 23
  • 23
0

setting height in percentage wouldn't set it when you haven't set it's parent's div fixed height. So you can also try by using height 100% to your body like this:

html,body{height: 100%;}
Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231
  • It's parent height is set. The height is set properly, but it doesn't seem to propagate by the time I try to access the width. – Liftoff Feb 26 '14 at 03:44