html javascript infinite scrolling in 4 directions - a chance to prove yourself [closed]

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the开发者_StackOverflow中文版 help center. Closed 11 years ago.

I have a challenge - I have created this little concept here . The it contains 9 divs initially positioned in a 3 by 3 square. Although in my example the initial view is that all 9 boxes are "visible" ie hidden only by the higher level scroller, the idea is that no matter which direction I scroll in I will never reach the end. Why because as I scroll I will continuously re-position an out-of-sight div to be the next visible.

I'll give you an example. If the initial view shows box 1 and a bit of box 2 as I scroll horizontally, I will start to see box 3, but as I get to the end of box 3, box 1 re-appears next to box three, as if it has wrapped around. As I continue scrolling box 2 now appears next to box 1 again and eventually box 3 again. If I scroll backward (still horizontally) the same will start to happen but on the other side.

All of this should happen without loading any more objects into memory, ie only the original objects can be used. They are just being re-positioned that's all.

Lastly, what is true for the horizontal scrolling should also be true for vertical scrolling.

Now get your thinking hats on!

---

See Hack #26 form the book PHP Hacks, "Creating the Google Maps Scrolling Effect"

If you download the example code from the book's web site, I think the code from that particular "hack" is in the imgscroll folder.