I have an array of divs whose dimension is greater than its container (parent). I have an overflow set to hide on the container and call JQuery Overscroll on the map to give it the iPhone feel http://www.azoffdesign.com/overscroll .
I had a problem with how to implement the tracking arrow when the user scrolls the array and the central div (home) goes into overflow out of sight. When the user scrolls the “house” out of sight to the overflow area, I would like the arrow to appear on the inner edge of the container and follow it around the edge, wherever it leaves the field of view. It makes sense for me to use the image for the arrow, then rotate it so that it points in the right direction when the “house” moves around.
Here is my fiddle with basic work> http://jsfiddle.net/virtuapete/QVQ5r/1/
So there are 3 elements to make it work correctly ... the image following the “house” when it moves overflows, the image rotates relative to where the house is (therefore, the arrow always points to the “house”, and then just hiding the arrow when the house becomes visible inside the container.
I’m sure I saw this effect before and started to deal with the problem, I started looking for scrolling methods, because it would be a close one-dimensional example of this concept. It looks almost like a multidirectional scroll. I reached the point where I was completely embarrassed, and I am not strong enough in my skills to combine the code fragments of the code that I found in the desired result!
I found jsfiddle ( http://jsfiddle.net/hj57k ) of what could be according to what I want, without the div following the object (in this example, the cursor) when it leaves the container bounds. Any help would be awesome as I was just stuck on how to go ... getting a div to keep an eye on the object around it would be a great start and I could probably take it from there ...
source share