The following code may actually work. I haven't tried it yet.
The problem I think I may run into is that it is based on half the distance, in
pixels, of the parent <div> (divwidth/2).
And I dont think this is the actual center date of the timeline. And it has
other issues like when a window is re-sized.
It becomes even more problematic when you have 3 different timelines stacked on
top of each other in a browser window.
We have written a timeline operating system that allows you to place an
unlimited number of synchronously scrolling timelines in a single browser
window. Although placing more than 4 timelines in one window, that scroll,
center date, with each other, seriously degrades the browsers performance
(Chrome is the best performer here).
With the following code, their (width/2) may not correspond to the exact same
date/time.
I dont really care whether the lines exactly line up, visually, vertically.
What I do want is that if I have 3 timelines stacked on top of each other. And
I scroll timeline #1's vertical line to say Dec 2, 1941, the other timelines
(#2 and #3) will have their vertical line scroll to the exact date of the Pearl
Harbor attack, so I can see, with all accuracy, what was going on in other
timelines, on that exact date.
Extra points for the line to be placed at the exact same time of the day.
I am all down to spending whatever resources I have to help come up with a
solution to this new feature. I am available 24/7 to help work/test/debug this.
.timeline-container:after {
content: "";
position:absolute;
top:0;
left: 50%;
width: 2px; /* However thick you want the line to be. */
margin-left: -1px; /* Half the width, to put the line in the exact center. */
height: 250px; /* However tall your timeline container is. */
background-color: red;
z-index:1000; /* Ensures the line shows above other timeline content. */
}
****************************************************************************************************
****************************************************************************************************
****************************************************************************************************
****************************************************************************************************
****************************************************************************************************
And we know the following CSS has its problems, as detailed above.
I have tested this and can attest to its problems. Try it for yourself, rinse
and repeat.
.sync {
background-attachment: scroll;
background-clip: border-box;
background-color: red;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
display: block;
height: 100%;
margin-left: 49%;
opacity: 0.2;
position: absolute;
width: 3px;
z-index: 5000;}
Thanks
Jeff Roehl
[email protected]
(818) 912-7530
>________________________________
> From: Derek J. Balling <[email protected]>
>To: [email protected]
>Sent: Wednesday, May 23, 2012 3:44 PM
>Subject: Re: [Simile-Widgets] Center visible date line in a timeline
>
>
>Wow, that would be a really nice feature, come to think of it.
>
>
>D
>
>
>
>On May 23, 2012, at 4:43 PM, Jeff Roehl wrote:
>
>Does anybody know how to draw a line (hopefully red) vertically through the
>timeline?
>>
>>
>>The line would not move with the timeline but would remain centered on the
>>center date (the visible center).
>>
>>
>>This would be used, when synchronizing 2 or more timelines, for comparison
purposes, of their shared centered dates, as the 2 or more timelines
scroll though time.
>>
>>
>>Thanks
>>Jeff Roehl
>>[email protected]
>>(818) 912-7530
>>
>>
>>
--
>>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.
>
>
>
--
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.
