Resize and repositon div using javascript

Question

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?

Answer 1

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 :)