Changing <div> width in IE

[paul]

I have a JS function to change the width of a <div> that works great
in Firefox, but not at all in IE7. In IE an error message occurs:

Line: 92
Char: 5
Error: Invalid Argument
Code: 0

Firefox reports no errors in the Error Console, or Firebug, and the
<div> is resized correctly. Here is the function:

// function to size the tabbed menu background
function sizeTabbedMenu () {
// get screen width so we can set the width of the tabbed
background
var currWidth = parseInt(window.innerWidth);
var newWidth = (currWidth - 150) + 'px'; // subtract side menu
width

// set width of background div
bgEl = document.getElementById('tab_bg');
bgEl.style.width = newWidth;

} // end of function sizeTabbedMenu()

Line 92 in the JS file is the line after bgEl.style.width = newWidth;,
which is actually a blank line. And I have tried using clientWidth
instead of innerWidth, but that made no difference.

The html for the <div> is:

<div id="tab_bg" style="position:absolute; display:inline; background-
image:url('/cq/images/tab_background.png'); background-repeat:repeat-
x; margin-left:-5px; margin-right:-5px; height:30px; vertical-
align:middle; z-index:1;">

Within the <div> are other <div>s with images and text for some tab
styled menu graphics. The <div> is properly closed.

The tabbed menu is in a separate PHP script which includes the
following code:

<?php
// check for $select_tab_id and modify background image accordingly

if (isset ($select_tab_id)) {
$l_side = $select_tab_id . '_left';
$mid = $select_tab_id . '_mid';
$r_side = $select_tab_id . '_right';
echo <<<EOT
<script type="text/javascript" language="javascript">

var tab = document.getElementById('$select_tab_id');
var tab_left = document.getElementById('$l_side');
var tab_mid = document.getElementById('$mid');
var tab_right = document.getElementById('$r_side');

tab_left.src = "/cq/images/left_selected.png";
tab_mid.style.backgroundImage = "url('/cq/images/
mid_selected.png')";
tab_mid.style.backgroundRepeat = "repeat-x";
tab_mid.style.color = "#0033bc";
tab_right.src = "/cq/images/right_selected.png";

// Invoke the function sizeTabbedMenu() (in cq.js) to set
// the width of the div containing the tabbed menu
sizeTabbedMenu();
// Run the sizeTabbedMenu() function when window is resized
window.onresize = sizeTabbedMenu;

</script>


EOT;
}
?>

As a test, I tried the following code on a test page, which did work
in IE:

<script type="text/javascript" language="javascript">
var el = document.getElementById('tab_bg');
el.style.width = '1024px';
</script>

.... so I expect the problem is that newWidth is NULL in IE, but I
don't see why that would be so.

If anyone can take a look at this and figure out why it doesn't work
in IE, I'd appreciate it. Thanks!

 

[Thomas 'PointedEars' Lahn]

I have a JS function to change the width of a <div> that works great
in Firefox, but not at all in IE7. In IE an error message occurs:

Line: 92
Char: 5
Error: Invalid Argument
Code: 0

Firefox reports no errors in the Error Console, or Firebug, and the
<div> is resized correctly. Here is the function:

// function to size the tabbed menu background
function sizeTabbedMenu () {
// get screen width so we can set the width of the tabbed
background
var currWidth = parseInt(window.innerWidth);

Because the `innerWidth' property is Mozilla-proprietary, the result of the
argument expression is `undefined', and the return value of parseInt() and
later the value of `currWidth' is `NaN'.

var newWidth = (currWidth - 150) + 'px'; // subtract side menu
width

Then `newWidth' is assigned "NaNpx" (NaN-150 resulting in `NaN', then
string-concatenated with "px"), ...

// set width of background div
bgEl = document.getElementById('tab_bg');
bgEl.style.width = newWidth;

.... and even though you should add runtime feature tests here, MSHTML
correctly complains about an invalid value.

[...]} // end of function sizeTabbedMenu()

Line 92 in the JS file is the line after bgEl.style.width = newWidth;,
which is actually a blank line. And I have tried using clientWidth
instead of innerWidth, but that made no difference.

window.clientWidth also yields `undefined' in MSHTML, which a little bit of
debugging on your part, not necessarily including the use of
<http://www.microsoft.com/downloads/details.aspx?FamilyID=2f465be0-94fd-4569-b3c4-dffdf19ccd99>
or <http://www.getfirebug.com/lite.html>, would have revealed.

(window.)document.body.clientWidth and (window.)document.body.offsetWidth work.

RTFM: <http://msdn.microsoft.com/en-us/library/ms533050(VS.85).aspx>

Furthermore, it should be

parseInt(..., 10)

to be sure.

The html for the <div> is:

<div id="tab_bg" style="position:absolute; display:inline; background-
image:url('/cq/images/tab_background.png'); background-repeat:repeat-
x; margin-left:-5px; margin-right:-5px; height:30px; vertical-
align:middle; z-index:1;">

You really want to use a `style' element or external stylesheet resource to
define this. You have an ID already that you can use for the selector.

Within the <div> are other <div>s with images and text for some tab
styled menu graphics. The <div> is properly closed.

However, one wonders what do you hope to accomplish by using a `div' element
which is by default display:block, setting it to display:inline and setting
its `height' property although inline elements can have no assigned height
(their box dimensions are specified by their contents), a somewhat silly
mistake that is only covered by your also setting position:absolute.

And ISTM you are misusing DIV elements while semantically correct
alternatives exist.

The tabbed menu is in a separate PHP script which includes the
following code:

Posting server-side code is unhelpful in solving client-side problems, as it
may generate anything or nothing at all to be served to the client.


PointedEars

 

[paul]

Thanks Thomas. document.body.clientWidth did the trick!