Hi guys
I am trying to use themes to alter the style of my timeline but am
having a bit of trouble... For some reason the theme doesn't seem to
be applying.
Just wondering if anyone knows where I am going wrong.
Cheers
Anthony
<html>
<head>
<style type="text/css">
body, td { font-family:arial, sans-serif; font-size:0.75em; }
.ContextHeader { background-color:#FAD163; padding:3px; }
.ContextHeaderContent { background-color:#FFF7D7; }
.ContextHeaderHeader { color:#000000; font-size:1.4em; font-
weight:bold; margin:0px; padding:1px 0px 2px 2px; }
.ContextHeaderLine { border-top:#FAD163 solid 2px; height:1px;
font-size:1px; }
.ContextHeader .RowHeader { font-weight:bold; width:170px; }
.ContentBlock { background-color:#C1D9FF; padding:3px; margin-
top:5px; }
.ContentBlockContent { background-color:#E5ECF9; }
.ContentBlockHeader { color:#000000; font-size:1.15em; font-
weight:bold; margin:0px; padding:1px 0px 2px 2px; }
.ContentBlockLine { border-top:#C1D9FF solid 2px; height:1px;
font-size:1px; }
.ContentBlockSubLine { border-top:#C1D9FF dotted 2px; height:
1px; font-size:1px; background:#E5ECF9; }
.ContentBlockSubThinLine { border-top:#C1D9FF solid 1px;
height:1px; font-size:1px; background:#E5ECF9; }
.ContentBlock .RowHeader { font-weight:bold; width:170px; }
.ContentBlock .ColHeaderHolder td { border-top:#C1D9FF solid
1px; border-bottom:#C1D9FF solid 1px; background:#E5ECF9; font-
weight:bold; }
optgroup { font-weight:bold; font-style:italic; }
</style>
<script>
Timeline_ajax_url = './Scripts/timeline_2.3.0/timeline_ajax/
simile-ajax-api.js';
Timeline_urlPrefix = './Scripts/timeline_2.3.0/
timeline_js/';
Timeline_parameters = 'bundle=true';
</script>
<script src="./Scripts/timeline_2.3.0/timeline_js/timeline-api.js"
type="text/javascript" charset="utf-8"></script>
</head>
<body>
<table width="100%">
<tr>
<td width="5%"> </td>
<td>
<div class="ContentBlock">
<h2 class="ContentBlockHeader">Timeline</h2>
<div class="ContentBlockContent">
<table width="100%">
<tr valign="top" class="jq-
IsDataAnalysisData">
<td style="background-color:white">
<div id="jq-Timeline"
style="height: 800px;">
</div>
</td>
</tr>
</table>
</div>
</div>
</td>
<td width="5%"> </td>
</tr>
</table>
<script type="text/javascript" src="./Scripts/jquery-1.3.2-
min.js"></script>
<script type="text/javascript">
var tl;
$(document).ready(function() {
var eventSource = new Timeline.DefaultEventSource(0);
var theme = Timeline.ClassicTheme.create();
theme.ether.backgroundColors = [ '#CCF3DD', '#CCF3DD',
'#CCF3DD', '#CCF3DD' ];
theme.timeline_start = new Date(Date.UTC(2007, 1, 1));
theme.timeline_stop = new Date(Date.UTC(2012, 1,
1));
var d1 = Timeline.DateTime.parseGregorianDateTime
("2008/07/01")
var d2 = Timeline.DateTime.parseGregorianDateTime
("2009/07/01")
var d3 = Timeline.DateTime.parseGregorianDateTime
("2010/07/01")
var d4 = Timeline.DateTime.parseGregorianDateTime
("2011/07/01")
var bandInfos = [
Timeline.createBandInfo({
width: "25%",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 80,
date: d1,
theme: theme
}),
Timeline.createBandInfo({
width: "25%",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 80,
eventSource: eventSource,
date: d2,
theme: theme
}),
Timeline.createBandInfo({
width: "25%",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 80,
eventSource: eventSource,
date: d3,
theme: theme
}),
Timeline.createBandInfo({
width: "25%",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 80,
eventSource: eventSource,
date: d4,
theme: theme
})
];
bandInfos[0].decorators = [
new Timeline.SpanHighlightDecorator({
startDate: "2008/01/01 00:00:00 GMT",
endDate: "2009/01/01 00:00:00 GMT",
startLabel: "start 08",
endLabel: "end 08",
color: "#FFC080",
opacity: 50,
theme: theme
})
];
bandInfos[1].decorators = [
new Timeline.SpanHighlightDecorator({
startDate: "2009/01/01 00:00:00 GMT",
endDate: "2010/01/01 00:00:00 GMT",
startLabel: "start 09",
endLabel: "end 09",
color: "#FFC080",
opacity: 50,
theme: theme
})
];
bandInfos[2].decorators = [
new Timeline.SpanHighlightDecorator({
startDate: "2010/01/01 00:00:00 GMT",
endDate: "2011/01/01 00:00:00 GMT",
startLabel: "start 10",
endLabel: "end 10",
color: "#FFC080",
opacity: 50,
theme: theme
})
];
bandInfos[3].decorators = [
new Timeline.SpanHighlightDecorator({
startDate: "2011/01/01 00:00:00 GMT",
endDate: "2012/01/01 00:00:00 GMT",
startLabel: "start 11",
endLabel: "end 11",
color: "#FFC080",
opacity: 50,
theme: theme
})
];
tl = Timeline.create(document.getElementById("jq-
Timeline"), bandInfos, Timeline.HORIZONTAL);
});
</script>
</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
-~----------~----~----~----~------~----~------~--~---
