473,836 Members | 1,867 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Changing <div> width in IE

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!
Jun 27 '08 #1
2 3208
pa**@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
Jun 27 '08 #2
Thanks Thomas. document.body.c lientWidth did the trick!

Jun 27 '08 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

61
24528
by: Toby Austin | last post by:
I'm trying to replace <table>s with <div>s as much as possible. However, I can't figure out how to do the following… <table> <tr> <td valign="top" width="100%">some data that will 'stretch'</td> <td valign="top" width="300">some data that won't 'stetch'</td> </tr> </table>
2
3746
by: Marcus Otmarsen | last post by:
Ok, the situation is as follows: I defined a <DIV> like: <div id="myid" style="position: absolute; height: 10; width: 10;"><img src="images/object.gif" height=10 width=10></div> This pane is used to move an object around on the web page by a javascript. As long as I define no further <div> pane everything works fine.
2
7581
by: listaction | last post by:
Hi Folks, can you help me by explaining how the code below can be translated using <div> and achieve the same effect? Thanks, LA <html> <body> <table bgcolor="#000000" width="100%" cellspacing="1">
9
3152
by: Julia Briggs | last post by:
How do I construct a <iframe> or equivalent for FireFox/NS browsers, inside a screen centered <div> tag? Can it be done?
4
10345
by: He Shiming | last post by:
Hi, I'm wondering how can I use <DIV> to mimic a <TABLE>. In a bare <TABLE> without a width attribute, the width of the table get dynamically expanded according to the content. However, <DIV> doesn't have the same behavior. In the CSS of the DIV tag, I have: background: #FF0000; to see the area covered by <DIV>. It appears that <DIV> covers the entire row even if width
1
4630
by: Carl | last post by:
Hi all I have a javascript function that drags and drops an element (ie img) into a container (ie bordered div). The function works and returns the element and and container. My next step is to center the element in the container if the user is sloppy with positioning it. I can only test this on IE6 and IE5.5 and it fails. It positions the element too much right and low. Here is the function: function SnapToContainer(Container,El) {
5
13579
by: Agix | last post by:
Hi there, Please check out : http://clarifysolutions.co.uk/certenroll/ The source is included below. This page is a test, so I can play about with paddings, margins and layouts using divs as semantically meaningless containers for bunch's of other elements - like everyone keeps telling me to make my code standards compliant. This request is not because I want a fix, but because I want to
5
5271
nathj
by: nathj | last post by:
Hi All, I'm working on a new site that has a two column layout underneath a title bar. If you check out: http://www.christianleadership.org.uk/scratch/mainpage.php using IE or Opera you will see what I am after as these browsers work fine. However, in FF the results are slightly different - take a look and you'll see that the <p>, within <div class="mainContent"> has shot way over to the right. I've been working on this for 2days now...
8
10053
prino
by: prino | last post by:
Hi all, I've written code (in REXX) that takes files in legacy languages (PL/I, COBOL, z/OS assembler, etc) and converts them into HTML in a format similar to what's displayed in the z/OS ISPF editor. A fellow member of the PCG has helped me by creating a bit of Javascript to emulate the scrolling and using Google I've now gotten it into a state where it almost passes the W3C Markup Validation Service. However, the one error, Error Line 166,...
0
9656
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10819
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10526
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10567
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9349
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7771
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6972
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5641
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
4437
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.