View Full Version : Desperately need help: relatively positioning layers

08-26-2002, 02: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:

<!-- ********************* BEGIN PROGRESS BAR CODE********************** -->
var GetImages=0;
var GetTimelLeft=0;
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);
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+=(NS4)?'</layer>' : '</div>';

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; }
images[n]=new Image();
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(){
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();
<!-- ********************** END PROGRESS BAR CODE ********************** -->


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

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


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


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




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>

08-26-2002, 09:12 PM
Could you post a link to the page in question :D:D

08-28-2002, 06:55 PM
Hello A*C and any other javagurus out there with a few minutes to spare to help out a poor lost javascript newbie.

Ok, here's the link to my test webpage:

http://members.aol.com/thecddj/Test.html (http://)

Again, to summarize my problem, I'm STILL trying to "relatively" position this darn PROGRESS BAR between two tables, by somehow modifying the code that I found for one that's "absolutely" positioned from the top of the webpage. It's the best code I've came across for the kind of progress bar that I need/desire, but again, I'm expecting a banner (not by my choice) at the top of my page which will vary in height upon every visit to my page consequently throwing off any absolute positioning in my page... hence, the progress bar positioning issue. If you view the webpage from the link above, you'll see that I've annotated within the rendered page where exactly my positioning issue occurs. The source code should be the same as that included in the initial post here. Also, if I need to clarify this any further, please pleeeease let me know, rather than ignoring this post.... I'm borderline desparate at this point!!!
thank you soooooo much whoever (I hope!!!)

08-29-2002, 07:42 PM
Okay, well i looked at the script and saw what you were talking about... this is my theory...

Since it is absolute wich it needs to be in ordor to work it stays were it has been told to stay, wich is asigned with the yposition variable..

Since the banner changes in height the page itself moves and leaves the loading bar in the same position... So the problem lies not with the loading bar but with the page itself.. So what I would suggest to do is to asign a table like you had but set the height. But set it large enough so that the banner doesn't overlap it, this way when the banner changes say from a height of 100 to 80 it changes but the table remains and that page does not move wich means that load bar stays where it should be...

Hope this helped :D:D