You're right, that is not the best performing solution ;-)
If all you want to do is create a "watermark" for a band, there are a couple of
better methods (this is with Timeline 2.3.1)
1) Add the text of your watermark to the timeline-ether-bg layer. Set the
position of the timeline-ether-bg div to "fixed" and set the styles on that
element. e.g.
.timeline-band-0 .timeline-ether-bg {
color:#ccaabb; // or color:rgba(200,150,180,0.3)
font-size:100pt;
left:0;
position:fixed;
text-align:center;
}
You can easily see this using Firefox/Firebug. And it would be simple to write
a function to find and manipulate the appropriate divs, without modifying the
Timeline code itself. Just run it after the Timeline has been created and drawn:
function addWatermark(bandNum,text) {
document
.getElementById('timeline-band-' + bandNum)
.getElementsByClassName('timeline-ether-bg')[0]
.innerHTML = text;
}
addWatermark(0,"WATERMARK");
Try this out for yourself: Go to the JFK example at
http://www.simile-widgets.org/timeline/
Paste and run the code above into the Firebug console, then inspect the top
band and change the styles for .timeline-band-0 .timeline-ether-bg to the
styles above. You should have a nice big "WATERMARK" text on the timeline,
fixed beneath all the events, no scrollHandler required.
See screenshot: http://imgur.com/7IKPz
--Mike
On Sep 9, 2011, at 2:54 PM, codebeneath wrote:
> This is probably not the best performing solution, but wanted to share
> it regardless.
>
> Given that a band has an existing SpanHighlightDecorator, that is
> simply a "watermark" text for the entire band that should always be
> visible, we did the following:
>
> ....
> band.addOnScrollListener(this.scrollListener);
> ....
>
> // scroll listener for all source bands, not including the
> overview band
> scrollListener : function(band) {
> var minVisibleDate = band.getMinVisibleDate();
> // find watermarks
> for (var j = 0; j < band._decorators.length; j++) {
> var d = band._decorators[j];
> // move watermarks, but not the "now" line
> if (d instanceof Timeline.SpanHighlightDecorator) {
> band._decorators[j]._startDate = minVisibleDate;
> band._decorators[j]._endDate = minVisibleDate;
> break;
> }
> }
> band._paintDecorators();
> }
>
> I wonder if there is a better solution using a background image for
> the band?
>
> --
> You received this message because you are subscribed to the Google Groups
> "SIMILE Widgets" group.
> To post to this group, send email to [email protected].
> To unsubscribe from this group, send email to
> [email protected].
> For more options, visit this group at
> http://groups.google.com/group/simile-widgets?hl=en.
>
--
You received this message because you are subscribed to the Google Groups
"SIMILE Widgets" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/simile-widgets?hl=en.
