Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Rhinorhino on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

floating window 1

Status
Not open for further replies.
btween

btween

Programmer
Joined
Aug 7, 2003
Messages
338
Location
US
How can I get a table to sate centered in the middle of the page even if the browser attempts to resize the browser window vertically:

ie:
If you look at this page:
when I resize my exporer bar vertically the main table stays in the same place, even though it's supposed to adjust itself so it's in the center of the page.

thanks

new york web development, ny web design
 
Sort by date Sort by votes
I don't have time to type up an example as I'm heading out to lunch soon. But you can use document.body.clientHeight to find the height dimension of the viewable part of your browser. Additionally, you can use document.body.scrollTop to see how far down the page has been scrolled.

I would encapsulate the table in a div container. Manually set the y coordinate of the div to (half the screen height) - (half the table height) + (how far the page has been scrolled). That will place the table in the vertical middle of the viewable part of your browser.

From there, you will have to set up a timeout for the page to intermittently reposition the div so that it will stay in the middle when the page is resized.

Hope that's not too unclear.

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.
[banghead]
 
Upvote 0 Downvote
Is there a sample script anywhere,

my javascript skills are not that great. I'll try to work with this regardless.

new york web development, ny web design
 
Upvote 0 Downvote
I typed up this example, it works in IE. Not sure about other browsers:
Code: 
<script language=javascript>
function setDivPosition(obj) {
   h = document.body.clientHeight;   //viewable window height
   dh = obj.offsetHeight;            //div height
   y = (h / 2) - (dh / 2) + document.body.scrollTop;
   obj.style.top = y;
   setTimeout("setDivPosition(document.getElementById('tableDiv'))", 50);
}
</script>
<body style="text-align:center;" onload="setDivPosition(document.getElementById('tableDiv'))">
  <form name=blahForm>
    <div id=tableDiv style="position:absolute">
      <table border=1px>
        <tr>
          <td>Here</td>
          <td>is</td>
        </tr>
        <tr>
          <td>my</td>
          <td>table</td>
        </tr>
      </table>
    </div>
    I put in these messages<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    So that you could see the<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    Table scroll past them<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    And you'd know that<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    It's staying vertically centered.<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </form>
</body>

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.
[banghead]
 
Upvote 0 Downvote
Thanks for that.

I really appreciate your help.

i implemented the script but for some reason the table is all the way to the right:


let me know if you know why this is happening. Also please let me know if you need to see any of the code.



new york web development, ny web design
 
Upvote 0 Downvote
I'm at work now so I can't really browse your link, but what I would suggest is using offsetWidth to find the width of the div container, and document.body.clientWidth to find the width of the viewable browser window. Create a variable in the function named x (just like I did with y above) and set it equal to (browser width/2) - (div width/2). Provided your document doesn't scroll left and right this should be sufficient, not to mention I'm not sure if document.body.scrollLeft even exists. Then in the function set obj.style.left = x

It should be pretty easy to do this using the function I provided as an outline.

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.
[banghead]
 
Upvote 0 Downvote
I did what you said, and it works but there is one more problem. At first when the table loads, it loads on the right side of the page and once the whole page is loaded the script centers it accordingly.

I need for the table to be able to load correctly right off the bat.

I think that what it's doing now is it first loads the whole page to verify the property of the div and then it reloads.

Sorry to bug you at work, I don't need the answer now, whenever you get a chance, but if you have any suggestions that would be great,

thanks again

the code for the script:

<script language=javascript>
function setDivPosition(obj) {
h = document.body.clientHeight; //viewable window height
x = (document.body.clientWidth/2) - (obj.offsetWidth/2);
dh = obj.offsetHeight; //div height
y = (h / 2) - (dh / 2) + document.body.scrollTop;
obj.style.top = y;
obj.style.left = x;
setTimeout("setDivPosition(document.getElementById('tableDiv'))", 50);
}
</script>

new york web development, ny web design
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

rogerte
  • Locked
  • Question Question
Code that works on Windows, Android and Iphone
Replies
0
Views
914
rogerte
rogerte
bs6600
  • Locked
  • Question Question
How can I make a window wider?
Replies
1
Views
386
xwb
xwb
bach1
  • Locked
  • Question Question
How to get value from popup window to parent window by clicking from database selection?
Replies
2
Views
454
Offera
Offera
sirnose1
  • Locked
  • Question Question
Need to Open a new window in onClick event from code
Replies
2
Views
381
ChrisHirst
ChrisHirst
Bong
  • Locked
  • Question Question
reusing a window
Replies
3
Views
224
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top