by overlapping 4px I never get any white space after 10 min of looping. The IE hack is 2 fold. I need a wrapper div, and I also have to use position:absolute;. In FF you can use position: relative; and no wrapper, much cleaner. This is my first Jquery Script, so if there is any advice/tips for improvement, I'm all ears. I should probably make it all JS so I can auto detect the image size, ect...
On Jan 11, 6:53 am, donb <falconwatc...@comcast.net> wrote: > I simply saved the html to my hard drive and opened it. > > What I don't get is the 2044. 2x1024 = 2048. What's significant > about the number used? And where is the 'ugly IE hack?' > > On Jan 11, 9:03 am, Mike Alsup <mal...@gmail.com> wrote: > > > > First made one using canvas, but ExplorerCanvas didn't like the > > > it.https://developer.mozilla.org/en/Canvas_tutorial/Basic_animationshttp... > > > > Source > > > Imagehttp://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_Nati... > > > > So next I did it using jQuery, here is my result. Tested in FF3, > > > IE6/7. Would have been easy to do except for the ugly IE css hacks. > > > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" > > > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> > > > <html xmlns="http://www.w3.org/1999/xhtml";> > > > > <html> > > > <head> > > > <script src="jquery-1.2.6.js"></script> > > > > <script> > > > $(document).ready(function(){ > > > var speed = 30000; > > > $("#left").click(function () { > > > runA(); > > > runB(); > > > }); > > > > function runA() { > > > $("#blockA").animate({"left": "-=1024px"}, speed, "linear"); > > > $("#blockA").animate({"left": "+=2044px"}, 1, "linear"); > > > $("#blockA").animate({"left": "-=1024px"}, speed, "linear",runA); > > > } > > > > function runB() { > > > $("#blockB").animate({"left": "-=1024px"}, speed, "linear"); > > > $("#blockB").animate({"left": "-=1024px"}, speed, "linear"); > > > $("#blockB").animate({"left": "+=2044px"}, 1, "linear",runB); > > > } > > > > }); > > > </script> > > > <style> > > > img { > > > padding: 0; > > > margin: 0; > > > } > > > div#t { > > > overflow:hidden; > > > width:800px; > > > height:198px; > > > word-wrap: break-word; > > > } > > > > #blockA, #blockB { > > > position:absolute; > > > } > > > #blockB { > > > left:1023px; > > > } > > > #wrapper { > > > height: 100%; > > > width: 800px; > > > overflow: hidden; > > > border: 3px solid; /* this is just for debugging, to see if the > > > browser actually does something sane */ > > > position: relative;} > > > > </style> > > > </head> > > > > <body> > > > <button id="left">«</button> > > > > <div id="wrapper"> > > > <div id="t"> > > > <img id="blockA" src="Capitan_Meadows,_Yosemite_National_Park.jpg" /> > > > <img id="blockB" src="Capitan_Meadows,_Yosemite_National_Park.jpg" /> > > > </div> > > > </div> > > > > <br /> > > > <br /> > > > <img src="Capitan_Meadows,_Yosemite_National_Park.jpg" /> > > > > </body> > > > </html> > > > Can you post a live link to this? How are we supposed to see it?
