Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Aug 2002
    Posts
    69
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

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

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Why not just position the progress bar absolutely (using CSS) within a relatively positioned table?

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

  • #4
    New Coder
    Join Date
    Aug 2002
    Posts
    69
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •