<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://w3.org/TR/
html4/strict.dtd">
<html>
<head>
<title>SIMILE | Timeline | Examples | Test Example 2</title>
<link rel='stylesheet' href='styles.css' type='text/css' />
<script>
Timeline_ajax_url="http://everest/roadmaps/include/simile/1713/
timeline_ajax/simile-ajax-api.js";
Timeline_urlPrefix='http://everest/roadmaps/include/simile/1713/
timeline_js/';
Timeline_parameters='bundle=true';
</script>
<script src="http://everest/roadmaps/include/simile/1713/
timeline_js/timeline-api.js" type="text/javascript"></script>
<script>
var tl;
var center_mark = new Array();
function onLoad() {
var tl_el = document.getElementById("tl");
var eventSource1 = new Timeline.DefaultEventSource();
var theme = Timeline.ClassicTheme.create();
theme.autoWidth = true; // Set the Timeline's "width"
automatically.
// Set autoWidth on the
Timeline's first band's theme,
// will affect all bands.
theme.event.bubble.width = 350;
theme.event.bubble.height = 250;
var d = Timeline.DateTime.parseGregorianDateTime("1700")
var bandInfos = [
Timeline.createBandInfo({
eventSource: eventSource1,
width: "40%",
intervalUnit: Timeline.DateTime.DAY,
intervalPixels: 270,
date: "Oct 21 2010 00:00:00 GMT",
theme: theme,
layout: 'detail'
}),
Timeline.createBandInfo({
eventSource: eventSource1,
width: "20%",
intervalUnit: Timeline.DateTime.WEEK,
intervalPixels: 90,
date: "Oct 21 2010 00:00:00
GMT",
theme: theme,
layout: 'overview'
}),
Timeline.createBandInfo({
eventSource: eventSource1,
width: "20%",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 90,
date: "Oct 21 2010 00:00:00
GMT",
theme: theme,
layout: 'overview'
})
];
for (var i = 0; i < bandInfos.length; i++) {
bandInfos[i].decorators = [
new Timeline.PointHighlightDecorator({
'date': new Date(),
color: "#797676",
width: 1,
opacity: 50
})
];
center_mark[i] = bandInfos[i].decorators[0];
}
bandInfos[1].syncWith = 0;
bandInfos[2].syncWith = 0;
bandInfos[1].highlight = true;
// bandInfos[2].highlight = true;
// bandInfos[3].highlight = true;
// Asynchronous Callback functions. Called after data
arrives.
function load_xml1(xml, url) {
// Called with first xml file from server
// Also initiates loading of second Band
eventSource1.loadXML(xml, url);
tl.finishedEventLoading(); // Automatically set new size
of the div
};
// create the Timeline
// Strategy: Initiate Ajax call for first band's data,
then have its callback
// initiate Ajax call for second band's data. Then have
its callback
// automagically resize the overall Timeline since we will
then have all
// the data.
tl = Timeline.create(tl_el, bandInfos,
Timeline.HORIZONTAL);
// stop browser caching of data during testing by
appending time
tl.loadXML("cmevents.xml?"+ (new Date().getTime()),
load_xml1);
GoNow();
updateDate();
// add a listener for scrolling
var b0 = tl.getBand(0);
b0.addOnScrollListener(updateDate);
}
// center on current time and date
function GoNow() {
// got to allow for timezone offset - hate doing time
black cat in coal cellar
var d = new Date();
var t = d.getTime();
t += d.getTimezoneOffset()*-60000;
d.setTime(t);
tl.getBand(0).setCenterVisibleDate(d);
}
// report the position including updating the center mark
point highlighter
function updateDate() {
d = tl.getBand(0).getCenterVisibleDate();
for (var i = 0; i < center_mark.length; i++) {
center_mark[i]._date = d;
center_mark[i].paint();
}
mySpan = document.getElementById("centerdate");
mySpan.innerHTML = d.toDateString();
}
// move the timeline using the arrows
function moveTimeline(month) {
d = tl.getBand(0).getCenterVisibleDate();
d.setMonth(d.getMonth()+month);
var t = d.getTime();
t += d.getTimezoneOffset()*-60000;
d.setTime(t);
tl.getBand(0).setCenterVisibleDate(d);
}
// put the timeline on the requested date from the form
function centerTimeline() {
var d = new Date(document.getElementById
("thisdate").value);
var t = d.getTime();
t += d.getTimezoneOffset()*-60000;
d.setTime(t);
tl.getBand(0).setCenterVisibleDate(d);
return false;
}
function handleKeypress (event) {
event = event || window.event;
if (event.keycode == 13) {
alert("stuff and nonsense");
form = document.getElementById("centerrequest");
centerTimeline(form);
return false;
}
return true;
}
var resizeTimerID = null;
function onResize() {
if (resizeTimerID == null) {
resizeTimerID = window.setTimeout(function() {
resizeTimerID = null;
tl.layout();
}, 500);
}
}
</script>
<style>
.timeline-date-label{position:absolute; border:solid #797676;
color:#797676; width:5em; height:1.5em;}
.timeline-date-label-em{color:#000;}
.timeline-band-0 .timeline-ether-bg{background-color:#eee}
.timeline-band-1 .timeline-ether-bg{background-color:#ddd}
.timeline-band-2 .timeline-ether-bg{background-color:#ccc}
.timeline-band-3 .timeline-ether-bg{background-color:#aaa}
#leftbodytext {
position: absolute;
left:10px;
width:200px;
background:#fff;
/* border:1px solid #000;*/
}
#centerbodytext {
text-align: center;
background:#fff;
margin-left: 199px;
margin-right:199px;
/* border:1px solid #000;*/
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 201px;
margin-right:201px;
}
#rightbodytext {
position: relative;
float:right;
top:-21px;
text-align: center;
right:10px;
width:190px;
background:#fff;
/*border:1px solid #000;*/
}
html>body #centerbodytext {
margin-left: 201px;
margin-right:201px;
}
</style>
</head>
<body onload="onLoad();" onresize="onResize();">
<p>
<!-- ############################################## -->
<!-- ### ### -->
<!-- ### NOTE: This Timeline's width will be ### -->
<!-- ### set automatically. Initial ### -->
<!-- ### value will be replaced. Start ### -->
<!-- ### with a min of 200 so "loading" ### -->
<!-- ### popup can be seen. Or start with ### -->
<!-- ### value near the automatic value ### -->
<!-- ### to minimize motion on the screen ### -->
<!-- ### ### -->
<!-- ############################################## -->
<div id="tl" class="timeline-default" style="height:500px;" >
</div><p>
<div id="leftbodytext">
Centre on Date: <BR>
<INPUT TYPE="text" NAME="inputbox" id='thisdate' VALUE=""
onkeypress="if (typeof event != 'undefined') handleKeypress(event)"
onkeyup="if (typeof event != 'undefined') handleKeypress(event)">
<INPUT TYPE="submit" NAME="submit" Value="Move"
onclick="return centerTimeline();">
</div>
<div id="centerbodytext">
<a href="javascript:moveTimeline(-6);"><<</a> <a
href="javascript:moveTimeline(-1);"><</a>
( <span id="centerdate"></span> )
<a href="javascript:moveTimeline(1);">></a> <a
href="javascript:moveTimeline(6);">>></a>
</div><div id="rightbodytext"><a href="javascript:GoNow
();">Now</a></div>
</body>
</html>
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
