Desperately need help: relatively positioning layers [Archive]

tired&lonely

08-26-2002, 01:17 PM

Ok, this is a bump up from a previous post that got quickly buried by new posts and didn't get much attention. Hope you don't mind me reposting it, but I'm desperate at this point to resolve this problem.

I'm STILL stuck on applying this code I found for this preload-indicator progress bar (from "www.dynamicdrive.com" actually). The progress bar itself works fine insofar as it correctly indicates the preloading status of my images. But I'm still terribly confused as to how I can "relatively" position the progress bar between two tables. You see, the code was written for the bar to be "absolutely" positioned from the top of the webpage. However this is a problem for my application because I have a banner on the top of my page which will vary in size heigth-wise upon each visit to the page, resulting in the re-positioning of all the elements below that banner including these two tables, throwing off the "absolute" position of the progress bar. I've been playing around with this code for days and days, but I keep messing up everything when I try to convert it from "absolute" positioning to "relative" positioning. HELP!!!! :confused: Here's the segment of code in question:

<head>

var GetImages=0;
var GetTimelLeft=0;
var yposition=218; // POSITION OF LOAD BAR FROM TOP OF WINDOW, IN PIXELS
var loadedcolor='#FF00FF'; // PROGRESS BAR COLOR
var unloadedcolor='#000000'; // BGCOLOR OF UNLOADED AREA
var barheight=25; // HEIGHT OF PROGRESS BAR IN PIXELS (MIN 25)
var barwidth=350; // WIDTH OF THE BAR IN PIXELS
var bordercolor='#FF00FF'; // COLOR OF THE BORDER
var NS4 = (navigator.appName.indexOf("Netscape")>=0 && parseFloat(navigator.appVersion) >= 4 && parseFloat(navigator.appVersion) < 5)? true : false;
var IE4 = (document.all)? true : false;
var NS6 = (parseFloat(navigator.appVersion) >= 5 && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var imagesdone=false;
var blocksize=barwidth/(imagenames.length);
barheight=Math.max(barheight,25);
var loaded=0, perouter, perdone, images=new Array();

var txt=(NS4)? '<layer name="perouter" bgcolor="'+bordercolor+'" visibility="hide">' : '<div id="perouter" style="position:absolute; visibility:hidden; background-color:'+bordercolor+'">';
txt+='<table cellpadding="0" cellspacing="1" border="0"><tr><td width="'+barwidth+'" height="'+barheight+'" valign="center">';
if(NS4) txt+='<ilayer width="100%" height="100%"><layer width="100%" height="100%" bgcolor="'+unloadedcolor+'" top="0" left="0">';
txt+='<table cellpadding="0" cellspacing="0" border="0"><tr><td valign="center" width="'+barwidth+'" height="'+barheight+'" bgcolor="'+unloadedcolor+'"><center><font color="'+loadedcolor+'" size="3" face="sans-serif"><b>Loading Images & Effects...</b></font></center></td></tr></table>';
if(NS4) txt+='</layer>';
txt+=(NS4)? '<layer name="perdone" width="100%" height="'+barheight+'" bgcolor="'+loadedcolor+'" top="0" left="0">' : '<div id="perdone" style="position:absolute; top:1px; left:1px; width:'+barwidth+'px; height:'+barheight+'px; background-color:'+loadedcolor+'; z-index:100">';
txt+='<table cellpadding="0" cellspacing="0" border="0"><tr><td valign="center" width="'+barwidth+'" height="'+barheight+'" bgcolor="'+loadedcolor+'"><center><font color="'+unloadedcolor+'" size="3" face="sans-serif"><b>Loading Images & Effects...</b></font></center></td></tr></table>';
txt+=(NS4)? '</layer></ilayer>' : '</div>';
txt+='</td></tr></table>';
txt+=(NS4)?'</layer>' : '</div>';
document.write(txt);

function LoadImages(){
if(NS4){ perouter=document.perouter; perdone=document.perouter.document.layers[0].document.perdone; }
if(NS6){ perouter=document.getElementById('perouter'); perdone=document.getElementById('perdone'); }
if(IE4){ perouter=document.all.perouter; perdone=document.all.perdone; }
cliplayer(perdone,0,0,barheight,0);
setouterpos();
for(n=0;n<imagenames.length;n++){
images[n]=new Image();
images[n].src=imagenames[n];
setTimeout('checkload('+n+')' ,n*100); }}
function setouterpos(){
var ww=(IE4)? document.body.clientWidth : window.innerWidth;
var x=(ww-barwidth)/2;
if(NS4){ perouter.moveTo(x,yposition-22); perouter.visibility="show"; }
if(IE4||NS6){ perouter.style.left=x+'px'; perouter.style.top=yposition+'px'; perouter.style.visibility="visible"; }}
function dispbars(){
loaded++;
cliplayer(perdone, 0, blocksize*loaded, barheight, 0);
if(loaded>=imagenames.length)setTimeout('hideperouter()', 800); }
function checkload(index){
(images[index].complete)? dispbars() : setTimeout('checkload('+index+')', 100); }
function hideperouter(){
(NS4)? perouter.visibility="hide" : perouter.style.visibility="hidden";
imagesdone=true; }
function cliplayer(layer, ct, cr, cb, cl){
if(NS4){ layer.clip.left=cl; layer.clip.top=ct; layer.clip.right=cr; layer.clip.bottom=cb; }
if(IE4||NS6)layer.style.clip='rect('+ct+' '+cr+' '+cb+' '+cl+')'; };
GetImages = LoadImages();
</script>

</head>

<body>

{{{ BANNER which changes it's height/Y-dimension }}}
{{{ almost everytime the webpage is loaded }}}

<center><TABLE border=0 cellpadding=0 cellspacing=0 width=1100>

<center><table>
{{{ INTRODUCTION INFORMATION }}}
</table></center>

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>><<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
>>>>>> Trying to "relatively" position the progress bar HERE <<<<<<
>>>>>> midway between these 2 tables which are imbedded within <<<<<<
>>>>>> one big table containing everything <<<<<<
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>><<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

<center><table>
{{{ THUMBNAIL IMAGES }}}
</table></center>

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>><<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
>>>>>> And if it's not too difficult, I'd like to display a <<<<<<
>>>>>> duplicate copy of the progress bar HERE too <<<<<<
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>><<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

{{{{{ MORE CONTENT CONTENT CONTENT CONTENT... }}}}}

</TABLE></center>

</body>

If ANYONE has the time (and inclination), I would be tremendously appreciative and most deeply indebted for any assistance you can throw my way.<head> </body> <head>