Mike, Thank you for your feedback and a better solution. Nicely done!
Jeff On Sep 9, 2:56 pm, Michael Nosal <[email protected]> wrote: > 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 > athttp://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 > > athttp://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.
