Theme not working...

vdhant

unread,

Oct 13, 2009, 12:10:36 AM10/13/09

to SIMILE Widgets

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>

vdhant

unread,

Oct 13, 2009, 6:24:27 PM10/13/09

to SIMILE Widgets

Hi guys
I have made some progress on trying to figure out whats going on.

Basically if I use the following instead of the below it works:
<script src="http://simile.mit.edu/timeline/api/timeline-api.js"
type="text/javascript"></script>

Old version which I downloaded the code at "./Scripts/timeline_2.3.0/
xxx" from the google project page:

Now I have two problems... Firstly I'm not sure what version of the
timeline "http://simile.mit.edu/timeline/api/timeline-api.js" is
using. I am pretty sure its not 2.3.0 because the files are different.
Also I don't want to use "http://simile.mit.edu/timeline/api/timeline-
api.js" as I want to use a local install. I can download the scripts
from "http://simile.mit.edu/timeline/api/xxx" and it works but I run
into not knowing which version I'm using...

So any ideas whats going on here???

Cheers
Anthony

vdhant

unread,

Oct 13, 2009, 6:55:15 PM10/13/09

to SIMILE Widgets

Hi guys
I have made some progress on trying to figure out whats going on.

Basically if I use the following instead of the below it works:
<script src="http://simile.mit.edu/timeline/api/timeline-api.js"
type="text/javascript"></script>

Old version which I downloaded the code at "./Scripts/timeline_2.3.0/
xxx" from the google project page:

Now I have two problems... Firstly I'm not sure what version of the
timeline "http://simile.mit.edu/timeline/api/timeline-api.js" is
using. I am pretty sure its not 2.3.0 because the files are different.
Also I don't want to use "http://simile.mit.edu/timeline/api/timeline-
api.js" as I want to use a local install. I can download the scripts
from "http://simile.mit.edu/timeline/api/xxx" and it works but I run
into not knowing which version I'm using...

So any ideas whats going on here???

Cheers
Anthony

On Oct 13, 3:10 pm, vdhant <vdh....@gmail.com> wrote:

vdhant

unread,

Oct 13, 2009, 11:48:53 PM10/13/09

to SIMILE Widgets

I have done a little more looking into it and I think this could be a
version problem...

In that 2.3.0 doesn't support changing themes in this manner, where as
a previous version does.

Note I think someone else came across this problem here:
http://groups.google.com/group/simile-widgets/browse_thread/thread/d2e8a55ca61f0ae0/33dd4cb28a090f84?lnk=gst&q=theme#

Any ideas???

Reply all

Reply to author

Forward