How to Get an Images real width and height with JavaScript

Finding the width and height of an image with JavaScript can be a little tricky. If the script runs before the image is loaded, img.width will return 0. Different browsers act in different way. Hell, different browser versions act in different ways. The fool proof way to find the dimensions on an image with JavaScript lies in the Image() object. Declare it, set it’s src value to the source of your image and do all the dimensional goodness on the image in the object’s onload function. This is also a good way to get the dimensions of an image that might not be in your HTML mark-up.

1
2
3
4
5
6
var img = new Image();
img.onload = function() {
  imgW = this.width;
  imgH = this.height;
}
img.src = 'http://1.bp.blogspot.com/-APNqWMWibVo/UIJjOcaxMnI/AAAAAAAAExk/0wA50be_--k/s1600/tumblr_m5elk1kyxB1qd769xo1_500.jpg';

JavaScript Cross Browser Window Size

Wouldn’t it be nice if there was one simple solution to find a simple property, like the size of the browser window? Too bad IE8 and below don’t like to play nice.

1
2
3
4
5
6
7
8
9
10
11
12
13
if (window.innerHeight) {
    // Firefox, Webkit
    iH = window.innerHeight;
    iW = window.innerWidth;
    console.log("Height: " + iH + "px Width: " + iW + "px");
} else {
    // Internet Explorer
    // clientWidth/Height is inner window size
    // (window width minus the scroll bar, menu etc)
    iW = document.documentElement.clientWidth;
    iH = document.documentElement.clientHeight;
    alert("Inner Height: " + iH + "px Inner Width:" + iW);
}

Enquire.js for Responsive JavaScripting

Responsive web design is all the rage lately, and with good cause. With the plethora of devices and screen sizes and aspect ratios, you can’t create a “desktop” site and a “mobile” site anymore. The best approach is to create one site that adapts to fit the device it is being viewed on. CSS media queries make it dead simple to style every element on a page exactly how you want at any screen size.

But what about JavaScript? I have some fancy jQuery animation that happens when a user clicks a button. It looks sweet on a desktop. But it’s kind of awkward on phone. Actually, it just looks bad and is pointless on a mobile device. If only I could add JavaScript to those CSS media queries. Wait. I can.

Enquire.js┬áis a lightweight JavaScript library for handling media queries. It works almost the same way as CSS media queries, you specify the max- or min-width and give it some commands to execute. More good news: it has no dependencies, not even jQuery! It’s pure JavaScript awesomeness.

Enquire gives you the option to execute code when your specified media query is matched or unmatched, meaning it listens for viewport changes and can execute different code as the window changes size. Here’s the basic setup:

1
2
3
4
5
enquire.register("screen and (max-width:1024px)", {
match: function() {
console.log("handler max-width 1024px");
}
}).listen();

 

Simple. And it just works. Need multiple queries? Not a problem:

1
2
3
4
5
6
7
8
9
enquire.register("screen and (max-width:1024px)", {
match: function() {
console.log("handler max-width 1024px");
}
}).register("screen and (max-width:480px)", {
match: function() {
console.log("handler max-width 480px");
}
}).listen();

Read more about it here.

CSS-Tricks also has good write-up about Enquire.js