Okay, then I'm missing something. You wrote:
> I would like to place a stationary object on my timeline. I would like to
> place a line on the timelines centerdate using getCenterVisibleDate(). I
> would like to do this externally, without changeing the javascript
> source-code for times-lines.
I took this to mean that you wanted a line, that would remain fixed on screen
as you scrolled the timeline left and right, the same way that the Timeline
copyright notice remains fixed at the bottom left of the timeline.
If instead what you want is a vertical line that is 'fixed' to a particular
date, then you should use Timeline.PointHighlightDecorator. This will draw a
single vertical line across the band at a specific date.
This vertical line will move across the screen as you drag the timeline left
and right, but it will remain on the specific date you created it.
Your said you want the multiple timelines to scroll in unison about the same
center date, so the same Timeline.PointHighlightDecorator will be lined up
across all timelines.
It is true the visual center of the timeline div is not always exactly the same
pixel as the center visible date. This is due to the accumulation of rounding
errors when rendering the components of the timeline, but it is supposed to be
within a couple of pixels.
You can dynamically update and position Timeline.PointHighlightDecorators as
well.
--Mike
On Jul 23, 2012, at 4:24 PM, Jeff Roehl wrote:
> As I recall, placing a line at 1/2 width of the container would not work
> because my goal is not a visually centered line.
>
> I have written a timeline operating system in which you can place multiple
> time-lines in a browser. They are all set to scroll, in unison, on their
> center dates, like this for 3 time-lines:
>
> PGJS91A2X.getBand(0).removeOnScrollListener();
> PGJS91A2X.getBand(0).addOnScrollListener(function(band) {
> var centerDateORJA91A2X = band.getCenterVisibleDate();
> ORJA91A2X.getBand(0).setCenterVisibleDate(centerDateORJA91A2X);
> });
> ORJA91A2X.getBand(0).removeOnScrollListener();
> ORJA91A2X.getBand(0).addOnScrollListener(function(band) {
> var centerDateTEOI81A2X = band.getCenterVisibleDate();
> TEOI81A2X.getBand(0).setCenterVisibleDate(centerDateTEOI81A2X);
> });
> TEOI81A2X.getBand(0).removeOnScrollListener();
> TEOI81A2X.getBand(0).addOnScrollListener(function(band) {
> var centerDatePGJS91A2X = band.getCenterVisibleDate();
> PGJS91A2X.getBand(0).setCenterVisibleDate(centerDatePGJS91A2X);
> })
>
> It seems that the visual center of the timeline object is not always the
> getCenterVisibleDate() for whatever reason.
>
> My goal is to inscribe a thin red line through all 3 of these time-lines, so
> that if timeline #1 red line is placed on July 4th 1776 that timeline #2 red
> line will be exactly on July 4th 1776, regardless of wether
> getCenterVisibleDate() is the exact visible center of the timeline, which
> sometimes it is not.
>
> In other-words, getCenterVisibleDate() is not always 50% of the visible <div>.
>
> So if I move one timeline to a certain date, I can scroll down to another
> timeline and see that the red line is exactly on the same date, regardless if
> it visually centered. The lines are on the same date but may not visually
> line up.
>
> The outcome of this is to be able to position one timeline at a point in
> history and be able to immediately see on another timeline what was going on
> at that exact date.
>
> Would the following work? Notice I changed (tl.getPixelLength()/2) + "px";
> with getCenterVisibleDate()
>
> var ct = tl.getDocument().createElement("div");
> ct.id = "centerTime";
> ct.style.width = "1px";
> ct.style.height = "100%";
> ct.style.backgroundColor = "#ff0000";
> ct.style.position = "absolute";
> ct.style.opacity = 0.66;
> ct.style.left = (tl.getCenterVisibleDate() );
> ct.style.zIndex = "5000";
> tl.addDiv(ct);
>
> Thanks
> Jeff Roehl
> [email protected]
> (818) 912-7530
> From: Michael Nosal <[email protected]>
> To: [email protected]
> Sent: Monday, July 23, 2012 12:41 PM
> Subject: Re: [Simile-Widgets] How to make an object remain stationary on a
> timeline
>
> Jeff,
> I've used the following code. You can define the styles in CSS, or via JS (my
> original code required some dynamic stuff):
> var ct = tl.getDocument().createElement("div");
> ct.id = "centerTime";
> ct.style.width = "1px";
> ct.style.height = "100%";
> ct.style.backgroundColor = "#ff0000";
> ct.style.position = "absolute";
> ct.style.opacity = 0.66;
> ct.style.left = (tl.getPixelLength()/2) + "px";
> ct.style.zIndex = "5000";
> tl.addDiv(ct);
>
> Things on the timeline aren't positioned using margin-left (like you have in
> your CSS) but rather as absolutely computed left positions, based on the size
> of the timeline and the band div's inside. That's why the left property needs
> to be set at runtime, and not in the stylesheet.
>
> --Mike
>
>
> --
> 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.
