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
jroe...@yahoo.com
(818) 912-7530
>________________________________
> From: Michael Nosal <mno...@mitre.org>
>To: simile-widgets@googlegroups.com
>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 simile-widgets@googlegroups.com.
To unsubscribe from this group, send email to
simile-widgets+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/simile-widgets?hl=en.
