Animating Window w/setInterval() in NN4

[jamescover]

Does anyone know why self.resizeBy() doesn't work in NN4 in conjuction with setInterval(). In contrast, self.moveBy() works fine.


<script>
<!--
function moveIt() {
setInterval('self.resizeBy(5,5)',10);
setInterval('self.moveBy(4,3)',10);
}
moveIt();
//-->
</script>


Can anyone offer a solution?


Also, what would be required to animated a window from its center point, instead of from 0,0?


James
He is risen!!!

[joh6nn]

what are you looking to do?

in order to animate a window from it's center point, you'd have to find its width and height, and then add that to it's coordinates, and make your calculations based on that.

[jamescover]

Hi Joh6nn:


Thanks for the reply.

I want to be able to simply animate the resizing of a window. So, for example, if the window is 400x400, and I want to enlarge it to 550x600, I can do so over time, i.e., animate the resizing.

I have seen several page long scripts that do this, but I'd like something a little less cluttered. Using setInterval seems to be the ideal way to do this, except it won't work in NN4 for some odd reason. setInterval() works by itself, and resizeBy() works by itself, but they don't work together.

Odd thing is, moveBy() and setInterval(), as scripted in my first post, works just fine. What am I missing???





James
He is risen!!!


p.s.I think I got the center point idea. I don't know about xbrowser, but I'm sure I can code that. Any idea on using setInterval().

[joh6nn]

have you tried setTimeout instead?

[jamescover]

Hi John66:


<script>
<!--
function moveIt() {
setInterval('self.resizeBy(5,5)',10);
self.moveTo(0,0);
}
moveIt();
//-->
</script>


Hey, thanks for hanging in there. Yea, I had tried setTimeout() too, althought that wouldn't give me the effect I was after without a for loop or something.

Anyway, I finally got it sorted. You can put this one in your Javascript library of esoteric knowledge. I noticed that the "maximize" button was greyed out in NN, so I added "resizable" to the popups attributes, and it worked....woohoo!!!


Thanks, again, for your help.


James
He is risen!!!

[jamescover]

Hi:

I'm back, and I need HELP!!!

I went through ever single property available in NN4, but couldn't fi a fixed property to use for resizing my window absolutely.


This is the best I could come up with:

<script>
<!--
function moveIt() {
target=setInterval('self.resizeBy(10,10)',10);
setTimeout('clearInterval(target)',2000);
}
moveIt();
//-->
</script>

However, starting with a 100px X 100px window, it results in a 400px X 400px window in IE, and a 465px X 465px window in NN4. Not good. But I didn't expect much different using a timebased formula.

Anyway, apparently, the only height/width properties belong to the image object in NN4.

Does anyone know a workaround for this? I thought maybe creating "width" and "targetWidth" variables, and putting them in a for loop, but I'm stumped on how to implement this.


James
He is risen!!!

[joh6nn]

you're looking for variables for the width of the window? in NS4, innerWidth & Height for the size of the client space, and outerWidth & Height do the actual window. it's more complicated in Explorer. if you're interested in that, i'll dig it up for you.

[jamescover]

You know, that's exactly what I thought they were, and what I looked for, but I still can't find these at DevEdge:

Look for yourself under "I":

http://developer.netscape.com/find/?cp=dev01mfin


Anyway, I appreciate the help. I'll see what I can come up with.


Thanks,

James
He is risen!!!

[jamescover]

Arghhh!

Okay, I'm still working on IE5.

Why does this work:

<script>
<!--
function moveIt() {
target=setInterval('self.resizeBy(10,10)',10);
setTimeout('clearInterval(target)',3000);
}
moveIt();
//-->
</script>


But this doesn't:


<script>
<!--
function moveIt() {
target=setInterval('self.resizeBy(10,10)',10);
if (document.all) {
if (document.body.clientWidth >=500 || document.body.clientWidth >=500) {
clearInterval(target);
}
}
}
moveIt();
//-->
</script>


