Window Animation

programming web dev
1

I have created a function to animate window opening (popup), however, it is not functioning like I hoped it would. Basically I want the window to slide into place, all corners moving in at the same time (more like scaling to a center point), but presently it wraps around (which isn’t terrible, just not the desired result). I know that Javascript processes windows like left,top,right,bottom; but there has to be a way to do this! Anyone have any idea how I could change my code to accomplish this? Thanks in advance!

My Code [I made it so you can just copy paste into Notepad/DW/Whatever]

<html>
<head>
<title>Window Animation</title>
<script type="text/javascript">

function Slider(endWidth, endHeight)
{
    //Gets the width of the starting window size
    var currentWidth = clientWidth();
    var currentHeight = clientHeight();
    //Sets the ending width/height values
    var wide = endWidth;
    var high = endHeight;
    //Sets the increment level of the for loop
    var speed = 6;
    var friction = .7;
    
    var popup = window.open("http://www.kirupa.com/forum/", "Test", "menubar=false,status=false");
   for(i = currentWidth; i > wide; i-=speed)
    {
        //Continously reset the currentWidth/currentHeight to slide to center
        currentWidth = clientWidth();
        currentHeight = clientHeight();
        centerTop = ((currentHeight / 2) - high);
        centerTop *= -1;
        centerLeft = (currentWidth / 2) - (wide / 2);
        //Resize and Move the window 
        popup.resizeTo(i*friction,i*friction);
        popup.moveTo(centerLeft,centerTop);
    }
}

function clientWidth()
{
    return filterResults
    (
        window.innerWidth ? window.innerWidth : 0,
        document.documentElement ? document.documentElement.clientWidth : 0,
        document.body ? document.body.clientWidth : 0
    );
}

function clientHeight()
{
    return filterResults
    (
        window.innerHeight ? window.innerHeight : 0,
        document.documentElement ? document.documentElement.clientHeight : 0,
        document.body ? document.body.clientHeight : 0
    );
}

function filterResults(n_win, n_docel, n_body)
{
    var n_result = n_win ? n_win : 0;
    if (n_docel && (!n_result || (n_result > n_docel)))
        n_result = n_docel;
    return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
}

</script>
</head>
<body>
<input type="button" onClick="javascript:Slider(300,300);" value="Animate Popup" />
</body>

Thanks again, hey, just a thought, anyone know how I could add some easing to this?

EDIT: BTW, it only works in FF presently