Concatenation failure in IE!

**JShor** · 09-25-2011, 06:36 PM

Works fine in Firefox, Chrome, Opera and Safari. However, in IE, I get the warning "Invalid argument" for these two lines.

Code:

    elem.style.left = (xval + 'px');
    elem.style.top = (yval + 'px');

Am I not allowed to concatenate an integer with a string in IE? I've tried removing the parentheses, adding .toString() at the end. But nothing seems to work. Any help guys?

**jscheuer1** · 09-25-2011, 08:44 PM

Usually it's done:

Code:

elem.style.left = xval + 'px';

And it should be fine with the parentheses. And yes it works in IE. So the problem is likely that in IE elem and/or xval are not as you expect them to be in at that point in the code.

Like xval could be NaN, or elem could be 'null or not an object', or qualify for 'object has no such object or property'. Or something else. Perhaps the event that sets this all in motion hasn't been assigned in IE . . .

For instance, this works fine in IE and others:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
var xval = 100;
function moveit(el){
	el.style.position = 'relative';
	el.style.left = xval + 'px';
}
</script>
</head>
<body>
<div style="background-color:blue;width:20px;height:20px;" onclick="moveit(this);"></div>
</body>
</html>

Are you getting any errors in the IE developer tools script console?

To diagnose this further it would be a great help to have a link to a page that demonstrates the problem.

**JShor** · 09-25-2011, 10:27 PM

Ah, I've solved the problem. xval was actually containing window.innerWidth + 200, but in IE, window.innerWidth was returning as undefined, resulting in the whole equation becoming NaN. I ended up using the jQuery $(window).width() to solve my problem.

Thanks for replying, John.

**jscheuer1** · 09-25-2011, 11:00 PM

In standards mode the closest equivalent to window.innerWidth in IE is:

Code:

document.documentElement.clientWidth

So prior to jQuery and other similar libraries we see a lot of stuff like:

Code:

var winwidth = window.innerWidth? window.innerWidth : document.documentElement.clientWidth;

Which is a good way to do it as I believe IE 9 now supports window.innerWidth. Except that if there's a vertical scrollbar and you don't want its width included, at least in some browsers, document.documentElement.clientWidth is more accurate. And many (I'm pretty sure not all) other modern browsers support it.

So it depends upon how pixel perfect you need it to be. In most cases 'in the neighborhood' is close enough. In those cases where it isn't, the calculations (if truly cross browser) can get pretty complex.

Thread: Concatenation failure in IE!

Thread Tools

Search Thread

Concatenation failure in IE!

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions