Menu
Hi !
I didn’t see a code similar to this one anywhere on the web so here i am (again) asking for a little help !
I want my tables to resize accordingly to the browser’s resizing but with a maximum !
For example, my page is best viewed under 1024*768.
If the user uses a 1024
But if the user uses 1600*1200, it looks like shit so i want to set my tables so they stop resizing once they are, say, 1024 pixels wide and then starts to center themselves (horizontally and vertically – without resizing ! (just as if the width of the table were set to pixels but were nested within another table set with a width and height of 100%).
If that same user decides to downsize his browser, the tables won’t resize until the script determines that the browser he is resizing is inferior to 1024
On the other hand, if the user try to upsize again, it will resize the tables until they are as larged as viewed under 1024*768 resolution. Then the tables will begin to be centered horizontally and vertically (as i was saying).
I think you guys can understand that i can’t use standard width & height tags. If i use it in pixels, the tables won’t resize and if i use %, they will resize indefinately and
won’t detect when to resize and when NOT to resize !!!
I’ve written a script for that for my website -it is my second and last attempt (up to this day) at writing javascript code, so don’t you laugh at me 😛
I nested my page’s content between this :
<script language=”JavaScript”>
if (document.all)
w=document.body.clientWidth;
else if (window.innerWidth)
w=window.innerWidth;
if (w >= 1024) {
tw = (1024/w)*100;
document.write(‘<TABLE align=”center” width=”‘+tw+’%” height=100% border=0 cellpadding=”0″ cellspacing=”0″ style=”border-collapse: collapse” bordercolor=”#111111″><TR><TD align=”center” valign=”middle”>’);
}
</script>
and this :
<script language=”JavaScript”>
document.write(‘</TD></TR></TABLE>’)
</script>
I also had to add this :
<script language=”JavaScript”>
function refresh() {
window.location.reload();
}
function refreshPage() {
setTimeout(“refresh()”,1000)
}
</script>
because if i remember right, NN reloads the page so it made the page content flickering while resizing, so i added a little timer so it flickers…less !!! I called the function with the body onresize=”refreshPage();”
I have put a demo up at :
[URL=http://pages.infinit.net/rouxjean/test2.htm]http://pages.infinit.net/rouxjean/test2.htm
Now, put your screen resolution to 1280 or 1600. Resize the browser under IE and you’ll see what i mean. There is another bug as you’ll see that once the browser is more than 1024 the table centers itself vertically ! (i want it to be centered vertically all the time !)
I’m sure you’ll find a better way to go around this !!! I hate the fact that Netscape reload the damn page everytime !
Many thanks !