Supportnet Computer
Planet of Tech

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

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?

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.

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.ä....

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">
& 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
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...

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".

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)

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?

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>

Antwort 16 von Fleetwood

ich merk gerade das ist in jedem browser anders...
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):

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...?

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:
document.getElementById(b2).removeChild(document.getElementById(b2).lastChild); 

in der 4letzten Zeile heißen.