HTML <img> Tag Issue In Google Chrome

Q: Why can I not get correct width and height of an image via Javascript in Chrome?On my other website Men's Fashion For Less I use a lot of jQuery plugins. I used http://www.smoothdivscroll.com/ to auto scroll a bunch of photos and to my surprise Chrome is not handling the scrolling image functionality correctly. Later I finally found out why. Read on to learn how I solved it.

AnswerIf you use jQuery a lot in a website and are currently trying to validate your website in Chrome, you may be surprised that it's not handling images the same way Internet Explorer and Firefox are via javascript. Basically if you are trying to get the width or height of an image via javascript or jQuery like the following:

var img = document.getElementById('imageid');
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;

you need to make sure either of the following:

* The <img> tag has width and height specified as attributes or via CSS, or if you prefer...

* Use

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

instead of

$(document).ready(function() {...})

So that the Chrome can successfully detect the width and height of an image once it's loaded.


This is due to the fact that Chrome is a Webkit browser (same issue applies to Safari) and for some reason you need to explicitly tell Chrome the height and width of an image if you want to be able to access them via javascript. Internet Explorer and Firefox are able to detect the dimension of an image without you having to do the above. I am not sure why. Anyone care to enlighten me?

Droid Screenshots

One of my favorite games last year was Assassin's Creed: Brotherhood, and one of the cool things that came with the collectors edition was a concept art book. Today while reading Kotaku I came across a link to the concept artists Donglu Yu's blog and found they make excellent Android wallpapers.

The panning affect when moving between workspaces is really cool, and below I tried to replicate it with a few screen shots from my rooted Droid. I should also note that I used my excellent Chrome cr-48 netbook and the cloud photo editing site Picnik putting these images together.