Supportnet / Forum / Webseiten/HTML
Statusbalken(-generator), o.ä.
Frage
Jo, hi Leute!
Bräuchte ne Statusanzeige in Form eines Balkens für meine Seite.
Den Fortschritt bildlich darzustellen ist halt doch besser...
Gibts vielleicht nen Generator dazu? (d.h. ich gebe ein 75% welche Farben der benutzen soll, und wie breit dat ding insgesamt sein sollte, und dann spukt der mir so´n ding aus?). und wenn nicht, wäre ich schon mit ner Art von Tutorial zufrieden, kann doch nicht sein, dass das so schwer ist, wenn es so viele Seiten/Leute benutzen...
Antwort 1 von disco
moin
für was denn?
für den fortschritt beim laden deiner HTML-seite?
oder für ne art von umfrage, oder so?
bzw. sag mal was du für ne seite hast, und welche sprachen du da verwendest.
g,
disco
für was denn?
für den fortschritt beim laden deiner HTML-seite?
oder für ne art von umfrage, oder so?
bzw. sag mal was du für ne seite hast, und welche sprachen du da verwendest.
g,
disco
Antwort 2 von Fleetwood
ne, für nen Fortschritt eines Videos, dass wir (ich und mein Team) machen.
Warum isn da wichtig welche Sprache ich benutze?
Warum isn da wichtig welche Sprache ich benutze?
Antwort 3 von disco
meinte die prorgamiersprachen (php usw.).
bei videos (mit streamen) usw. kenn ich mich leider nicht aus. aber für die leute die sich damit auskennen wird es bestimmt wichtig sein, was das für nen format ist und ob das gestreamt werden soll.
bei videos (mit streamen) usw. kenn ich mich leider nicht aus. aber für die leute die sich damit auskennen wird es bestimmt wichtig sein, was das für nen format ist und ob das gestreamt werden soll.
Antwort 4 von Fleetwood
nein... ihr versteht mich ja gar nicht ;)
ich will einfach irgendwo eingeben "57%" und dann wird auf der HTML Seite eine entsprechende Grafik gezeigt;
und nicht wie weit das Video gestreamt ist, o.ä....
ich will einfach irgendwo eingeben "57%" und dann wird auf der HTML Seite eine entsprechende Grafik gezeigt;
und nicht wie weit das Video gestreamt ist, o.ä....
Antwort 5 von rfb
ganz einfach mit JavaScript:
<html><head><title>Fortschritt</title>
<script type="text/javascript">
function balken(p,w,f1,f2) {
document.getElementById("balken1").style.display="block";
document.getElementById("balken1").style.width=w+"px";
document.getElementById("balken1").style.backgroundColor=f1;
document.getElementById("balken2").style.display="block";
document.getElementById("balken2").style.textAlign="right";
document.getElementById("balken2").style.width=p+"%";
document.getElementById("balken2").style.backgroundColor=f2;
document.getElementById("balken2").style.color=f1;
document.getElementById("balken2").firstChild.data=p+"%";
}
</script>
</head><body onload="balken(15,500,´#ff0´,´#00f´)">
<span id="balken1"><span id="balken2"></span></span>
</body></html>
Antwort 6 von rfb
ah, typischer SN-Fehler:
zwischen <span id="balken2"></span> muss etwas stehen, damit das Script überhaupt ein "firstChild" ändern kann, hier stand <span id="balken2">
zwischen <span id="balken2"></span> muss etwas stehen, damit das Script überhaupt ein "firstChild" ändern kann, hier stand <span id="balken2">
& n b s p ;
</span> (ohne Leerzeichen), das hat das SN verschluckt.Antwort 7 von Fleetwood
interessant... und bei firstChild.data geb ich die prozentzahl ein?
Antwort 8 von rfb
nein, bei firstChild.data schreibt das Script selbst die Prozentzahl hin, wenn diese Zahlenausgabe unerwünscht ist einfach die Zeile löschen.
Aufgerufen wird das Script mit
wobei
15=Prozentwert
500=Breite der Anzeige in Pixel
#ff0=Hintergrund-Farbe
#00f=Vordergrund-Farbe
(diese Angaben kannst du natürlich beliebig anpassen)
Aufgerufen wird das Script mit
balken(15,500,´#ff0´,´#00f´)
(hier im onload-event des body-tag)wobei
15=Prozentwert
500=Breite der Anzeige in Pixel
#ff0=Hintergrund-Farbe
#00f=Vordergrund-Farbe
(diese Angaben kannst du natürlich beliebig anpassen)
Antwort 9 von Fleetwood
joo. danke vielmals!
Antwort 10 von Fleetwood
hm... tut mir Leid, aber hab das Mal als html datei gespeichert, und da kriege ich nur n weißen Bildschirm...
vielleicht guckste nochmal drüber, vielleicht ist da noch irgendwo n fehler...
vielleicht guckste nochmal drüber, vielleicht ist da noch irgendwo n fehler...
Antwort 11 von Fleetwood
und es wird was von wegen fehler in zeile 19 zeichen 15 (das ist im body-tag das b von balken) angezeigt...
"In diesem Skript ist ein Fehler aufgetreten".
"In diesem Skript ist ein Fehler aufgetreten".
Antwort 12 von rfb
der Fehler stammt aus dem Supportnet:
Ersetze die ´ durch das einfache Anführungszeichen, das da ursprünglich auch stand (zu finden rechts neben dem Ä auf der Tastatur)
Ersetze die ´ durch das einfache Anführungszeichen, das da ursprünglich auch stand (zu finden rechts neben dem Ä auf der Tastatur)
Antwort 13 von Fleetwood
jo jetzt gehts, danke!
Antwort 14 von Fleetwood
jojo, das sieht schon ganz so aus wie ich das haben wollte,danke nochmal, nur noch n kleines Problem, und zwar wenn man 0% eingibt, wird immer noch soviel angezeigt wie "0%" Platz einnimmt, verstehst du was ich meine?
Kriegt man das irgendwie hin, dass die "0.5%" links von dem Balken stehen oder ähnliches?
Kriegt man das irgendwie hin, dass die "0.5%" links von dem Balken stehen oder ähnliches?
Antwort 15 von Fleetwood
für alle anderen:
außerdem hab ich noch die Farbe für die Schrift eingefügt:
<html>
<head>
<title>Fortschritt</title>
<script type="text/javascript">
function balken(p,w,f1,f2,f3)
{
document.getElementById("balken1").style.display="block";
document.getElementById("balken1").style.width=w+"px";
document.getElementById("balken1").style.backgroundColor=f1;
document.getElementById("balken2").style.display="block";
document.getElementById("balken2").style.textAlign="center";
document.getElementById("balken2").style.width=p+"%";
document.getElementById("balken2").style.backgroundColor=f2;
document.getElementById("balken2").style.color=f3;
document.getElementById("balken2").firstChild.data=p+"%";
}
</script>
</head>
<body onload="balken(1,100,´#996600´,´#00FF00´,´white´)">
<span id="balken1"><span id="balken2">& n b s p ; </span></span>
</body>
</html>
außerdem hab ich noch die Farbe für die Schrift eingefügt:
<html>
<head>
<title>Fortschritt</title>
<script type="text/javascript">
function balken(p,w,f1,f2,f3)
{
document.getElementById("balken1").style.display="block";
document.getElementById("balken1").style.width=w+"px";
document.getElementById("balken1").style.backgroundColor=f1;
document.getElementById("balken2").style.display="block";
document.getElementById("balken2").style.textAlign="center";
document.getElementById("balken2").style.width=p+"%";
document.getElementById("balken2").style.backgroundColor=f2;
document.getElementById("balken2").style.color=f3;
document.getElementById("balken2").firstChild.data=p+"%";
}
</script>
</head>
<body onload="balken(1,100,´#996600´,´#00FF00´,´white´)">
<span id="balken1"><span id="balken2">& n b s p ; </span></span>
</body>
</html>
Antwort 16 von Fleetwood
ich merk gerade das ist in jedem browser anders...
firefox = korrekt
IE = Banane... so wie ichs oben beschrieben habe...
firefox = korrekt
IE = Banane... so wie ichs oben beschrieben habe...
Antwort 17 von rfb
ach, der IE und seine Macken!
Ich hab die Funktion nochmal überarbeitet (und auf FF, Opera und IE6 erfolgreich getestet):
In dieser Variante funktionierts in allen 3 Browsern.
Der IE hat das Problem, dass er nicht immer den Inhalt des firstChild erkennt um ihn zu ändern.
In dieser Variante werden nun einfach alle Childs gelöscht und ein neues Child (in Form eines Textknotens mit dem Prozentwert) erzeugt . Diese etwas umständliche Art klappt auch mit dem IE. Weiter Vorteil: das
Ich hab die Funktion nochmal überarbeitet (und auf FF, Opera und IE6 erfolgreich getestet):
function balken(p,w,f1,f2,f3) {
document.getElementById("balken1").style.display="block";
document.getElementById("balken1").style.width=w+"px";
document.getElementById("balken1").style.backgroundColor=f1;
document.getElementById("balken2").style.display="block";
document.getElementById("balken2").style.overflow="hidden";
document.getElementById("balken2").style.textAlign="right";
document.getElementById("balken2").style.width=p+"%";
document.getElementById("balken2").style.backgroundColor=f2;
document.getElementById("balken2").style.color=f3;
for (var j=0; j<document.getElementById("balken2").childNodes.length; j++) {
document.getElementById("balken2").removeChild(document.getElementById("balken2").lastChild);
}
document.getElementById("balken2").appendChild(document.createTextNode(p+"%"));
}
In dieser Variante funktionierts in allen 3 Browsern.
Der IE hat das Problem, dass er nicht immer den Inhalt des firstChild erkennt um ihn zu ändern.
In dieser Variante werden nun einfach alle Childs gelöscht und ein neues Child (in Form eines Textknotens mit dem Prozentwert) erzeugt . Diese etwas umständliche Art klappt auch mit dem IE. Weiter Vorteil: das
& n b s p;
ist damit nun überflüssig.Antwort 18 von Fleetwood
jo, danke für die Mühe!
Antwort 19 von Fleetwood
aber:
So lassen sich ja nicht MEHRERE dieser Statusbalken auf eine Seite packen...
Was müsste ich da noch verändern...?
So lassen sich ja nicht MEHRERE dieser Statusbalken auf eine Seite packen...
Was müsste ich da noch verändern...?
Antwort 20 von rfb
function balken(p,w,f1,f2,f3,b1,b2) {
document.getElementById(b1).style.display="block";
document.getElementById(b1).style.width=w+"px";
document.getElementById(b1).style.backgroundColor=f1;
document.getElementById(b2).style.display="block";
document.getElementById(b2).style.overflow="hidden";
document.getElementById(b2).style.textAlign="right";
document.getElementById(b2).style.width=p+"%";
document.getElementById(b2).style.backgroundColor=f2;
document.getElementById(b2).style.color=f3;
for (var j=0; j<document.getElementById(b2).childNodes.length; j++) {
document.getElementById(b2).removeChild(document.getElementById("balken2").lastChild);
}
document.getElementById(b2).appendChild(document.createTextNode(p+"%"));
}
einfach auch die IDs als Variable beim Aufruf übergeben
<body onload="balken(1,100,´#996600´,´#00FF00´,´white´,´balken1´,´balken2´)">
dann kannst du mit entsprechend vielen Aufrufen beliebig viele Statusbalken erzeugen, es müssen halt nur andere IDs in den span angegeben werden, denn mit denen identifiziert das Script das <span>-Element, das es ändern soll.
Du kannst die Aufrufe durch ; getrennt hintereinander in das onload="" setzen.
Antwort 21 von rfb
hoppla, ein "balken2" in der Funktion ist mir entwischt. es muss natürlich:
in der 4letzten Zeile heißen.
document.getElementById(b2).removeChild(document.getElementById(b2).lastChild);
in der 4letzten Zeile heißen.