Updating Google Visualizations Behind a Curtain
Today I was faced with a nasty little problem. I've started to add the annotations to the Google Visualization AnnotatedTimeLine widget and when switching them on and off I ran into a problem with the way I had implemented double-buffering: the unused area where the annotations are in the Flash component has a transparent background, so given that the two widgets have the same size in pixels, the "hidden" graph that doesn't have the annotations active is going to "bleed" through the one that does, with it's transparent background.
Yuck!
How to fix it?
Well, the simplest idea I had was to place a curtain between the two divs in zIndex space. Basically, in the HTML I added another div with nothing on it and set it's zIndex value to midway between the other two: 25.
This wasn't working right, so I changed the CSS on the curtain div to have a background-color of #fff. This looked a lot better, but again, it didn't seem to work all the time.
I pushed and prodded on this... adding a non-breaking space to the div... changing the color to try and see what was happening... then it hit me: Maybe the zIndex was being changed?
I added the one line to reset the zIndex of the curtain to 25 every time I flipped the other two, and Bingo! That was it. It seems that at least in Firefox, the JavaScript/CSS was "moving" the "static" div in zIndex space when I moved the others. Odd, but at least I have it worked out. Sweet.