Even though this will alert the current [updated] clientWidth:




<script>
<!--
function moveIt() {
target=setInterval('self.resizeBy(10,10)',10);
setTimeout('alert(document.body.clientWidth)',500);
setTimeout('alert(document.body.clientWidth)',3000);
}
moveIt();
//-->
</script>


Any ideas??? :confused:


James
He is risen!!!

[joh6nn]

well, one thing i notice right away, that's just odd, and completely unrelated, is that you test for Something or TheSameSomehing. look:

<script>
<!--
function moveIt() {
target=setInterval('self.resizeBy(10,10)',10);
if (document.all) {
if (document.body.clientWidth >=500 || document.body.clientWidth >=500) {
clearInterval(target);
}
}
}
moveIt();
//-->
</script>

also, i suggest that you change it from if (document.all) to if (document.body.clientWidth). you don't really care if document.all exists, you care about doc.body.clientWidth.

as far as why it doesn't work, what does it do that it shouldn't be, or alternatively, what doesn't it do that it should be doing? do you have a page that we can look at?

[jamescover]

<script>
<!--
function moveIt() {
target=setInterval('self.resizeBy(10,10)',10);
if (document.body.clientWidth >=500 || document.body.clientWidth >=500) {
clearInterval(target);
}
}
moveIt();
//-->
</script>

Okay, two dumb mistakes in the same day, I'm on a roll. I don't code much Javascript, can you tell? :confused: I ammended it above. I don't even need to check for it at this point, I know it exists.

What I am doing is launching a popup page, say 100x100. Then, I want to resize it to, say, 500x500.

The script resizes the window just fine, it just won't stop at any given dimension. It just keeps going. The only way that I have found to stop it so far is to use clearInterval() in conjunction with setTimeout(). But, obvioulsy, that doesn't give a very scientific result. The final window size in IE is quite a bit different than in NN4.


Here is an example of what I want to do:

http://www.ekigroup.com/javascript/minWin.html

This works great in IE5 and NN4 as written, but it uses time instead of absolute dimensions to control the size of the window, so I need something like clientWidth and innerWidth, etc. to be able to clear the interval, i.e., stop the animation when the window reaches a predefined size.

For some reason, I can get these values to alert() as they increase dymanically, so I know that they are being tracked, but I can't get the conditional to execute once the desired size has been reached.

Thanks for your help. Any solutions would be great.





James
He is risen!!!

[joh6nn]

try this:

<script>
<!--
function moveIt() {
target=setInterval('self.resizeBy(10,10)',10);
if (document.body.clientWidth && ( document.body.clientWidth >=500) ) {
clearInterval(target);
}
else if (window.innerWidth && ( window.innerWidth >= 500) ) {
clearInterval(target);
}
}
moveIt();
//-->
</script>

[realisis]

Argh, joh6nn, your function is being called only once, thus there's no way to activate the clearInterval() statement...

This might be better:

<script>
<!--
function moveIt()
{
self.resizeBy(10,10)

winXX = (document.body && document.body.clientWidth)?document.body.clientWidth :self.innerWidth

if (winXX < 500) setTimeout("moveIt()",100);
}

moveIt() //call func 1st time
//-->
</script>

[joh6nn]

serves me right for only looking at this late at night. great observation, realisis. couple of things to fidget with in your code, though.


<script>
<!--
function moveIt()
{
self.resizeBy(10,10)

winXX = document.body.clientWidth || self.innerWidth;

if (winXX > 500) setTimeout("moveIt()",100);
}

moveIt() //call func 1st time
//-->
</script>

[realisis]

winXX = document.body.clientWidth || self.innerWidth;

er, try that in NS4 and you'll get an error....

Since NS4 doesn't register document.body, sniffing for any sub-prop of doc.body completely hangs the page

My original formulation prevents that. Or you could use:

winXX = (typeof document.body.clientWidth != "undefined")?document.body.clientWidth :self.innerWidth

...

