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.