Member Avatar for evank

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?

  • 2 Contributors
  • 3 Replies
  • 142 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by vikonava

Dani AI

Generated

For context: is trying to put a preload overlay on top of a centered, fixed-size content table and the overlay doesn't line up; suggested manual offset tweaks, but that is fragile. The root causes are (a) offsets like element.offsetTop/offsetLeft are relative to the element's offsetParent and do not include page scroll, and (b) CSS positioning/stacking contexts (positioned ancestors, margins, borders) change coordinates between browsers.

Two reliable approaches

  1. Compute the table's page coordinates and size, append the overlay to the document body, and position it with explicit "px" values. Use Element.getBoundingClientRect() plus window scroll offsets to get absolute page coordinates; set width/height from rect or offsetWidth/offsetHeight; re-run on resize/scroll if the page can move.
var rect = contentTable.getBoundingClientRect();
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || 0;
var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || 0;

overlay.style.position = 'absolute';
overlay.style.top = (rect.top + scrollTop) + 'px';
overlay.style.left = (rect.left + scrollLeft) + 'px';
overlay.style.width = (rect.width || contentTable.offsetWidth) + 'px';
overlay.style.height = (rect.height || contentTable.offsetHeight) + 'px';
document.body.appendChild(overlay);
  1. Simpler and more robust: wrap the table in a relatively positioned container and add the overlay as an absolutely positioned child with top:0; left:0; width:100%; height:100%. No coordinate math, no scroll problems.

Extra notes: use window.onload to remove the preload after all resources load (or image load events if you only wait for specific images); prefer appending the overlay to body to avoid unexpected stacking contexts; give the overlay a high z-index; and recalc positioning on resize/scroll if you use absolute positioning tied to the table. For reference on accurate client rects see getBoundingClientRect.

Recommended Answers

All 3 Replies

Member Avatar for vikonava

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

Member Avatar for evank

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?

Member Avatar for vikonava

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.