Hey Jonas,
Thanks for the reply.
I tried to do it both ways as you told me. However, still no luck !!
This is my whole Javascript code (if u can figure out the mistake):
var tl;
function onLoad() {
var eventSource = new Timeline.DefaultEventSource();
var zones = [
{ start: "Jan 1 1903 00:00:00 GMT-0800",
end: "Jan 1 1936 00:00:00 GMT-0800",
magnify: .1,
unit: Timeline.DateTime.YEAR,
multiple: 5
},
{ start: "Jan 1 1936 00:00:00 GMT-0800",
end: "Jan 1 1960 00:00:00 GMT-0800",
magnify: .3,
unit: Timeline.DateTime.YEAR,
multiple: 3
},
{ start: "Jan 1 1960 00:00:00 GMT-0800",
end: "Jan 1 1968 00:00:00 GMT-0800",
magnify: .2,
unit: Timeline.DateTime.YEAR,
multiple: 2
},
{ start: "Jan 1 1968 00:00:00 GMT-0800",
end: "Jan 1 1976 00:00:00 GMT-0800",
magnify: .6,
unit: Timeline.DateTime.YEAR,
multiple: 2
},
{ start: "Jan 1 1976 00:00:01 GMT-0800",
end: "Jan 1 1990 00:00:00 GMT-0800",
magnify: .7,
unit: Timeline.DateTime.YEAR,
multiple: 1
},
{ start: "Jan 1 1997 00:00:00 GMT-0800",
end: "Jan 1 2007 00:00:00 GMT-0800",
magnify: 3,
unit: Timeline.DateTime.YEAR
}
];
var zones2 = [
/*
{ start: "Fri Nov 22 1963 00:00:00 GMT-0800",
end: "Sun Nov 24 1963 00:00:00 GMT-0800",
magnify: 5,
unit: Timeline.DateTime.DAY
}
*/
];
//var theme = Timeline.ClassicTheme.create();
var theme1 = Timeline.ClassicTheme.create();
Timeline.ThemeName = 'dark-theme'; // commented by Nitin
theme1.timeline_start = new Date(Date.UTC(1894, 0, 1)); //
added by Nitin
theme1.timeline_stop = new Date(Date.UTC(2030, 0, 1));
theme1.event.bubble.width = 250;
//var date = "Nov 22 1940 13:00:00 GMT"; // commented by
Nitin
var date = new Date(); // added by Nitin
var bandInfos = [
Timeline.createHotZoneBandInfo({
width: "80%",
intervalUnit: Timeline.DateTime.YEAR,
intervalPixels: 200,
zones: zones,
eventSource: eventSource,
date: date,
timeZone: -6,
theme: theme1 // uncommented by Nitin
}),
Timeline.createHotZoneBandInfo({
width: "20%",
intervalUnit: Timeline.DateTime.DECADE,
intervalPixels: 200,
zones: zones2,
eventSource: eventSource,
date: date,
timeZone: -6,
overview: true,
theme: theme1
})
];
bandInfos[1].syncWith = 0;
bandInfos[1].highlight = true;
for (var i = 0; i < bandInfos.length; i++) {
bandInfos[i].decorators = [
/* new Timeline.SpanHighlightDecorator({
startDate: "Fri Nov 22 1963 12:30:00 GMT-0600",
endDate: "Fri Nov 22 1983 13:00:00 GMT-0600",
color: "#FFC080",
opacity: 50,
startLabel: "add",
endLabel: "comment",
// theme: theme,
cssClass: 't-highlight1'
}),
new Timeline.PointHighlightDecorator({
date: "Fri Nov 22 1963 14:38:00 GMT-0600",
color: "#FFC080",
opacity: 50,
//theme: theme,
cssClass: 'p-highlight1'
}),
new Timeline.PointHighlightDecorator({
date: "Sun Nov 24 1963 13:00:00 GMT-0600",
color: "#FFC080",
opacity: 50
//theme: theme
})
*/ ];
}
tl = Timeline.create(document.getElementById("history"),
bandInfos, Timeline.HORIZONTAL);
tl.loadXML("history.xml", function(xml, url)
{ eventSource.loadXML(xml, url); });
//tl.timeline_start = new Date(Date.UTC(1894, 0, 1));
//tl.timeline_stop = new Date(Date.UTC(2020, 0, 1));
}
var resizeTimerID = null;
function onResize() {
if (resizeTimerID == null) {
resizeTimerID = window.setTimeout(function() {
resizeTimerID = null;
tl.layout();
}, 500);
}
}
If it is time consuming to figure out the mistake in above code, Can I
request you to share your working piece of code if it is not a problem
for you?
Thanks & Regards,
Nitin
On Jun 24, 2:47 am, Jonas Wagner <[email protected]> wrote:
> Hello Nitin,
>
> > However, I am not able to lock the timeline within start and end
> > dates. I can scroll beyond the start and end dates specified by
> > timeline_start and timeline_stop attributes of Theme object.
>
> I don't know what's the correct way to do it... however, in our code we
> set the timeline_start and timeline_stop attributes of the Timeline
> object (not the Theme object) and it works fine. Maybe try this?
>
> Another thing to try would be to add your theme to all of your bands,
> not just the first.
>
> Hope this helps,
> Jonas
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
