Due to coding language issues, I recently had to iFrame my own site within my own site. ;)
I needed PHP to power some image generation, etc. and have this page live on a JSP page which I do not have access to the JSP code (or the knowledge of JSP). All I can do is drop in some HTML/Javascript/CSS via our CMS.
The content within my iFramed page is a gallery of images. Clicking on an image would result in an overlay. There are several other overlays based on the actions taken on the first overlay. The iFrame ended up being about 4500 pixels in height. I was struggling to get the overlays to position correctly. The positioning was inconsistent across browsers, etc.
I tried several approaches to this.
– Capturing the mouse click position and display the overlay based on that coordinate. I had issues with IE mainly on that one; the various versions really did not like this… ;)
– Using a scroll to function to make the overlay always at the top and scroll the page to that point. Given the iFrame nature and such this just didn’t work.
I consulted with a coworker and he steered me in the right direction. His suggestion was to inject the overlay into the DOM at the point of the element that was clicked and position it absolutely to that now parent element. This did the trick and works great in all browsers!
I will admit that while I was implementing his suggestions, I realized that all of my overlays were being positioned Fixed 50px from the top. I’m sure that was part of the issue and maybe just changing that positioning without injecting it after the clicked image in the gallery. Maybe that would work, but probably not. And quite frankly I don’t care anymore; it’s working great! ha!
Not sure if these ramblings will help anyone, but I thought it might be worth documenting.
