Tuesday, 27 October 2009

Timeline by widget or JQuery?

Chris, thanks for these ideas. I didn't see this before I replied about the Widget.
I can see it could be done, and I can see that this method is very flexible,
but seeing as we have a widget already created which works nicely,
let's save ourselves the work. We can keep these ideas in the background for v.2!

David IB

At 20:19 26/10/2009, Tyndale STEP Project wrote:

[]
Some extra thoughts based on the video: http://jqueryfordesigners.com/video.php?f=scrollable-timelines.flv

Background
we could have a vertical scrollable div being the timeline
lots of sub divs being the representation of the each geographical location
A scale variable defining the ratio pixel/year

Foreground (events and so on)
Then using the CSS absolute (not my favourite...) we can position our elements absolutely in relation to a parent div, the timeline div, or different bands like so:

<html>
<body>
    <div style="position: relative; left: 60px; height: 260px; border-style: solid; width: 300px; overflow: scroll">

    <!-- bands -->
    <div style="width: 30%; height: 100%; border-style: dashed; background-color: turquoise; float: left">Judah</div>
    <div style="width: 30%; height: 100%; border-style: dashed; background-color: gold; float: left">Egypt</div>
    <div style="width: 30%; height: 100%; border-style: dashed; background-color: brown; float: left">Assyria</div>

    <!-- events -->
    <div style="border-color: blue; top: 10px; border-style: dotted; position: absolute; left: 150px; width: 30px">event1</div>
    <div style="border-color: red; top: 150px; border-style: dotted; position: absolute; left: 70px; width: 30px">event2</div>
    <div style="border-color: yellow; top: 250px; border-style: dotted; position: absolute; left: 70px; width: 30px">event3</div>
    <div style="border-color: green; top: 220px; border-style: dotted; position: absolute; left: 120px; width: 30px">event4</div>

    <!-- length of time -->
    <div style="width: 10px; height: 100px; position: absolute; top: 40px; border-style: dashed; background-color: pink; left: 10px">/</div>
</div>
</body>
</html>

Either create a file with the above or paste in: http://www.w3schools.com/Css/tryit.asp?filename=trycss_position_relative

Basically the band height would have to change to something like 99999px to ensure it's long enough. Then using that tutorial video, making the whole thing scrollable, adding mousescroll and mouse events, we can get a decent timeline...

The tricky thing is drawing the line through the timeline... The things I've seen to draw lines, but using this: http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm relative to the divs mentioned above, i think we can something rather nice...

Any ideas welcome... (attached screenshot)
Chris
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)