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:
<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>
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 <[email protected]> wrote:
> 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
-~----------~----~----~----~------~----~------~--~---
