PDA

View Full Version : Center horizontal scroll bar

Morgoth
03-05-2005, 12:43 AM
This works for me with IE 6.0


<html>
<body onload="scrollBy((document.body['scrollWidth'] - 1010) / 2, 0)">
<table width="500" border="1" align="center">
<tr>
<td align="center">1 1 1 1 1 2 2 2 2 2 3 3 3 3 3 4 4 4 4 4 5 5 5 5 5 6 6 6 6 6 7 7 7 7 7 8 8 8 8 8 9 9 9 9 9 | 9 9 9 9 9 8 8 8 8 8 7 7 7 7 7 6 6 6 6 6 5 5 5 5 5 4 4 4 4 4 3 3 3 3 3 2 2 2 2 2 1 1 1 1 1</td></td>
</tr>
</table>
</body>
</html>


The numbers in the table are just to keep track of how centered the horizontal scroll bar is. Mess around with the table width; Change it to 100 or to 10000. The numbers stay aligned perfectly.

Anyone have any problems with different browsers?
harbingerOTV
03-05-2005, 02:07 AM
I changed the table width to 5000 just to see it full screen. Works almost perfect in FF as well as IE6. Nice job. It was a little off of center, so I made a little change:

<body onload="scrollBy((document.body['scrollWidth'] - 1010) / 2.06, 0)">


Seems to make it align dead center.

Nice job (but mine was more fun :p )
Morgoth
03-06-2005, 10:08 AM
Hum... No. If you change the width to 2.06, the numbers will move when you type in a different width.

My code is set for 1024x768
1024 being the width. So if your width is differnet then we might have a problem, unless it's in increments of 1024 or 64, or 8, or something.

This is the idea, so if it has to make changes for resolution, we might have to change this to a function and run the function when the page loads.

Int he function, you would have to take the width of the user, and do something to it.
I don't know Javascript, but I needed this code, so if someone else wants to figure this out, go for it!