As stated in the title, I am now trying to create a chart using Google visualization: annotated time line. It's very easy to use and the documentation is fairly easy to understand as well. You can find the documentation here.
I run into a problem about the wmode of the chart which is a flash object. The default value of the chart's wmode is "window" and it will always overlay all HTML objects in the same page. That is very annoying, because even the jquery block() method doesn't work on it.
When I change the chart's wmode into "opaque" or "transparent" the chart will not overlay HTML objects with higher z-index, but it doesn't recognize the mouse scroll event. It still catch the mouse click event though.
I have tried it in the following browser:
Only the IE can catch the mouse scroll even, the others couldn't recognize it. Is anyone experiencing the same problem as me? or is anyone not experiencing that problem?
I've been looking for the solution over the internet and no solutions is working for me. Any solutions (or work around) would be appreciated.
Thanks a lot.
Since no one seems to have the solution, I decided to answer my own question in case someone run into the same problem as me, :) Well I actually don't know the solution for it yet, but I found a work around. :p
First, I set the wmode of the chart into 'opaque'. Then, following the advice from jpea, I used the javascript mouse wheel event listener to handle the mouse wheel event in the div element where the chart resides. The delta value obtained from the event is then used to change the chart's visible range using setVisibleChartRange() method.
See here to find out how to use the mouse wheel event in different browsers.
I hope this answer is useful, :D
Note: If you sure the chart would not be overlapped by any objects by any chance, then you don't need to do anything about the wmode.