Positioning a div with javascript

[RicksWorking]

I am trying to write some javascript that will, when passed a reference to a div, will hide that div and replace it with another div of the same dimensions and in the same position.


For example.
I have a div that contains some content.
The user interacts with this content and results in the content being updated by AJAX.

While the content is being refreshed, I want to replace the content with a 'loading' div.

I have written a function to do this and I successfully hide the first div and create a second div with correct dimensions. However, I am having trouble placing the second div in the same location as the original div.


What am I doing wrong??

I have included my code below:


function lockScreen(criteria)
{


var targetDiv = document.getElementById(criteria);
var div = document.createElement('div');

div.setAttribute('id',criteria +"_lock");

var image = document.createElement('image');
image.setAttribute('src','images/loading.gif');

div.appendChild(image);

div.style.width=targetDiv.offsetWidth + "px";
div.style.height=targetDiv.offsetHeight+ "px";

div.style.width = finPosX(targetDiv) + "px";
div.style.height=findPosY(targetDiv) + "px";

alert(div.style.left);
alert(div.style.top);

div.style.background="#ededed";

div.style.zIndex=-100;

document.body.appendChild(div);

targetDiv.style.visibility="hidden";


}


An example use of this might be:

<script>

lockScreen("myDiv");

</script>

<div id="myDiv">

LOTS OF CONTENT

</div>

Note that the class above uses the two methods below:

function findPosX(obj)
{
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}

function findPosY(obj)
{
var curtop = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}

These I got from quirksmode.org

Many thanks for any help!

 

[BabyJeffy]

You need to give the div you are creating an absolute position using CSS. Maybe you could add a class to it when you create it... and specify display:absolute in the class definition. Then you should find positioning it is a breeze.

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

 

[RicksWorking]

Due to the nature of the application - this just isnt possible.

Is it not possible with pure javascript?

 

[BabyJeffy]

Sure... you would set it using:

div.style.position = 'absolute';

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

 

[steven290]

I think you might be able to use Prototypes Position.cumulativeOffset method to get the exact position of the div