I'm trying to do a simple resize and reposition of a div element that shows a ajax loading image. The content it loads can change size, so I want the div element to resize to be the size of the parent, which in this case is a table dimension with the id "thEngineCategories".

function resize_divProgress() {
    var control = document.getElementById('thEngineCategories');
    var div = document.getElementById('divProgress');

    div.style.left = control.offsetLeft + 'px';
    div.style.top = control.offsetTop + 'px';
    div.style.width = control.offsetWidth + 'px';
    div.style.height = control.offsetHeight + 'px';
}

The following is the javascript I have and it errors on

div.style.left = control.offsetLeft + 'px';

saying "div.style is undefined". Whats wrong here?

The div in html is as follows:

<div class="overlay" id="divProgress">

The js function is called as follows:

<th id="thEngineCategories" onmouseover="resize_divProgress()" >

The CSS is:

.overlay
{
    border: black 1px solid;
    padding: 5px;
    z-index: 100;
    width: 300px;
    position: absolute;
    background-color: #fff;
    -moz-opacity: 0.75;
    opacity: 0.75;
    filter: alpha(opacity=75);
    font-family: Tahoma;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
}

Is there a better way to handle what I'm trying to do?

I'm trying to do a simple resize and reposition of a div element that shows a ajax loading image. The content it loads can change size, so I want the div element to resize to be the size of the parent, which in this case is a table dimension with the id "thEngineCategories".

function resize_divProgress() {
    var control = document.getElementById('thEngineCategories');
    var div = document.getElementById('divProgress');

    div.style.left = control.offsetLeft + 'px';
    div.style.top = control.offsetTop + 'px';
    div.style.width = control.offsetWidth + 'px';
    div.style.height = control.offsetHeight + 'px';
}

The following is the javascript I have and it errors on

div.style.left = control.offsetLeft + 'px';

saying "div.style is undefined". Whats wrong here?

The div in html is as follows:

<div class="overlay" id="divProgress">

The js function is called as follows:

<th id="thEngineCategories" onmouseover="resize_divProgress()" >

The CSS is:

.overlay
{
    border: black 1px solid;
    padding: 5px;
    z-index: 100;
    width: 300px;
    position: absolute;
    background-color: #fff;
    -moz-opacity: 0.75;
    opacity: 0.75;
    filter: alpha(opacity=75);
    font-family: Tahoma;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
}

Is there a better way to handle what I'm trying to do?

• javascript
• html
• coding-style
• resize

• What, if any, javascript library are you using? – Jesse Rusak Commented Mar 16, 2009 at 15:33
• I know another developer was loading jQuery in one of the master pages, but I'm not sure if its here to stay, so I want to keep this simple and library independent. – achinda99 Commented Mar 16, 2009 at 15:35
• your code looks ok - are you sure that 'div' is not undefined? – Jesse Rusak Commented Mar 16, 2009 at 15:40
• In firebug, it appears to be defined fine. If I hover over the div variable, it shows div#divProgress.overlay. I forgot this is in a master/content page, so I'll change to using ClientID – achinda99 Commented Mar 16, 2009 at 15:43
• Nvm, these aren't runat="server" controls. No ClientID needed. – achinda99 Commented Mar 16, 2009 at 15:44

2 Answers 2

I created a basic test page from the code you provided and couldn't reproduce the problem. This suggests there is something else going on in your page that is causing the behaviour you are seeing.

Could you take your page and pare it down to a minimal case that demonstrates the JavaScript error? You'll find performing this process often will reveal the cause of the error - you'll remove something and it will start working, indicating that something in that removed section of code is the source of the problem :)

div.style.width is not valid property for accessing width of div.

use div.offsetWidth and div.offsetHeight for width and height respectively.