Dynamically Resizing web page [Archive]

sposton

03-07-2003, 08:24 AM

I am looking for a javascript to dynamically resize web pages to fit different screen resolutions. I'm :confused:

I must adjust everything look at the site http://www.techsgi.com When I change there resolution to 800x 600 it pushes the text over when 1024 x 768 changes and 1280 x 1024 moves text again:confused:

Nicodemas

03-07-2003, 08:32 AM

sposton

03-07-2003, 08:42 AM

Thanks! But

I must adjust everything look at the site http://www.techsgi.com When I change there resolution to 800x 600 it pushes the text over when 1024 x 768 changes and 1280 x 1024 moves text again
:confused:

Nicodemas

03-07-2003, 09:00 AM

Screen resolution is one of those uncontrollable things. It all depends on the user.

Hase

03-07-2003, 10:36 AM

Well i don't know if the solution i tell you is the one you wants to use, but you can try the following:

Use your mainindex in a div and name it content for example, style it in a css file.

Example:
div.content {
POSITION: absolute;
LEFT: 65px;
TOP: 150px;
WIDTH: 685px;
HEIGHT: 375px;
Z-INDEX: 100;
SCROLLBAR-FACE-COLOR: #CC0000;
SCROLLBAR-HIGHLIGHT-COLOR: #CC0000;
SCROLLBAR-SHADOW-COLOR: #CCCCCC;
SCROLLBAR-3DLIGHT-COLOR: #CCCCCC;
SCROLLBAR-ARROW-COLOR: #CCCCCC;
SCROLLBAR-TRACK-COLOR: #CC0000;
}

Type for width and Height the best looking size for your content.

Now put in your Javascript code the following lines, to make it possible to have the same design for each size of browserwindow:

<script language="JavaScript">
// check window size
function howBig() {
if (navigator.userAgent.indexOf("MSIE") > 0) {
var hSize = document.body.clientHeight;
return hSize;
}
else {
var hSize = window.innerHeight;
return hSize;
}
return;
}

// init CONTENT-div and preload images

function init() {
if (ie4 || ie5) {
document.body.style.overflow = "hidden";
document.all.CONTENT.style.height = howBig() - 160;
document.all.CONTENT.style.overflow = "auto";
}
else
if (ie6 || ns6) {
document.body.style.overflow = "hidden";
document.getElementById("CONTENT").style.height = howBig() - 160;
document.getElementById("CONTENT").style.overflow = "auto";
}
}
// reload if window is resized

function reloadPage() {
if (!ns4)
setTimeout("document.location.reload(false)",1000);
}
</script>

-160 is because of having the navigation bar on top and it is 150px height.

I hope this will help you a bit or make the things possible you want to get.

Hase