Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Image animation (percentages, pixels, complicated)

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

    Code:
    <html>
    <head>
    <style type="text/css">
    <!--
    
    body { margin: 0px 0px 0px 0px; padding: 0px; }
    p { margin-left: 10px; }
    -->
    </style>
    <script type="text/javascript">
    <!--
    
    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
     {
     clearTimeout(PicTimer)
     }
    }
    
    
    PicTimer=setInterval("MovePic();" , 1)
    
    -->
    </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:
    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">
    <!--
    
    body { margin: 0px 0px 0px 0px; padding: 0px; } 
    img { z-index: -1; border: 0px; position: absolute; left: 0px; margin: 0px 0px 0px 0px; }
    img.1 { position: absolute; top: 3.472222222222222222222222222%; }
    img.2 { position: absolute; top: 20.78703703703703703703703703%; }
    img.3 { position: absolute; top: 38.10185185185185185185185185%; }
    img.4 { position: absolute; top: 55.41666666666666666666666666%; }
    img.5 { position: absolute; top: 72.73148148148148148148148148%; }
    
    -->
    </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"

    Code:
    ------------->Oct18th.html>-------------
    <html>
    <head>
    <style type="text/css">
    <!--
    
    body { margin: 0px 0px 0px 0px; padding: 0px; }
    p { margin-left: 10px; }
    
    -->
    </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
    Last edited by shlagish; 06-08-2003 at 05:31 AM.
    Shawn

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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 )

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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

  • #4
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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
    Shawn

  • #5
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Try giving the images a fixed size first just to see if they are both the same in different pages

  • #6
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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..
    Shawn

  • #7
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    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

  • #8
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I don't get it, do you mean:

    Code:
    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)
     }
    }
    Shawn

  • #9
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    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

  • #10
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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()

  • #11
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks

    I will try and tell you the results
    Shawn

  • #12
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    It works perfectly guys, thanks for you help
    I may be finished here!
    Shawn


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •