Ad:

HTML and CSS Discussion Thread
Marked Solved
Views: 9846

Dec 24th, 2006

positioning a dynamic div to cover an existing table

Expand Post »

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:

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?

Similar Threads

using javascript to dynamically add to existing html table in JavaScript / DHTML / AJAX
About DIV tags in HTML and CSS
Add an attribute to existing table in Database Design

evank

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

14 posts
since Dec 2006

Permalink

Dec 25th, 2006

Re: positioning a dynamic div to cover an existing table

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

vikonava

Reputation Points: 15

Solved Threads: 4

Posting Whiz in Training

Offline

251 posts
since Dec 2006

Permalink

Dec 25th, 2006

Re: positioning a dynamic div to cover an existing table

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?

evank

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

14 posts
since Dec 2006

Permalink

Dec 25th, 2006

Re: positioning a dynamic div to cover an existing table

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

do something like

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.

vikonava

Reputation Points: 15

Solved Threads: 4

Posting Whiz in Training

Offline

251 posts
since Dec 2006

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: CSS Div's For Myspace

Next Thread in HTML and CSS Forum Timeline: Positioning static image over scrolling images

DaniWeb Message

Cancel Changes

User Name
Password