1

Annotated time line is a google visualization library written in flash. I would like to place a div on top of it at times to cover it. However, when I do this, the div covers everything but the annotated time line shows through. What is the problem and how can it be resolved?

Alexis
  • 23,545
  • 19
  • 104
  • 143
  • Use your firebug/f12 dev tools/element inspector to mess with your elements in real time and figure it out. – Malk Feb 24 '12 at 23:35
  • not super useful comment. I obviously tried that. – Alexis Feb 24 '12 at 23:38
  • 1
    I'm sorry to be so unhelpful but this question is lacking code for us to see what the problem is. Barring that the best suggestion that I can give is to help you find tools that allow you to figure this out for yourself. Is it a zindex issue? An opacity issue? A positioning issue? Can you set the visualization's display to none? Can you move it off the screen? etc... – Malk Feb 25 '12 at 00:12

2 Answers2

2

You're dealing with flash on the annotated timeline. Set wmode (window mode) to transparent (think oqaque works to) on annotated time line

        annotatedtimeline = new google.visualization.AnnotatedTimeLine(
          document.getElementById('timespan_chart'));

    annotatedtimeline.draw(data, {wmode: 'transparent', ...});
Andy Hebert
  • 413
  • 4
  • 12
1

Have you tried adding z-index to your div css?

#flashcontainer {
    position: relative;
    z-index: 1;
}

#topdiv {
    position: absolute;
    z-index: 2;
}
Jason
  • 2,280
  • 23
  • 22