nicht angemeldet
[OBJ].style.backgroundImage + ie = impossible?
0 0 0 Code via DOM != identischer code direkt in HTML??? HÄ??
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0
0
[OBJ].style.backgroundImage + ie = impossible?
Gunnar BittersmannGleich zum Punkt:
<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";
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 line1 = document.createElement("tr");
table1.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 line2 = document.createElement("tr");
table2.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>
Ich weiß, es ist nicht 100%ig opitmiert. Aber im Firefox funktioniert es. Jedoch will der Internet Explorer partou die Hintergrundgrafiken nicht laden.
Kann mir jemand sagen, wieso? (ich verzweifel hier echt)
Internet Explorer 7 sowie 8 bilden zwar die tabellen und elemente voll aus, aber es wird keine einzigste der darin enthaltenen Grafiken geladen.
-
Hallo,
Gleich zum Punkt:
» 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 line1 = document.createElement("tr"); > table1.appendChild(line1);Ich weiß, es ist nicht 100%ig opitmiert. Aber im Firefox funktioniert es. Jedoch will der Internet Explorer partou die Hintergrundgrafiken nicht laden.
Internet Explorer 7 sowie 8 bilden zwar die tabellen und elemente voll aus, aber es wird keine einzigste der darin enthaltenen Grafiken geladen.
ich bin überrascht.
Ich dachte immer, IE würde - völlig standardkonform - darauf bestehen, seine tr-Elemente in einem tbody-Element (oder thead- oder tfoot-Element) haben zu wollen und nicht als Kind eines table-Elementes. Ich hielte mich an diese Regel, auch wenn andere Browser großzügiger sind.
Freundliche Grüße
Vinzenz
-
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>-
So. habe jetzt einfach mal dieBar.barHtmlObject.outerHTML in nem textfeld ausgegeben. Kurioserweise ...
<DIV style="WIDTH: 400px; HEIGHT: 20px; FONT-SIZE: 1px; OVERFLOW: hidden"><TABLE border=0 width="100%" cellspacing="0" cellpadding="0"> <TBODY style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px"> <TR> <TD style="BACKGROUND-IMAGE: url(barimg1.png); WIDTH: 9px; HEIGHT: 20px"></TD> <TD style="BACKGROUND-IMAGE: url(barimg2.png); WIDTH: 383px"></TD> <TD style="BACKGROUND-IMAGE: url(barimg3.png); WIDTH: 8px"></TD></TR></TBODY></TABLE> <TABLE style="POSITION: relative; TOP: -18px" border=0 cellspacing="0" cellpadding="0"> <TBODY style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px"> <TR> <TD style="WIDTH: 9px; HEIGHT: 20px"></TD> <TD style="BACKGROUND-IMAGE: url(barimg4.png); WIDTH: 0px; BACKGROUND-REPEAT: repeat-x; HEIGHT: 18px"> <DIV style="WIDTH: 0px; OVERFLOW: hidden"></DIV></TD> <TD style="BACKGROUND-IMAGE: url(barimg5.png); WIDTH: 8px; BACKGROUND-REPEAT: no-repeat"></TD></TR></TBODY></TABLE></DIV>dieser Code funktioniert FEHLERFREI! Es ist exakt der Code, der von javascript generiert wird. Trotzdem funktioniert die direkte ausgabe via appendChild nicht so, wie diese variante in direkter Ausgabe.
Die Codes sind absolut 100%ig identisch. Aber IIIIIIIIRGENDWAS muss ja dazu führen, dass die DOM-Ausgabe nicht identisch ist mit der HTML-Ausgabe.
HILFE!!!
-
Hi,
dieser Code funktioniert FEHLERFREI! Es ist exakt der Code, der von javascript generiert wird. Trotzdem funktioniert die direkte ausgabe via appendChild nicht so, wie diese variante in direkter Ausgabe.
Dann wird's vielleicht langsam mal Zeit, uns endlose Code-Wüsten zu ersparen, und dafür „funktioniert nicht“ erst mal genauer zu erklären bzw. auch selber zu untersuchen.
Fehlermeldungen?
Was sagt ein DOM-Inspector?
...?MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
im IE gibts keinen dom-inspector (oder ich weiß nicht, wo ich den finden soll).
Der Javascript-Code ist fehlerfrei. Er wird ohne mucken ausgeführt.
Es geht mir um die Anzeige.
http://77.190.150.43/bar.php
Dort funktioniert alles im Firefox wie gewünscht. (Obere bar zählt rauf, darunter in einem textfeld innerHTML des Bar-Elements (im firefox natürlich undefined) und darunter der im IE via innerHTML ausgegebenen codes direkt im Quellcode (unverändert)). Es enstehen freiräume, welche abernicht enstehen dürften.
-
Hi,
im IE gibts keinen dom-inspector (oder ich weiß nicht, wo ich den finden soll).
[F12]
Es enstehen freiräume, welche abernicht enstehen dürften.
Als erste wäre der Quirks Mode zu umgehen.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right? -
Hi,
Es geht mir um die Anzeige.
http://77.190.150.43/bar.php
Gibt's eigentlich einen Grund, warum du hier überhaupt Tabellen zur Anzeige wählst - anstatt schlicht und einfach in einem Div-Element o.ä. die Position eines Hintergrundbildes zu verschieben?
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Wüßte nicht, wie ich dann die halbtransparenz der abgerundeten ecken beibehalten soll bei dem x-repeateten roten hintergrund des mittelteils.
habe jetzt via der über google gefundenen reset.css (tipp von kumpel) 2 weitere css-angaben hinzugefügt. einmal padding = 0 zu allen td-elementen und border-collapse = collapse für die Tabellen.
-
Hi,
Wüßte nicht, wie ich dann die halbtransparenz der abgerundeten ecken beibehalten soll bei dem x-repeateten roten hintergrund des mittelteils.
In dem du das Hintergrundbild schon mit einer entsprechenden „abgerundeten Ecke“ rechts ausstattest, die einfach bis zum rechten Rand des Elements wandern kann.
Die „linke runde Ecke“ kann einfach vor/über dem Element platziert werden.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Die linke ecke ist bereits auf dem "rahmen" plaziert (1 bild)
ich will die bar aber dynamisch frei wählbar breit haben. da kann ich nicht ein 500000 pixel breites bild für den inneren bereich reinpacken. weil die bar könnte natürlich auch 500.000 pixel breit sein. (ja. unwahrscheinlich. aber möglich.)
ich habe das problem jetzt ja beheben können. Und ob tabellen oder nicht. Solange die Ausgabe in den 4 bekanntesten browsern (Firefox, IE, Opera, Chrome) korrekt und identisch angezeigt wird, macht es doch keinen unterschied, ob tables oder divs, oder irre ich da?
Außerdem, versteh eh noch nicht wirklich, wie du das mit hintergrundbild positionieren umsetzen wollen würdest. Ich hatte schon probleme, es so umzusetzen. o_O
-
Hi,
ich will die bar aber dynamisch frei wählbar breit haben. da kann ich nicht ein 500000 pixel breites bild für den inneren bereich reinpacken. weil die bar könnte natürlich auch 500.000 pixel breit sein. (ja. unwahrscheinlich. aber möglich.)
Dann könnte man immer noch ein weiteres Element hineinschachteln, welche lediglich eine Hintergrundfarbe bekommt - und mit *einer* Grafik, einem runden „Ball“, auskommen.
([element])
^linke Hälfte des Balls
^dynamisch breites Element
^rechte Hälfte des Balls.
([element_entsprechend_breiter_gemacht])ich habe das problem jetzt ja beheben können. Und ob tabellen oder nicht. Solange die Ausgabe in den 4 bekanntesten browsern (Firefox, IE, Opera, Chrome) korrekt und identisch angezeigt wird, macht es doch keinen unterschied, ob tables oder divs, oder irre ich da?
Na ja, kurzer JavaScript-Code, anstatt aufwendigem Monster, welches komplette Tabellen erzeugen und stylen muss, hätte ja vielleicht auch seine Vorteile.
Außerdem, versteh eh noch nicht wirklich, wie du das mit hintergrundbild positionieren umsetzen wollen würdest.
Über die Eigenschaft background-position, was denn sonst?
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Om nah hoo pez nyeetz, ChrisB!
Außerdem, versteh eh noch nicht wirklich, wie du das mit hintergrundbild positionieren umsetzen wollen würdest.
Über die Eigenschaft background-position, was denn sonst?
das läuft aber auf ein sehr breites Hintergrundbild hinaus, denn afaik kann man nicht sagen wiederhole die Hintergrundgrafik in x-Richtung aber nur nach rechts.
Matthias
--
Wer ein Problem beschreiben kann, hat es schon halb gelöst. (Julian Huxley)
-
Hi,
das läuft aber auf ein sehr breites Hintergrundbild hinaus,
Zu diesem Einwand, den Griever auch schon brachte, schlug ich ja gerade bereits eine Alternative vor - die immer noch mit wesentlich weniger Elementen und damit auch weniger Code auskommen dürfte, als das Tabellen-Gebastel.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Wie willst du mittels DIVS 3 elemente so nebeneinander positionieren, dass diese die breite und höhe nach vorgabe annehmen und dabei linksbündig bleiben? Ich habs versucht und bin dran gescheitert.
daher tabellen.
-
Hi,
Wie willst du mittels DIVS 3 elemente so nebeneinander positionieren, dass diese die breite und höhe nach vorgabe annehmen und dabei linksbündig bleiben?
Schrieb ich irgendwas von „nebeneinander“?
Absolute Positionierung existiert. Und ist für Fälle wie den hier vorliegenden durchaus sehr gut geeignet.
Ich habs versucht und bin dran gescheitert.
Selbst ohne absolute Positionierung, wäre floaten oder Darstellung als inline-block auch kein allzu großes Kunststück - wenn Grundlagenwissen im Umgang mit CSS vorhanden wäre.
daher tabellen.
Also das übliche „ich weiß es nicht besser“-Argument.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
absolut positionieren kommt nicht in frage, da es im textfluss oder im seiteninhalt sein soll. absolute positionierung funktoniert nur innerhalb, wenn das elternelement ebenfalls absolut positioniert ist.
float habe ich probiert. das funktioniert ebenfalls nicht.
inlineblock wird nicht von allen browsern unterstützt.
:) also von nicht-besser-wissen is nich ganz die rede :)
-
Om nah hoo pez nyeetz, Griever!
absolut positionieren kommt nicht in frage, da es im textfluss oder im seiteninhalt sein soll. absolute positionierung funktoniert nur innerhalb, wenn das elternelement ebenfalls absolut positioniert ist.
Das ist falsch. Richtig ist: "... wenn das Elternelement eine von "static" abweichende Positionierung hat."
Matthias
--
Wer ein Problem beschreiben kann, hat es schon halb gelöst. (Julian Huxley)
-
Hi,
absolut positionieren kommt nicht in frage, da es im textfluss oder im seiteninhalt sein soll. absolute positionierung funktoniert nur innerhalb, wenn das elternelement ebenfalls absolut positioniert ist.
Quark.
Beschäftige dich mit CSS-Grundlagen.float habe ich probiert. das funktioniert ebenfalls nicht.
„Funzt nicht“ ist keine brauchbare Problembeschreibung, sondern Müll - und das solltest du auch ganz genau wissen.
inlineblock wird nicht von allen browsern unterstützt.
Doch, in für diesen Fall ausreichendem Maße.
:) also von nicht-besser-wissen is nich ganz die rede :)
Stimmt, ich korrigere das zu „so gut wie überhaupt keine Ahnung von CSS“.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
*hust*
würde ich garkeine ahnung von css haben, hätte ich das ding hier nich schon zu 90% fertig gemacht und mich dann erst wegen einem problem gemeldet, sondern wär glei gekommen und hätte gefragt, wie hier was geht.
Also halt ma schön die luft an!
Ich habe hier explizit ein Problem gehabt, was ich aber bereits selbst gelöst habe. Diskussionen über die Kompatibilität und dessen "Optimierung" waren garnicht gefragt. Jetzt noch drauf rumreiten, dass ich nicht ALLES über CSS wissen kann, grenzt schon an Hohn. Also ma schön Ball flach halten.
Das, was ich da gebastelt habe, funktioniert in so gut wie allen browsern, die CSS, Javascript und der Grafikanzeige mächtig sind. Und es soll in allen browsern RUNDE ecken mit (!) Antialias haben. Und das bringen -moz-border-radius oder ähnliche css-angaben der art nicht mit sich.
Meine Variante Funktioniert. Meine Variante arbeitet Multipart-Fähig (Mehrere in folge anlegen). Meine Variante benutzt Tabellen, na und? Es ist eine unumstößliche Tatsache, dass meine Variante funktioniert.
Streitigkeiten über CSS-Kompatibilität wenn man es so oder so machen würde, sind zwar schön und gut. Aber ich habe das, was ich erreichen wollte, crossbrowser-fähig fertiggestellt. Warum sollte ich das Ganze jetzt nochmal von vorne beginnen? Und "In ausreichend" ist keine ausreichend weitläufige Umkreisung der Zielbrowser. Daher > Grafiken. Denn -moz-border-radius wird, wie es die angabe selber ja schon verrät, derzeit nur von der Mozilla-Engine und einigen "fehltretern" kleinerer Browser unterstützt.
So. Mein Statement dazu.
-
Hi,
Aber ich habe das, was ich erreichen wollte, crossbrowser-fähig fertiggestellt. Warum sollte ich das Ganze jetzt nochmal von vorne beginnen?
Mein Ziel an deiner Stelle wäre, mir so viel Grundlagenwissen anzueignen, dass ich das nächste Mal gleich von Beginn eine Lösung entwickeln kann, die nicht derart umständlich ist.
Denn -moz-border-radius wird, wie es die angabe selber ja schon verrät, derzeit nur von der Mozilla-Engine und einigen "fehltretern" kleinerer Browser unterstützt.
Anruf für dich - ein Dieter Nuhr möchte dich sprechen.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
ich lerne schon noch dazu. jedoch nicht, indem mir andere sagen, wie man es perfekt macht. ich muss mich etappenweise ranarbeiten, bis ich es wirklich intuitiv richtig mache. wenn mir einer sagt: das ist so und so aber erst richtig, dann bringt mir das garnix. Weil das is wie bei einem mmorpg wenn man sich an ein gerade mal zu starkes NPC ranwagt.
Ich lerne es eben nur etappenweise. die OOP-Variante hab ich auch nur stück für stück mir angeeignet. Das is quasi mein erster OOP-Prototyp. Vorher hab ich alles mit innerHTML und Co gelöst.
und wenn man bedenkt, dass ich vor etwa 6 Jahren aus Langeweile in einem geschützten Lan-netzwerk mit batch und html sowie javascript ein recht annehmbaren Moorhuhn-clone gebastelt habe, der ne highscore-liste hatte, da kann man ja wohl ma ruhig sagen: okay. is nich perfekt, aber läuft.
Also ob das jetzt ideal gelöst ist oder nicht, sei mal dahingestellt. Ich hab daraus die Teile gelernt, die ich lernen wollte. Nämlich einige Optionen im OOP. Dass mit den Browserkompatibilitäten war eher, dass am ende auch was brauchbares rauskommt.
-
-
@@Griever:
nuqneH
Denn -moz-border-radius wird, wie es die angabe selber ja schon verrät, derzeit nur von der Mozilla-Engine und einigen "fehltretern" kleinerer Browser unterstützt.
Das ist nicht dein Ernst, oder?
Webkits haben natürlich ihren eigen Präfix '-webkit-' und unterstützen '-webkit-border-radius'.
Die aktuellen Versionen von Chrome, Firefox, IE, Opera und Safari unterstützen aber auch die CSS-3-Eigenschaft 'border-radius' ohne Präfix, die bevorzugt vor den browserspezifischen Eigenschaften mit Präfixen zu verwenden ist.
Und natürlich verwenden die Browser beim Rendern auch Anti-Aliasing.
http://bittersmann.de/tests/border-radius
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Hi,
Denn -moz-border-radius wird, wie es die angabe selber ja schon verrät, derzeit nur von der Mozilla-Engine und einigen "fehltretern" kleinerer Browser unterstützt.
Das ist nicht dein Ernst, oder?
Webkits haben natürlich ihren eigen Präfix '-webkit-' und unterstützen '-webkit-border-radius'.
Die aktuellen Versionen von Chrome, Firefox, IE, Opera und Safari unterstützen aber auch die CSS-3-Eigenschaft 'border-radius' ohne Präfix, die bevorzugt vor den browserspezifischen Eigenschaften mit Präfixen zu verwenden ist.
Ist ja nicht so, als ob ich die im Beispiel nicht schon eingesetzt hätte ...
Aber die Bereitschaft, was dazu zu lernen, scheint bei Griever ziemlich gering zu sein.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
-
-
-
-
-
Hi,
hier mal ein Beispiel, wie man das für moderne Browser umsetzen könnte, ganz ohne Grafiken:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Progressbars</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> #progressbar1 { width:500px; height:20px; padding:1px; border:1px solid #000; } #progressbar1 span { background:red; display:inline-block; height:20px; } #progressbar1, #progressbar1 span {-moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; } </style> <script type="text/javascript"> /* <![CDATA[ */ var span, progress = 0; window.onload = function() { span = document.getElementById("progressbar1").firstChild; document.onclick = function() { progress += 10; if(progress > 100) { progress = 0; } span.style.width = progress+"%"; } document.documentElement.title = "Klicken, um Progressbar vorwärts zu bewegen"; document.onclick(); } /* ]]> */ </script> </head> <body> <div id="progressbar1"><span></span></div> </body> </html>Getestet in (halbwegs) aktuellen Firefox, Opera, Safari und Chrome, sowie IE9-Modus im IE-Tester.
Ebenfalls im IETester zumindest soweit „abwärts-kompatibel“ bis runter zum 5.5er, dass wenigstens der Balken und Fortschritt angezeigt werden, wenn auch nicht „hübsch rund“.Wenn man nicht will, dass das bei 0% gar nichts anzeigt, kann man eine min-width für den Span angeben; oder den JavaScript-Teil, der den Prozentwert setzt, dafür sorgen lassen, dass der Bereich von Null bis 100% nicht über die komplette Breite umgesetzt, sondern eine Startbreite hinzugenommen wird.
Weitere Feinheiten, wie bspw. Umgang mit gebrochenden Prozentwerten und ggf. notwendige Rundung, insb. was den exakten Abschluss bei 100% angeht, bitte selber erarbeiten.Und wenn jemandem wirklich das Herz blutet, weil veraltete Browser das nicht hübsch abgerundet, sondern eckig anzeigen - der kann dann immer noch ein paar Grafiken hinzunehmen, wenn er den Extra-Aufwand nicht scheut.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
@@ChrisB:
nuqneH
hier mal ein Beispiel, wie man das für moderne Browser umsetzen könnte […]
<div id="progressbar1"><span></span></div>'div' passt nicht zu „modern“. HTML5 sieht das 'progress'-Element vor.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
-
Om nah hoo pez nyeetz, Griever!
Wie willst du mittels DIVS 3 elemente so nebeneinander positionieren, dass diese die breite und höhe nach vorgabe annehmen und dabei linksbündig bleiben? Ich habs versucht und bin dran gescheitert.
Falls die Umrandung des Fortschrittsbalkens von Bedeutung ist, würde ich möglicherweise auf 4 Elemente ausweichen.
<span id="gefüllt"><span id="ungefüllt">
für gefüllt ein ::before-Pseudoelement mit Hintergrund Rand/Rand mit linker Ballhälfte und ein ::after-Pseudoelement mit dem Hintergrund Rand/Rand mit rechter Ballhälfte.
und dann macht man "gefüllt" so breit wie es sein soll und das ungefüllte immer kleiner.
Matthias
--
Wer ein Problem beschreiben kann, hat es schon halb gelöst. (Julian Huxley)
-
-
-
-
-
-
-
-
-
-
-
-
-