You said "a couple of things", did I miss any others?

[realisis]

PS:

if (winXX > 500) setTimeout("moveIt()",100);


That's backwards. You're reversing the needed condition. The statement above tells the browser to: "if window width is already bigger than 500px, call function again and expand."

joh6nn, is it still late at night where you are??

;^]

[joh6nn]

no, it isn't, but i'm going to pretend that it is in order to save face. ::grin::

wanna see a really really really bad hack?

this won't work:

winXX = document.body.clientWidth || self.innerWidth;

if you switch it around, it will:

winXX = self.innerWidth || document.body.clientWidth;

[jamescover]

Hi guys:


I appreciate the help, but I had already discovered that the function was only being called once when I set a hyperlink in the body and called it again AFTER the conditional was "true." Anyway, I came up with the following, which solves that problem, I think, but it still doesn't work as expected:


<script>
<!--
function moveIt() {
target=self.resizeBy(5,5);
if (document.body.clientWidth && ( document.body.clientWidth ==500) ) {
alert(document.body.clientWidth);
}else if (window.innerWidth && ( window.innerWidth ==500) ) {
alert(window.innnerWidth);
}
}
setInterval('moveIt()',10);
//-->
</script>



In IE, the above will alert at x=500, but it won't clear the Interval no matter what. I've tried every conceivable combination I can think of, including using another function to kill this one. Even this won't work:

target=self.resizeBy(5,5);
if (document.body.clientWidth && ( document.body.clientWidth ==500) ) {
self.resizeBy(0,0);
}


or this:

x=5;
y=5;
target=self.resizeBy(x,y);
if (document.body.clientWidth && ( document.body.clientWidth ==500) ) {
x=0;
y=0;
}


Nothing I've tried has worked, and I spent all night trying. So far, using the above, I can open.window() in IE, or alert(), but not clearInterval().


However, the odd thing is, as I said previously, that this will clearInterval():


<script>
<!--
function moveIt() {
target=setInterval('self.resizeBy(10,10)',10);
setTimeout('clearInterval(target)',2000);
}
moveIt();
//-->



So, I thought that something like this would work, but it doesn't:

target=setInterval('self.resizeBy(5,5)',10);
if (document.body.clientWidth && ( document.body.clientWidth ==500) ) {
setTimeout('clearInterval(target)',10);
}


Can anybody make any sense of this mess???

Thanks for all of your help.


James
He is risen!!!

[Owl]

Hi James,<script>
count=0
function moveIt() {
resizeBy(10,10)
if(count++>=50) clearTimeout(target)
else target=setTimeout('moveIt()',10);
}
</script>And if you absolutely insist on real time measurements then:<script>
finalW = 500; finalH=500
function moveIt() {
resizeBy(10,10)
currW = document.all ? document.body.clientWidth : innerWidth
currH = document.all ? document.body.clientHeight : innerHeight
if(currW>=finalW || currH>=finalH) clearTimeout(target)
else target=setTimeout('moveIt()',10);
}
</script>( •) (• )
>>V

[jamescover]

Hi Owl:

Sorry, that doesn't work...NOT...hey, that works perfectly in IE and NN. Even the window size is the same...you're a champ.


Okay, I've spent 2 days on this...obviously I'm just a hack. Anyway, one more thing, if you read the previous posts, how can I resize the page from the center. I thought that it would be easy, but I'm drawing a blank.

I know that when centering windows you use ( screen.width-width)/2. But it appears that in this case I'll have to take (finalW-CurrW)/2 and, and, and...what...is that right?

Any insight. Thanks a heap to you and everyone so far. All of the other scripts I've seen that do this are a full page. I just thought that it should be much shorter/simpler, and it appears to be true.


Thanks, again,



James
He is risen!!!

[Owl]

<script>
moveTo((screen.width-100)/2,(screen.height-100)/2)
count=0
function moveIt() {
resizeBy(10,10)
moveBy(-5,-5)
if(count++>=50) clearTimeout(target)
else target=setTimeout('moveIt()',10);
}
</script>( •) (• )
>>V

