Changing <div> width in IE

[paul@dark-sky.us]

I have a JS function to change the width of a <divthat 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
<divis 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.getEle mentById('tab_b g');
bgEl.style.widt h = newWidth;

} // end of function sizeTabbedMenu( )

Line 92 in the JS file is the line after bgEl.style.widt h = 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 <divis:

<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 <divare other <div>s with images and text for some tab
styled menu graphics. The <divis 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="javas cript">

var tab = document.getEle mentById('$sele ct_tab_id');
var tab_left = document.getEle mentById('$l_si de');
var tab_mid = document.getEle mentById('$mid' );
var tab_right = document.getEle mentById('$r_si de');

tab_left.src = "/cq/images/left_selected.p ng";
tab_mid.style.b ackgroundImage = "url('/cq/images/
mid_selected.pn g')";
tab_mid.style.b ackgroundRepeat = "repeat-x";
tab_mid.style.c olor = "#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="javas cript">
var el = document.getEle mentById('tab_b g');
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]

Re: Changing &lt;div&gt; width in IE

paul@dark-sky.us wrote:

I have a JS function to change the width of a <divthat 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
<divis 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.getEle mentById('tab_b g');
bgEl.style.widt h = 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.widt h = newWidth;,
which is actually a blank line. And I have tried using clientWidth
instead of innerWidth, but that made no difference.

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

(window.)docume nt.body.clientW idth and (window.)docume nt.body.offsetW idth 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 <divis:
>
<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 <divare other <div>s with images and text for some tab
styled menu graphics. The <divis 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:absolu te.

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
--
var bugRiddenCrashP ronePieceOfJunk = (
navigator.userA gent.indexOf('M SIE 5') != -1
&& navigator.userA gent.indexOf('M ac') != -1
) // Plone, register_functi on.js:16

[paul@dark-sky.us]

Re: Changing &lt;div&gt; width in IE

Thanks Thomas. document.body.c lientWidth did the trick!