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

<table id="page_content" background="gfx/main_bg.gif" border=0 cellpadding=0 cellspacing=0 width=1024 height=768>
  <tr>
    <td>
      <!-- content goes here -->
    </td>
  </tr>
</table>

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:

// 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?

Recommended Answers

All 3 Replies

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

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?

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

do something like

// 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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.