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 4 of 4
  1. #1
    New Coder
    Join Date
    Feb 2010
    Location
    Orlando, FL
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Animated moving background trouble & Scrollto jitters in Chrome/IE

    Hey guys, been not that long

    Almost finished with redesign, got a couple more things and then these snags.

    http://www.cloudtopstudios.com/test

    First and foremost problem -

    My airplane window. All I'm lookin for it to do is go from left to right and loop, that's it. I got the idea from this tutorial: http://www.gayadesign.com/diy/text-w...s-with-jquery/

    also don't knock my sky background its basically just a placeholder right now till I get this animation working

    I cannot use the backgroundposition plugin as it throws my gallery out of whack. I explained this to a programmer friend of mine and asked if he could come up with it. Couldn't be but a few lines of code is what I'm thinking. He came back with this

    Code:
    <html>
        <head>
            <title>John's Window</title>
            <style type="text/css">
                #theWindow
                {
                	height: 553px;
                	width: 436px;
                	background-image: url("planesky.jpg");
                	background-position: 0 0;
                }
            </style>
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" />
            <script type="text/javascript">
                $(document).ready( function() {
                    animateWindow();
                });
                
                function animateWindow()
                {
                    $("#theWindow")
                    .css("background-position","800 -80")
                    .animate(
                        {"background-position":"0 -80"}
                        , 70000
                        , 'linear'
                        , animateWindow);
                }
            </script>
        </head>
        <body>
        	<div id="theWindow">
        	    <img src="planewindow.png" alt="View through a window" />
        	</div>
        </body>
    </html>
    it worked in Chrome (the browser he uses sure enough) but not FF and I don't even know about IE. However, after poppin it into my site I couldnt even get it to work in chrome, and all I did was rename "#theWindow" to "#sky" and use another div with bg instead of an img (personal preference).

    Anyway after sending me this he promptly went to bed.

    My second problem is less drastic but a nuisance I need resolved as it takes away from the pleasantry of reading on the move in Chrome and IE. My scrollto performance in these browsers is killing me and the same on any computer. I dont get it and cant find anything on it. Is it just too much jquery?
    I need to keep my long transitions.

    thanks for reading and triple thanks up front if you can help.

  • #2
    New Coder
    Join Date
    Feb 2010
    Location
    Orlando, FL
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    update

    works in IE.

    ????

  • #3
    New Coder
    Join Date
    Feb 2010
    Location
    Orlando, FL
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    guess Ill just do it in flash then....

  • #4
    New Coder
    Join Date
    Feb 2010
    Location
    Orlando, FL
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    so I have no use for it anymore as I went flash and added to the original idea, but, someone released a tutorial today that's pretty much a copy of what I was doing. I figured I would come back here and post a link for anyone who might stumble across this thread in the future looking for a similar solution.

    http://www.queness.com/post/2607/cre...ct-with-jquery


  •  

    Posting Permissions

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