nicht angemeldet
Gut. da hätten wir das geklärt. Habe es um die besagten TBody-Elemente ergänzt. Jetzt wird alles schonmal geladen.
Nur. Die positionierung/größenangaben der Tabellen werden nun zerrissen.
Woran liegt das?
<html>
<head>
<title></title>
<meta name="author" content="">
</head>
<body>
<script>
function bar(width,maximum,value,actualizer) {
var self = this;
this.actualizeInterval = 0;
this.actualizeStep = 0;
this.actualizeTo = 0;
this.wid = width;
this.max = maximum;
this.val = value;
if(typeof(actualizer) != "undefined") {
this.actualizeInterval = actualizer[0];
this.actualizeStep = actualizer[1];
this.actualizeTo = actualizer[2];
if(this.actualizeTo > this.max) {
this.actualizeTo = this.max;
}
this.actualizeIntervalStore = setInterval(function() {
if(self.val + self.actualizeStep < self.max && self.val + self.actualizeStep < self.actualizeTo) {
self.val += self.actualizeStep;
self.set(self.val);
}else{
self.set(self.actualizeTo);
clearInterval(self.actualizeIntervalStore);
}
},this.actualizeInterval);
}
this.barHtmlObject = document.createElement("div");
this.barHtmlObject.style.width = this.wid + "px";
this.barHtmlObject.style.height = "20px";
this.barHtmlObject.style.overflow = "hidden";
this.barHtmlObject.style.fontSize = "1px";
var table1 = document.createElement("table");
table1.setAttribute("width","100%");
table1.setAttribute("border","0");
table1.setAttribute("cellspacing","0");
table1.setAttribute("cellpadding","0");
this.barHtmlObject.appendChild(table1);
var tbody1 = document.createElement("tbody");
table1.appendChild(tbody1);
var line1 = document.createElement("tr");
tbody1.appendChild(line1);
this.cell1 = document.createElement("td");
this.cell1.style.width = "9px";
this.cell1.style.height = "20px";
line1.appendChild(this.cell1);
this.cell2 = document.createElement("td");
line1.appendChild(this.cell2);
this.cell3 = document.createElement("td");
this.cell3.style.width = "8px";
line1.appendChild(this.cell3);
var table2 = document.createElement("table");
table2.style.position = "relative";
table2.style.top = "-18px";
table2.setAttribute("border","0");
table2.setAttribute("cellspacing","0");
table2.setAttribute("cellpadding","0");
this.barHtmlObject.appendChild(table2);
var tbody2 = document.createElement("tbody");
table2.appendChild(tbody2);
var line2 = document.createElement("tr");
tbody2.appendChild(line2);
this.cell4 = document.createElement("td");
this.cell4.style.width = "9px";
this.cell4.style.height = "20px";
line2.appendChild(this.cell4);
this.cell5 = document.createElement("td");
this.cell5.style.backgroundRepeat = "repeat-x";
this.cell5.style.height = "18px";
this.cell5.style.width = "0px";
this.barHtmlObject.sizeElement = document.createElement("div");
this.barHtmlObject.sizeElement.style.width = "0px";
this.barHtmlObject.sizeElement.style.overflow = "hidden";
this.cell5.appendChild(this.barHtmlObject.sizeElement);
line2.appendChild(this.cell5);
this.cell6 = document.createElement("td");
this.cell6.style.width = "8px";
this.cell6.style.backgroundRepeat = "no-repeat";
line2.appendChild(this.cell6);
var imgpreloader1 = new Image();
imgpreloader1.src = "barimg1.png";
imgpreloader1.style.display = "none";
var imgpreloader2 = new Image();
imgpreloader2.src = "barimg2.png";
imgpreloader2.style.display = "none";
var imgpreloader3 = new Image();
imgpreloader3.src = "barimg3.png";
imgpreloader3.style.display = "none";
var imgpreloader4 = new Image();
imgpreloader4.src = "barimg4.png";
imgpreloader4.style.display = "none";
var imgpreloader5 = new Image();
imgpreloader5.src = "barimg5.png";
imgpreloader5.style.display = "none";
this.barHtmlObject.appendChild(imgpreloader1);
this.barHtmlObject.appendChild(imgpreloader2);
this.barHtmlObject.appendChild(imgpreloader3);
this.barHtmlObject.appendChild(imgpreloader4);
this.barHtmlObject.appendChild(imgpreloader5);
this.cell1.style.backgroundImage = "url('barimg1.png')";
this.cell2.style.backgroundImage = "url('barimg2.png')";
this.cell3.style.backgroundImage = "url('barimg3.png')";
this.cell5.style.backgroundImage = "url('barimg4.png')";
this.cell6.style.backgroundImage = "url('barimg5.png')";
this.invalidate = function() {
this.cell1.style.backgroundImage = "url('barimg1.png')";
this.cell2.style.backgroundImage = "url('barimg2.png')";
this.cell3.style.backgroundImage = "url('barimg3.png')";
this.cell5.style.backgroundImage = "url('barimg4.png')";
this.cell6.style.backgroundImage = "url('barimg5.png')";
}
this.set = function(value) {
var calculatedWidth = Math.floor((self.wid - 18) * (value / self.max));
self.barHtmlObject.sizeElement.style.width = calculatedWidth + "px";
self.val = value;
}
this.set(this.val);
}
var autoCountUp = new Array(150,22,1000);
// Auto-CountUp-Array.
// Erster Wert = Intervall. (250 millisekunden)
// Zweiter Wert = Erhöhungs-Wert.
// Dritter Wert = Maximalwert. (Wird ausgeglichen, wenn er über dem eigentlichen Bar-Maximalwert liegt)
var dieBar = new bar(400,1000,0,autoCountUp);
// Erstellung des Bar-Objektes
// Erster Wert = Breite der Bar in Pixeln (Gesamtbreite)
// Zweiter Wert = Bar-Maximalwert
// Dritter Wert = Auto-CountUp-Array.
// Vorhandene Funktionen:
// dieBar.barHtmlObject = Das HTML-Element, welches mit appendChild eingebaut werden kann.
// dieBar.barHtmlObject.sizeElement = Das direkte HTML-Element, welches für die Breite der Bar verantwortlich ist. (ACHTUNG! -18 pixel!)
// dieBar.set(...) = dieBar.set(50) setzt den aktuellen wert (nicht die breite!) auf 50.
document.body.appendChild(dieBar.barHtmlObject);
dieBar.invalidate();
</script>
</body>
</html>
Gunnar Bittersmann