...

View Full Version : Simple question (i hope): GETTING X/Y COORDINATES ON A WEBPAGE



tired&lonely
08-22-2002, 02:13 PM
How does one determine the absolute coordinates (x,y) of where a table was rendered on a webpage? I need to place a layer relative to that position...... actually (to be more specific), I'm trying to code in the y-coordinate of a progress bar which would be dependent on the position of a table that might be changing positions if top-positioned advertising banners change sizes.... maybe I'm not too good at wording this so is that clear as mud?!!!:rolleyes:

brothercake
08-22-2002, 02:20 PM
check this out

http://www.webreference.com/js/column33/image.html

adios
08-22-2002, 08:47 PM
Why not just position the progress bar absolutely (using CSS) within a relatively positioned table?

http://www.webreference.com/html/tutorial18/2.html

tired&lonely
08-23-2002, 05:37 PM
Hello again brothercake, adios, & whoever else wants to chime in,

I hope I'm not pushing my luck here getting more wonderful advice from you guys, but 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 it 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 upon each visit to the page, resulting in the re-positioning of all the elements below that banner including these 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!!!!

And I've read and re-read for the umpteenth time the references you gave me above, trying to understand them, and I've tried applying my interpretations of it on how to get this to work... but it still ain't working! So, I guess due to my pathetic learning curve on all this CSS/layers/javascripting, I turn to you one last time. If you have the time (and inclination), I would be tremendously appreciative and most deeply indebted for any assistance you can throw my way. So, here's a summarization on the actual code:

<head>
<!-- ********************* BEGIN PROGRESS BAR CODE********************** -->

var GetImages=0;
var GetTimelLeft=0;
var yposition=222; // 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-24); 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+')'; };

<!-- ********************** END PROGRESS BAR CODE ********************** -->
</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>
{{{ MY 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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum