PDA

Click to See Complete Forum and Search --> : resizing windows dinamically

kindra
04-01-2003, 02:37 AM
I have a window 640X200, and I would like it to grow to 768X530, I have seen before somewhere, that it is posible to resize it in pixels to create the effect that is growing in front of the user. How to?
Any hints?
gil davis
04-01-2003, 06:08 AM
<head>
<script>
var incr = 10;
var dly = 50;
var we = 768;
var he = 530;
var timer = null;

function init() {
wi = (document.all) ? document.body.offsetWidth : window.innerWidth;
hi = (document.all) ? document.body.offsetHeight + 120 : window.innerHeight;
timer = setTimeout("grow()", dly);
}

function grow() {
wi += 10; if (wi >= we) wi = we;
hi += 10; if (hi >= he) hi = he;
window.resizeTo(wi, hi);
if ((wi == we) && (hi == he))
{clearTimeout(timer);}
else
{timer = setTimeout("grow()", dly);}
}
</script>
</head>
<body onload="init()">
</body>
IE does not give you access to the width and height of the window, so I used the height and width of the document.body. It looks a little funny, and you may have to tweak the numbers for IE, but it will function.
kindra
04-01-2003, 06:49 AM
It really works fine, but, the window I'm trying to resize was opened centered, by this way it grows but finally is at the right bottom of the screen. Anyway to keep it centered and growing?
gil davis
04-01-2003, 07:17 AM
Replace the grow() function with this one:function grow() {
x = -(incr / 2);
y = -(incr / 2);
wi += incr;
if (wi >= we)
{wi = we;
x = 0;}
hi += incr;
if (hi >= he)
{hi = he;
y = 0;}
window.resizeTo(wi, hi);
window.moveBy(x, y);
if ((wi == we) && (hi == he))
{clearTimeout(timer);}
else
{timer = setTimeout("grow()", dly);}
}
kindra
04-01-2003, 12:26 PM
OK, been trying and it works, but not enough smooth in all processors, maybe something faster like the simple resizeTo order, but, Is it possible to add some instruction to this line to make the window open centered on screen?

<a href="javascript:window.resizeTo(200,200)">SMALL</a>
gil davis
04-01-2003, 12:55 PM
As to smoothness, you can decrease the "incr" and the "dly" to compensate. "incr" is how much the page jumps each iteration, and "dly" is the time (in milliseconds) between iterations.

As to your other question, the resizeTo(200,200) in NS makes a viewport (does not include "chrome") that is 200 x 200, and in IE makes a window (includes "chrome") that is 200 X 200. If you don't care, then:<a href="#" onclick="window.resizeTo(200,200);window.moveTo((screen.width-200)/2,(screen.height-200)/2);return false">SMALL</a>