Entry
How can I script an updatable time line?
Feb 13th, 2001 05:48
Martin Honnen,
Here is an example which shows the dhtml programming needed for NN4 (in
particular), NN6 and IE4+. It is not rolling hours at 24/00 but that is
left to the reader to complete.
<HTML>
<HEAD>
<SCRIPT>
//defaults
TimeLine.prototype.startHour = new Date().getHours();
TimeLine.prototype.endHour = new Date().getHours() + 2;
TimeLine.prototype.interval = 30;
if (document.layers) {
var html = '';
html += '<STYLE>';
html += '.timeLine { position: relative; }';
html += '<\/STYLE>';
document.write(html);
}
function TimeLine (args) {
for (var p in args)
this[p] = args[p];
this.step = this.endHour - this.startHour;
this.id = TimeLine.elements.length;
TimeLine.elements[this.id] = this;
this.writeHTML();
}
function TimeLine_writeHTML () {
var html = '';
html += '<A HREF="javascript: void 0"';
html += ' ONCLICK="TimeLine.elements[' + this.id + '].changeHours(-'
+ this.step + ');';
html += ' return false;"';
html += '>';
html += 'back';
html += '<\/A> ';
this.layerID = 'TL' + this.id;
html += '<SPAN ID="' + this.layerID + '"';
if (document.layers)
html += ' CLASS="timeLine"';
html += '>';
html += this.formatTimeLine();
html += '<\/SPAN>';
html += ' <A HREF="javascript: void 0"';
html += ' ONCLICK="TimeLine.elements[' + this.id + '].changeHours('
+ this.step + ');';
html += ' return false;"';
html += '>';
html += 'forward';
html += '<\/A>';
document.write(html);
if (document.layers)
this.element = document[this.layerID];
else if (document.all)
this.element = document.all[this.layerID];
else if (document.getElementById)
this.element = document.getElementById(this.layerID);
}
TimeLine.prototype.writeHTML = TimeLine_writeHTML;
function TimeLine_formatTimeLine () {
var html = '';
for (var t = this.startHour; t <this.endHour; t++) {
html += this.formatTime(t, 0) + ' - ';
for (var m = this.interval; m < 60; m += this.interval)
html += this.formatTime(t, m) + ' - ';
}
html += this.formatTime(this.endHour, 0);
return html;
}
TimeLine.prototype.formatTimeLine = TimeLine_formatTimeLine;
function TimeLine_formatTime (hours, minutes) {
var html = '';
html += hours < 10 ? '0' + hours : hours;
html += ':';
html += minutes < 10 ? '0' + minutes : minutes;
return html;
}
TimeLine.prototype.formatTime = TimeLine_formatTime;
function TimeLine_changeHours (hours) {
this.startHour += hours;
this.endHour += hours;
this.update();
}
TimeLine.prototype.changeHours = TimeLine_changeHours;
function TimeLine_update () {
if (document.layers) {
if (!this.element.ol) {
var ol = this.element.ol = new Layer (this.element.document.width,
this.element);
ol.clip.width = this.element.document.width;
ol.clip.height = this.element.document.height;
ol.visibility = 'show';
this.element.visibility = 'hide';
}
var ol = this.element.ol;
ol.document.open();
ol.document.write(this.formatTimeLine());
ol.document.close();
}
else
this.element.innerHTML = this.formatTimeLine();
}
TimeLine.prototype.update = TimeLine_update;
TimeLine.elements = new Array();
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
var tl = new TimeLine();
</SCRIPT>
<BR>
<SCRIPT>
var tl2 = new TimeLine ({
startHour: 10,
endHour: 13,
interval: 15
});
</SCRIPT>
</BODY>
</HTML>
