javascript css animation

[Arnold9000]

Hi, I'm trying to do a javascript/css animation.

The address is www.bowserlaw.com/indextest.asp

If you click on the see video button to the right underneath the guy's picture, you'll see a video suddenly appear (because I set it's display property from "none" to "display"). The video is in an iframe linking to another address.

What I want to do is to not make the video appear immediately, but I would rather have it slowly appear (within a second so) and slowly bump the content beneath it down as the iframe slowly gains height. Here's the relevant code:

<script language="javascript">
function donothing () {
}
function showmovie (){
document.getElementById('movie').style.display='block';
document.getElementById('movieframe').style.height='0px';
document.getElementById('movieframe').src='http://progressive.facesmedia.com/standardvideo/bin-release/StandardVideo.html#video_id=1057';
for (var count=1; count<251; count++){
var height=count+"";
document.getElementById('movie').style.height=height+'px';
document.getElementById('movieframe').style.height=height+'px';
setTimeout("donothing();",10);
}
}
function hidemovie (){
document.getElementById('movieframe').src='blank.html';
for (var count=250; count<0; count--){
var height=count+"";
document.getElementById('movie').style.height=height+'px';
document.getElementById('movieframe').style.height=height+'px';
setTimeout("donothing()",10);
}
document.getElementById('movieframe').style.display='none';
}
</script>

html to invoke the showmovie function

<a href="#" onclick="showmovie();"><img src="/images/greenclickwh.gif" border="0" alt="Tell a Lawyer about your DWI / Criminal Law Case or Personal Injury case"></a>

The html code for the movie and iframe, including a button to hide the movie and iframe

<div id="movie" style="display:none; padding-bottom:8px;">
<iframe id="movieframe" allowTransparency="true" frameborder="0" width="490"></iframe>
<a href="#" onclick="hidemovie();"<img src="/images/closebutton.gif" border="0" alt="Tell a Lawyer about your DWI / Criminal Law Case or Personal Injury case" style="position:relative; top:-240px; left:425px; z-index:5;"></a>
</div>


Obviously, I'm trying to increase the size of the iframe by one pixel, 250 different times in a loop, using the setTimeout function to delay the iterations of the loop and control the speed with which it increases the iframe size, and bumps the content underneath it down.

What happens instead, it that it delays for the total time of the loop and THEN immediately displays the iframe, rather than gradually displaying it. I know the loop is iterating properly because I put a print statement in there, and it prints out 250 times. There's something wrong with the way I am telling it what size to be in that loop.

The only error message I get in the error console is:

uncaught exception: permission denied to call method location.toSting

This seems to relate to me setting the location property to the appropriate url after the iframe's display property is set to display

I hope I described the problem clearly and comprehensively and I'm hoiping someone can help. Thanks in advance.

[kceleb9]

You may want to really consider using some of the great libraries to achieve this effect.

Unless you are just trying to learn the techniquies - something lik jQuery - or Prototype/Scriptaculous will have worked out alot of the cross browser issues with an animation such as this.

I have noticed particularly that iFrames do not respond in real time to property changes and refresh in Firefox - at least in version 2.x of Firefox - whereas they do in Internet Explorere 6,7. You sometimes have to toggle the visibility or display again in firefox to get it to re-load the URL. Just an example - likely others.

[pflunk]

you should make the animation occur in the function referenced in setTimeout and change the timeOut interval to be an ever increasing number...

<script language="javascript">
function changemoviewheight(newheight){
document.getElementById('movie').style.height=newheight+'px';
document.getElementById('movieframe').style.height=newheight+'px';
}

function showmovie (){
document.getElementById('movie').style.display='block';
document.getElementById('movieframe').style.height='0px';
document.getElementById('movieframe').src='http://progressive.facesmedia.com/standardvideo/bin-release/StandardVideo.html#video_id=1057';
for (var count=1; count<251; count++){
var height=count+"";
setTimeout("changemovieheight(" + count + )",10 * count);
}
}

function hidemovie (){
document.getElementById('movieframe').src='blank.html';
for (var count=250; count<0; count--){
var height=count+"";
setTimeout("changemovieheight(" + count + )",10 * (250 - count));
}
document.getElementById('movieframe').style.display='none';
}
</script>

I do agree with kceleb9.
In Jquery you would just call
$('movieframe').slideDown('slow')
$('movie').slideDown('slow')

That would be tons easier.

[Arnold9000]

You may want to really consider using some of the great libraries to achieve this effect.

Unless you are just trying to learn the techniquies - something lik jQuery - or Prototype/Scriptaculous will have worked out alot of the cross browser issues with an animation such as this.

I have noticed particularly that iFrames do not respond in real time to property changes and refresh in Firefox - at least in version 2.x of Firefox - whereas they do in Internet Explorere 6,7. You sometimes have to toggle the visibility or display again in firefox to get it to re-load the URL. Just an example - likely others.

I'd like to be able to do it myself because, theoretically, it should be easy. I think I'm really close but that the height property is not incrementing by one pixel with each iteration of the loop as I had hoped, and instead, it iterates the loop the full 250 times and THEN it appears full sized. When I put an alert message in there to print out the value of the height variable with each iteration of the loop, it tells me that the variable "height" has no properties, and I can't figure out why. I'm not handling a string correctly or something. As far as IE gos, it does the same exact thing, which I suppose is a GOOD thing. And, the url location property is actually working quite fine. When I added a close button to the movie, I noticed that the movie will hide as I intend, but you still hear the movie playing. Therefore, I also set the url of the hidden movie to a blank page upon click on the close button to get it to stop playing, and then when I click the see video button again, I change the url back again to the url of the movie. Surprisingly, it has no problem at all with this part.

[Arnold9000]

you should make the animation occur in the function referenced in setTimeout and change the timeOut interval to be an ever increasing number...

<script language="javascript">
function changemoviewheight(newheight){
document.getElementById('movie').style.height=newheight+'px';
document.getElementById('movieframe').style.height=newheight+'px';
}

function showmovie (){
document.getElementById('movie').style.display='block';
document.getElementById('movieframe').style.height='0px';
document.getElementById('movieframe').src='http://progressive.facesmedia.com/standardvideo/bin-release/StandardVideo.html#video_id=1057';
for (var count=1; count<251; count++){
var height=count+"";
setTimeout("changemovieheight(" + count + )",10 * count);
}
}

function hidemovie (){
document.getElementById('movieframe').src='blank.html';
for (var count=250; count<0; count--){
var height=count+"";
setTimeout("changemovieheight(" + count + )",10 * (250 - count));
}
document.getElementById('movieframe').style.display='none';
}
</script>

I do agree with kceleb9.
In Jquery you would just call
$('movieframe').slideDown('slow')
$('movie').slideDown('slow')

That would be tons easier.

I was looking for a way to increment the height of the frame by 1 pixel in each of 250 iterations with a setTimeout delay of 1/500 of a second therefore equaling a half second animation with 250 equal increments. Changing the setTimeout would increase or change the time between executions, so maybe I don't understand what you mean. I don't know why I would increase my setTimeout and therefore increase the wait for the next iteration of the loop. According to my understanding, I need all iterations to be equally timed.

I'll research Jquery because it looks too easy to resist, but I thought doing it myself should be easy as well. All I'm doing is changing the property of an element in a time incremented fashion. I still think I have a problem with the value of my height variable in my loop, but I can't figure out what. Thanks for the info !!!

[pflunk]

Let me see if I can explain...
With setTimeout you are scheduling an even to happen but delayed by a certain number of milliseconds from the time you schedule it (from now). Your original JS was scheduling all this to happen the same number of milliseconds in the future.
It was basically saying:
In 10ms from now increment by 1px
In 10ms from now increment by 1px
In 10ms from now increment by 1px etc.

The problem is that all these items come about at almost exact same time because they are all scheduled in a loop that occurs with no waiting in between when the items are scheduled.

Instead you would want to do this...
In 10ms from now increment by 1px
In 20ms from now increment by 1px
In 30ms from now increment by 1px etc.


BTW.
The jQuery call I gave was a bit wrong and could be shortened.
Here is the corrected and abbreviated version...
$('#movieframe','#movie').slideDown('slow')

[Arnold9000]

Well then I completely misunderstand the functioning of the setTimeout function. Thanks. I'll try it.

[Arnold9000]

Just a further response for my clarification

Let me see if I can explain...
With setTimeout you are scheduling an even to happen but delayed by a certain number of milliseconds from the time you schedule it (from now). Your original JS was scheduling all this to happen the same number of milliseconds in the future.
It was basically saying:
In 10ms from now increment by 1px
In 10ms from now increment by 1px
In 10ms from now increment by 1px etc.

I thought it was saying that in the same number of milliseconds in the future, stop the delay of the setTimeout and iterate the loop again



The problem is that all these items come about at almost exact same time because they are all scheduled in a loop that occurs with no waiting in between when the items are scheduled.

The waiting time was supposed to be set by the second argument of the setTimeout function?



Instead you would want to do this...
In 10ms from now increment by 1px
In 20ms from now increment by 1px
In 30ms from now increment by 1px etc.

I'll try it



BTW.
The jQuery call I gave was a bit wrong and could be shortened.
Here is the corrected and abbreviated version...
$('#movieframe','#movie').slideDown('slow')

Oh, that's okay, I need to download the library, read about it and jump through a few hoops anyway before i can do anything with it. I would have seen this typo anyway, so no problem. I got the jist of calling the OO method of jquery.