jQuery Forum

I am running into a complex issue - which I thought would be easy, with the help of jquery UI components, but no luck.

I am trying to implement a timeline kind of stuff with the help of jquery slider.

This timeline could be real big, so I want to make this timeline (DIV) as scrollable.

I tried with jquery.slider, which gives me multiple handles (fine), but I can not put this slider on a scrollable div (in IE).

1. <div id="timelineContainer" style="padding:20px;width:800px;margin: auto auto;overflow:hidden;background:#ccc;z-index: 1000;">
2.     <div id="timelineholder" style="width:2000px;">
3.         <div id="timeline"></div>
4.     </div>
5. </div>
6. <script> $("timeline").slider(); </script>
   

This looks (and even work) good in FF, but NOT in IE7. In IE7 the "timeline" slider doesnt sits behind the the timelineContainer, and infact visible over it causing the page having horizontal scrollbar.

Any help in hiding my Slider would be appreciated!