Image animation (percentages, pixels, complicated)

shlagish

06-07-2003, 09:42 PM

Hi, here's the relevant part of my script:

<html>
<head>
<style type="text/css">

</style>
<script type="text/javascript">

</script>
</head>
<body>

<img id="img" src="oct18th.jpg" width="27.777777777777777%" height="15%" alt="picture of band" border="0px" style="position: absolute; margin: 0px 0px 0px 0px; right: 127.777777777777777%; top: 3.472222222222222222222222222%;">

</body>

</html>

Well, problem is: It doesn't work.

The image goes to the right fine, it stops at the right place. Then, it starts going upwards (which is good), but it doesn't stop at 10px... It just keeps going forever...
Can you see the problem here?

Second question:
Here is the relevant part of the code:
------>index.html<---------
<html>
<center>
<iframe frameborder="0" width="22.13541666666666666%" height="100%" src="links.html" name="links" scrolling="no"></iframe>

<iframe frameborder="0" width="70.3125%" height="100%" src="main.html" name="main" scrolling="auto"></iframe>
</center>
</html>

----------->links.html<-------------
<html>
<head>
<base target="main" />
<style type="text/css">

</style>
</head>
<body>
<a href="Oct18th.html" title="OCTOBER 18th">
<img class="1" src="oct18th.jpg" border="0px" width="100%" height="15%" alt="picture of band" />
</a>

<a href="Nov15th.html" title="NOVEMBER 15th">
<img class="2" src="nov15th.jpg" border="0px" width="100%" height="15%" alt="picture of band" />
</a>

<a href="Jan17th.html" title="JANUARY 17th">
<img class="3" src="jan17th.jpg" border="0px" width="100%" height="15%" alt="picture of band" />
</a>

<a href="Feb21st.html" title="FEBRUARY 21st">
<img class="4" src="feb21st.jpg" border="0px" width="100%" height="15%" alt="picture of band" />
</a>

<a href="Mar20th.html" title="MARCH 20th">
<img class="5" src="mar20th.jpg" border="0px" width="100%" height="15%" alt="picture of band" />
</a>

</body>
</html>

--------->main.html<------------
nothing interesting

When I click on Octobre 18th 2003, it opens "Oct18th.html" in the frame named "main"

------------->Oct18th.html>-------------
<html>
<head>
<style type="text/css">

</style>
</head>
<body>

<img id="img" src="oct18th.jpg" width="27.777777777777%" height="15%" alt="picture of band" border="0px" style="position: absolute; margin: 0px 0px 0px 0px; left: 0px; top: 3.472222222222222222222222222%;">

</body>
</html>

The image (oct18th.jpg) is in both links.html AND Oct18th.html.
Both images have position: absolute. I set both their heights to the same value (top: 3.472222222222222222222222222%)
But, when I look at them, I see a difference in height?????

Can anyone explain this?

If you see any other problem in my codes, scripts, styles, whatever, don't hesitate to tell me.

Sorry my post was so long, I really appreciate the help :)

Mr J

06-08-2003, 10:57 AM

To answer your first question the reason it does not stop is probably because you have != (does not equal) when you should use <= (less than or equal to)

if(img.style.posTop <= 10 )

Mr J

06-08-2003, 11:01 AM

To try and answer your second question.

Although you have set their values the same does not mean they will be the same size.

This is because you have use %

Example:

50% of 100 = 50

50% of 50 = 25

Same value different result

shlagish

06-08-2003, 04:55 PM

1st question: I don't just want it to stop, I want it to go up until the top is at 10px and THEN stop...
Oh, maybe I see what your getting to, by putting <= it would't nesseceraly stop at exactly 10px, but it would be very close, is that what your getting at? I'll try this.
But why doesn't it arrive to 10? It goes up 1px at a time and it starts on a whole numer (math.floor(etc..)

2nd question: The values should be the same because it's the same "starting size". They are each in an i-frame that measures 100% of the original screen size...
15% of 100% of Screen size should equal 15% of 100% of Screen size

shouldn't it

Mr J

06-08-2003, 05:55 PM

Try giving the images a fixed size first just to see if they are both the same in different pages

shlagish

06-08-2003, 06:57 PM

nah, I figured it out, I don't remember what it was but it works now....

I changed != to >= and that worked, but then, when I made Nov15th.html (Which is the exact same page for now but the image starts out lower...) The image goes up and starts before reaching 10px.... I don't understand it, it' the exact same script...

(As long as img.style.posTop is greater or equal to 10px, take away 1 to img.style.posTop)

with Oct17th.html it stops at the right place, but in Nov15th.html, it stops lower... It doesn't go up enough..

A1ien51

06-08-2003, 07:53 PM

What I would do is just use the less than or equal to and put a step in it

if( position less then 10px ) set the style to 10px

shlagish

06-08-2003, 07:56 PM

I don't get it, do you mean:

function MovePic()
{
img.style.posRight = Math.floor(img.style.posRight)
img.style.posTop = Math.floor(img.style.posTop)

if(img.style.posRight >= 10 )
{
img.style.posRight -= 1
}

else if(img.style.posTop >= 10 )
{
img.style.posTop -= 1
}
else if(img.style.posTop <10)
{
img.style.posTop =10
}
else
{
clearTimeout(PicTimer)
}
}

A1ien51

06-08-2003, 08:15 PM

what i was saying was this

else if(img.style.posTop <=10)
{
img.style.posTop = 10;
clearTimeout(PicTimer);
}

So if it goes past ten it will stay at ten

A1ien51

Mr J

06-08-2003, 08:49 PM

This works

function MovePic(){

img.style.posRight = Math.floor(img.style.posRight)
img.style.posTop = Math.floor(img.style.posTop)

if(img.style.posRight >= 10 ){
img.style.posRight -= 1
}
else{
if(img.style.posTop >= 10 ){
img.style.posTop -= 1
}
}

PicTimer=setTimeout("MovePic()",50)

if(img.style.posTop <10){
img.style.posTop =10
clearTimeout(PicTimer)
}
}

MovePic()

shlagish

06-08-2003, 09:35 PM

Thanks

I will try and tell you the results :)

shlagish

06-08-2003, 09:52 PM

:cool:It works perfectly guys, thanks for you help :):)
I may be finished here! :thumbsup: