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?

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
– achinda99, Commented Mar 16, 2009 at 15:35
your code looks ok - are you sure that 'div' is not undefined? — Jesse Rusak
– 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
– achinda99, Commented Mar 16, 2009 at 15:43
Nvm, these aren't runat="server" controls. No ClientID needed. — achinda99
– achinda99, Commented Mar 16, 2009 at 15:44

Simon Lieschke · Accepted Answer · 2009-03-18 05:48:01Z

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

answered Mar 18, 2009 at 5:48

Simon Lieschke

13.4k6 gold badges48 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user2208817 · Accepted Answer · 2013-03-25 18:58:30Z

0

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

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

answered Mar 25, 2013 at 18:58

user2208817

1

Collectives™ on Stack Overflow

Resize and repositon div using javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related