1 2 3 4 5
This worked out really well, the ads were right where they should be. When I scrolled, the element moved with the window smoothly instead jittering about while scrolling. Everything was great … until I resized the window. When I made the window smaller, the ad div would move away from the content div. When I made the window bigger, the ad div would overlap the content div (though that might increase ad revenue by making people click on it by accident. What I really wanted was for the top attribute to be fixed to the browser window and the left attribute absolute to the content. Unfortunately css only has the position property which effects both top and bottom (if I’m wrong, please let me know).
After a bit of thinking, I decided, instead of observing when people scroll, why not observe when people resize their windows? You would think resizing the window happens a lot less often. The code below was written using the prototype 220.127.116.11. Got to prototype to download the latest version.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
Essentially I pass a target element, which is the element we want to adjust the position to, and the parent element which we want to use as the anchor for the left attribute. The default values I set to top 20 and left 800, I figured they would work well for many website. These can be overridden by passing the appropriate options. The top attribute is relative to the browser since the position is set to fixed. Technically left is also relative to the browser window, but the offset is dynamically calculated with prototypes Element.positionedOffset method. You may think that I would be able to use Prototypes Event.observe to detect when the window is resized. Unfortunately, the resize event seems to not be supported by prototype. I got around this by creating a ScrollingElm object and than manually setting the onresize attribute in the body tag.
1 2 3 4 5 6