3/14/07
I am working on a timeline that works fine on Mac with Safari and
Camino, but fails to show any of the timeline using Wintel Explorer.
Any guidance would be welcome. I have a second timeline with similar
code with the same problem. My code is below. Thank you.
<html>
<head>
<title>Select Philadelphia Hospitals Timeline</title>
<style type="text/css">
body,
html {
margin: 0;
padding: 3;
font-family: arial, "lucida console", sans-serif;
font-size: 9pt;
}
table {
font-family: arial, "lucida console", sans-serif;
font-size: 9pt;
}
ul {list-style: circle outside url("bullet.png");
font-family: arial, "lucida console", sans-serif;
font-size: 10pt;}
dl {
padding: 1em;
border: groove;
background-color: #E0E0E0
}
dt {border-bottom: groove;
font-weight: bold}
dd {margin-bottom: 1em}
.timeline-default {
font-family: Trebuchet MS, Arial, Helvetica, sans serif;
font-size: 9pt;
}
a.year {
color: #000000;
text-decoration: none
}
a.year:hover {text-decoration: underline}
</style>
<script src="http://simile.mit.edu/timeline/api/timeline-api.js";
type="text/javascript"></script>
<script src="http://simile.mit.edu/timeline/examples/examples.js";
type="text/javascript"></script>
<script>
var tl;
function onLoad() {
var eventSource = new Timeline.DefaultEventSource();
var zones = [
{ start: "Jan 31 1840 00:00:00 GMT-0500",
end: "Dec 31 1850 00:00:00 GMT-0500",
magnify: 7,
unit: Timeline.DateTime.YEAR
},
{ start: "Jan 31 1900 00:00:00 GMT-0500",
end: "Dec 31 1919 00:00:00 GMT-0500",
magnify: 7,
unit: Timeline.DateTime.YEAR
}
];
var zones2 = [
<!-- HIDDEN CODE FOR BOTTOM BAND MAGNIFY AREAS
-->
];
var theme = Timeline.ClassicTheme.create();
theme.event.label.width = 600; // px
theme.event.bubble.width = 250;
theme.event.bubble.height = 300;
var date = "Jan 1 1909 00:00:00 GMT-0500"
var bandInfos = [
Timeline.createHotZoneBandInfo({
width: "90%",
intervalUnit: Timeline.DateTime.DECADE,
intervalPixels: 50,
zones: zones,
eventSource: eventSource,
date: date,
timeZone: -6,
theme: theme
}),
Timeline.createHotZoneBandInfo({
width: "10%",
intervalUnit: Timeline.DateTime.CENTURY,
intervalPixels: 200,
zones: zones2,
showEventText: false,
eventSource: eventSource,
date: date,
timeZone: -6,
trackHeight: 0.5,
trackGap: 0.2,
theme: theme
})
];
bandInfos[1].syncWith = 0;
bandInfos[1].highlight = true;
bandInfos[1].eventPainter.setLayout(bandInfos
[0].eventPainter.getLayout());
for (var i = 0; i < bandInfos.length; i++) {
bandInfos[i].decorators = [
new Timeline.SpanHighlightDecorator({
startDate: "Jan 1 1900",
endDate: "Dec 31 1919",
color: "#FFCC80",
opacity: 50,
startLabel: "1900→",
endLabel: "←1919",
theme: theme
})
];
}
tl = Timeline.create(document.getElementById("tl"),
bandInfos, Timeline.HORIZONTAL);
tl.loadXML("http://www.swingingsammy.com/nphstimeline/
nphsdates.xml", function(xml, url) { eventSource.loadXML(xml, url); });
setupFilterHighlightControls(document.getElementById
("controls"), tl, [0,1], theme);
}
var resizeTimerID = null;
function onResize() {
if (resizeTimerID == null) {
resizeTimerID = window.setTimeout(function() {
resizeTimerID = null;
tl.layout();
}, 500);
}
}
</script>
</head>
<body onload="onLoad();" onresize="onResize();">
<div id="header">
<h3>Select Philadelphia Hospitals Timeline</h3>
</div>
<div id="tl" style="height: 650px; border: 1px solid #000000"></div>
<div id="adds">
<br>
<dt>Controls</dt>
<ul>
<li>Click on items on timeline to get details. Timeline starts
on May 11, 1751.</li>
<li>Click and drag to scroll the timeline left or right.</li>
<li>Double-click on any of the bands, and the timeline will
automatically scroll to center on that date.</li>
<li>The right and left arrow keys on your keyboard will scroll the
timline in small increments.</li>
<li>The page-up and page-down keys on your keyboard will scroll the
timeline forward and back one screen per keystroke.</li>
<li>The home and end keys on your keyboard will go the the beginning
or end of the data present in the timeline.</li>
</ul>
<hr>
Revised 03.14.07
</body>
--
David L. Cohen
_______________________________________________
General mailing list
[email protected]
http://simile.mit.edu/mailman/listinfo/general
