HTML and CSS

positioning a dynamic div to cover an existing table

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Dec 2006

Posts: 14

Reputation: evank is an unknown quantity at this point

Solved Threads: 0

evank

Offline

Newbie Poster

positioning a dynamic div to cover an existing table

Dec 24th, 2006

I have a page where all the content is contained in one centered table of static size:

[html]<table id="page_content" background="gfx/main_bg.gif" border=0 cellpadding=0 cellspacing=0 width=1024 height=768>
<tr>
<td>

</td>
</tr>
</table>[/html]
the page is fairly graphics-laden, so I want to hide it with a preload screen until the page is fully loaded. I'm attempting to do this by dynamically creating a div with a high z-index and absolute positioning, and putting it on top of said content table:

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
// get page content table
var contentTable = document.getElementById('page_content');
 
// create div and set id
var loadDiv = document.createElement('div');
loadDiv.id = 'loading_div';
 
// put in loading image
loadDiv.innerHTML = '<img src="gfx/loading.gif" width=1024 height=768>';
 
// do positioning and dimensions
loadDiv.style.position = 'absolute';
loadDiv.style.top = contentTable.offsetTop;
loadDiv.style.left = contentTable.offsetLeft;
loadDiv.style.zIndex = 100;
 
// insert into page
contentTable.parentNode.insertBefore(loadDiv,contentTable);
// get page content table
var contentTable = document.getElementById('page_content');

// create div and set id
var loadDiv = document.createElement('div');
loadDiv.id = 'loading_div';

// put in loading image
loadDiv.innerHTML = '<img src="gfx/loading.gif" width=1024 height=768>';

// do positioning and dimensions
loadDiv.style.position = 'absolute';
loadDiv.style.top = contentTable.offsetTop;
loadDiv.style.left = contentTable.offsetLeft;
loadDiv.style.zIndex = 100;

// insert into page
contentTable.parentNode.insertBefore(loadDiv,contentTable);

this doesnt exactly work, however...it puts the div near said table, but they dont line up exactly. am I missing something obvious?

--
The trouble with having an open mind, of course, is that people will insist on coming along and trying to put things in it.
~Terry Pratchett

•

Join Date: Dec 2006

Posts: 249

Reputation: vikonava is an unknown quantity at this point

Solved Threads: 4

vikonava

Offline

Posting Whiz in Training

Re: positioning a dynamic div to cover an existing table

Dec 25th, 2006

check for

loadDiv.style.top = contentTable.offsetTop;
loadDiv.style.left = contentTable.offsetLeft;

maybe the top and left, maybe coordinates are incorrect, which i am almost sure of that, try manually inserting the Top and Left coordinates by yourself instead of using contentTable.offsetTop and contentTable.offsetLeft

VikosHosting.com - Free Website Hosting and Cheap Prices For Starting Business.
TheTechNews.info - Information, newsflash and articles related to technology global.
VikoBlog.com - Completely free Photo/Video Blogs That Can be shared to meet people.
GuruPC.info - Free programming languages tutorials.

•

Join Date: Dec 2006

Posts: 14

Reputation: evank is an unknown quantity at this point

Solved Threads: 0

evank

Offline

Newbie Poster

Re: positioning a dynamic div to cover an existing table

Dec 25th, 2006

the content table is centered within the page (which depends on screen size), and the layout uses default page margins (which seem to vary from browser to browser), so i cant know the exact top and left of the content before runtime.

any ideas on how to correctly calculate them?

--
The trouble with having an open mind, of course, is that people will insist on coming along and trying to put things in it.
~Terry Pratchett

•

Join Date: Dec 2006

Posts: 249

Reputation: vikonava is an unknown quantity at this point

Solved Threads: 4

vikonava

Offline

Posting Whiz in Training

Re: positioning a dynamic div to cover an existing table

Dec 25th, 2006

ok then calculate the them by adding or substracting to contentTable.offsetLeft and contentTable.offsetTop

do something like

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

// do positioning and dimensions
loadDiv.style.position = 'absolute';
correcttop = contentTable.offsetTop-100;
correctleft = contentTable.offsetLeft-100;
loadDiv.style.top = correcttop;
loadDiv.style.left = correctleft;

in which case you are gonna change the -100 for the amount your like to sustract or add like adding 50 example: correcttop = contentTable.offsetTop+50;
try to play withing the coding

Last edited by vikonava; Dec 25th, 2006 at 10:32 pm.