Question

I am currently facing an error in JavaScript. The code is given below

function loader() {
    size = window.innerWidth;
    size = size - 300;
    mainj = document.getElementById('main1');
    mainj.style.left = size.toString() + 'px';
    submainj = document.getElementById('submain1');
    submainj.style.left = size.toString() + 'px';
    size = mainj.style.top + 26;
    document.getElementById('submain1').style.top = size.toString() + 'px';
}
onload = loader();

The error comes only in Internet Explorer and the code works perfectly in Firefox. The error shows is in the fifth line, the error being

Message: Object required
Line: 34
Char: 1
Code: 0
URI: http://localhost/home.php

Line 34 is the 5th line given in the code – ‘mainj.style.left…..’
How can I fix this problem?

Answer 1

This is the offending line:

size=window.innerWidth-300;

Internet Explorer doesn’t have a concept of inner width on window, as far as I know. The following code is a decent cross-browser implementation, similar to something you would see in a library. There are corresponding innerHeight and offsetHeight properties if you needed height as well.

var size = 0;
if(window.innerWidth) {
    size = window.innerWidth;
} else if (document.documentElement && document.documentElement.offsetWidth) {
    size = document.documentElement.offsetWidth;
} else if (document.body && document.body.offsetWidth) {
    size = document.body.offsetWidth;
}