|
Timeline_VerticalScrollbar
Add a vertical scrollbar to your timeline
Add the following CSS to your timeline container. .your-timeline-container { overflow-x:hidden; overflow-y:scroll;}This will enabled a vertical scrollbar when you have many events but you will notice that timeline doesn't draw itself completely in the lower part like so:
it's because its height is calculated with the container's starting height. If you take a quick look in the DOM using Firebug, ''you'll notice the '''height''' is within the '''container's style attribute'''''. Bingo! now we just need to find the function that does the calculation or that adds the height to the container. Find the '''setBandShiftAndWidth''' function in the '''timeline.js''' file and modify the following line : this._div.style.height = width + "px"; to this._div.style.height = "100%"; Change the mouseWheel setting in your theme to 'default' See MouseWheelScrollingAndZooming and Timeline_ThemeClass thats it! here's what it looks like now:
|
► Sign in to add a comment
If i just include "<script src="http://static.simile.mit.edu/timeline/api-2.0/timeline-api.js" type="text/javascript"></script>" in my page to have the timeline, how can i apply your patch to file "timeline.js"? I don't have a local copy of the timeline, neither i need for my application.
This implementation is not working for me on version 2.2.0
I can't get this working either (version 2.2.0).
Find the '''setBandShiftAndWidth''' function in the '''band.js''' file and modify the following line which is indicated by the comment below
Timeline.Band.prototype.setBandShiftAndWidth = function(shift, width) { keyboardInput.parentNode; var middle = shift + Math.floor(width / 2); if (this.timeline.isHorizontal()) { div.style.top = shift + "px";
No need to modify 'band.js'. Just reimplement only this function and include it in your file where you define your timeline.
Does this fix still work for 2.3.0.0? It makes no differnce in firefox and breaks IE6!
Not working :(
it is not working on 2.3.0 :(
I had the same problem, I could not get the scroll bar to appear. After looking at the css applied to the div I found the following rule in timeline.css: .timeline-container {
} Replace this with: .timeline-container { }Make the modification to Timeline.Band.prototype.setBandShiftAndWidth as shown above and your scroll bar should appear. This worked for me in Firefox 4.0 and IE8.
Could not get this to work in 2.3.0 :(