[jamescover]

OOWWWLLLL!!!

Hey, that sorta works. I mean it works, but it's still kinda time- based. What I want is more like this:



<script>
<!--
finalW=400;
finalH=400;
function moveIt() {
currW = document.all ? document.body.clientWidth : innerWidth;
currH = document.all ? document.body.clientHeight : innerHeight;
resizeBy(10,10);
moveBy(-5,-5);
target=setTimeout('moveIt()',10);
if(currW>=400) {
clearTimeout(target);
}else {setTimeout(target);
}
if(currW>=finalW || currH>=finalH) {
clearTimeout(target);
}else {
setTimeout(target);
}
}
//-->
</script>


The above works great, except for the fact that the inner window width/height is always 12px wider than the finalW/finalH. Could you maybe put this into a more eloquent form. It does work, but, well, my coding skills are, umm, bad, and it looks pretty sloppy, even to me. [btw, the top, left will be set by the parent window, so I didn't need the moveTo().]

Moreover, I was wondering if it was possible to add deceleration to this script using something similar to what I'd use in Flash:

Formula:

distance = finalX - _x;
_x += distance / 2;

The Action Script would look like this:

_x+=((targetX-_x)/2);

So, is it possible to implement something like this in Javascript to smoothen out the window animation???

BTW, if you're sick of this script already, just let me know, it's not a problem. I understand. I really do appreciate the help you've given so far though. Thanks!


Here's the script in action:


http://www.ekigroup.com/javascript/minWin.html


James
He is risen!!!

[joh6nn]

try this
<script>
moveTo((screen.width-100)/2,(screen.height-100)/2)
count=0
function moveIt() {
resizeBy(10,10)
moveBy(-5,-5)
if ((++count) < 50) { setTimeout('moveIt()',10); }
}
</script>

[jamescover]

Wow, this thread is getting long.

<script>
moveTo((screen.width-100)/2,(screen.height-100)/2)
count=0
function moveIt() {
resizeBy(10,10)
moveBy(-5,-5)
if ((++count) < 50) { setTimeout('moveIt()',10); }
}
</script>



Well, I alread tried it, but I thought that I could do better. However, for conciseness and compatability, I guess I can't.

Problem is, I wanted to start with a predefined [scripted] window size, instead of having to recalculate the amount of resizing by the number of iterations through the counter, etc., then setting the moveBy() accordingly.


I'm heading more in this direction:


<script>
count=0
function moveIt() {
resizeBy(30,30)
if (document.body.clientWidth) {
moveTo((screen.width-document.body.clientWidth)/2,(screen.height-document.body.clientHeight)/2)
}
if (window.innerWidth) {
moveTo((screen.width-window.innerWidth)/2,(screen.height-window.innerHeight)/2)
}
if(count++>=10) clearTimeout(target)
else target=setTimeout('moveIt()',10);
}
</script>



Notice, I removed moveBy() and replaced it with moveTo(), but looping through it, unlike the script you posted which only positions the window when it is loaded, then relies on moveBy() to center it through the animation.

This last script works great in IE, I'm completely happy with it, but it doesn't work in NN4. Not sure why.


Thanks again for you help.


James
He is risen!!!

[jamescover]

About 1 minute after I made the last post it dawned on me:


<script>
count=0
function moveIt() {
resizeBy(30,30)
center = document.all ? document.body.clientWidth : innerWidth
moveTo((screen.width-center)/2,(screen.height-center)/2)
if(count++>=10) clearTimeout(target)
else target=setTimeout('moveIt()',10);
}
</script>

Works in both IE and NN4. Notice no moveBy() needed, it calculates the center for you. I might go have a muffin or something :D

Thanks for everybody's help. If you feel the urge and come up with any improvements, let me know. I'd still like to add an easing effect.


You guys are great, thanks :thumbsup:




James
He is risen!!!