✔ Ladebalken - kurze, simple Frage/Bitte

  • Themenstarter Themenstarter Comenius
  • Beginndatum Beginndatum
C

Comenius

Guten Morgen,

ich habe mir ein JS besorgt und erstmal alles unnötige herausgeschmissen.
Nun möchte ich gerne, dass in diesem Ladebalken keine Prozentzahlen mehr angezeigt werden.
Füge ich allerdings nichts zwischen: <span></span> ein, funktioniert es nicht mehr.

Wäre nett wenn mir dabei jemand behilflich sein könnte, denn JS ist für mich eine andere Welt...

HTML: 
<style type="text/css">
#ladebalken{
width:               170px;
border:                1px solid #000;
background:           #c0c0c0;
height:                10px;
}
#ladebalken p{
height:                10px;
display:               block;
background:            #0f0;
margin:                0px;
}
</style>

</head>
<body>

<div id="ladebalken"><p><span>a</span></p></div>

<script type="text/javascript">
<!--
oLadebalken = document.getElementById("ladebalken").firstChild;
function progress(value){
oLadebalken.firstChild.firstChild.nodeValue = oLadebalken.style.width = value + "%";
}
countUpP = 0;
function countUp(){
if(countUpP == 100) return;
progress(++countUpP);
window.setTimeout("countUp()", 100);
}
countUp();
// -->
</script>

Danke

Gruss
Commi

//edit

Habe es durch Spielereien und logisches Ableiten, bzw. zusammenreimen hinbekommen.

HTML: 
<style type="text/css">
#ladebalken{
width:               170px;
border:                1px solid #000;
background:           #c0c0c0;
height:                10px;
}
#ladebalken p{
height:                10px;
display:               block;
background:            #0f0;
margin:                0px;
}
</style>

</head>
<body>

<div id="ladebalken"><p><span></span></p></div>

<script type="text/javascript">
<!--
oLadebalken = document.getElementById("ladebalken").firstChild;
function progress(value){
oLadebalken.firstChild.nodeValue = oLadebalken.style.width = value + "%";
}
countUpP = 0;
function countUp(){
if(countUpP == 100) return;
progress(++countUpP);
window.setTimeout("countUp()", 100);
}
countUp();
// -->
</script>

Da zweimal "firstChild" hintereinander standen und diese wohl von dem div-tag ausgingen, dache ich mir, sind damit wohl <p> und <span> gemeint.

Ich brauche nun zwar keine optischen Zahlen/Buchstaben mehr einfügen, allerdings benötigt das Script immer noch die leeren span-elemente.

Nun wieder zu meinem ersten Post: Wie muss man dies umändern, dass das Ganze nur noch über die <div>-Box läuft?

Könnte mir evtl. auch jemand die paar Zeilen etwas genauer erläutern? Es ist ja nicht so, dass ich es nicht verstehen will - im Gegenteil...

Danke

Gruss
Commi
 
Das Skript funktioniert wie folgt: Es wird ein schwarz umrandetes Elternelement (das <div>) mit grauem Hintergrund erzeugt mit einer festen Breite. Darin befindet sich ein Kind-Element (das <p>) mit grünem Hintergrund, das in der Breite von 0 bis 100% verändert wird.

Darum kannst du das Kind-Element nicht weglassen. Denn dann müsstest du die Breitenangaben des <div> ändern und das hätte den Effekt, dass auch der schwarze Rand sich in der Größe verändert, und zwar über die komplette Breite des Eltern-Elements.
Code: 
 <body> 
<div id="ladebalken"></div>
<script type="text/javascript">
oLadebalken = document.getElementById("ladebalken"); 
function progress(value)
{ oLadebalken.style.width = value + "%"; }
 countUpP = 0;
 function countUp()
{ if(countUpP == 100) return; progress(++countUpP); window.setTimeout("countUp()", 100); }
 countUp();
</script>
</body>

Die "ungebremste" Ausbreitung könntest du durch absolute Angaben für oLadebalken.style.width verhindern (das Prozentzeichen durch "px" ersetzen). Der Effekt dass der Rand "mitwächst", ist aber dann immer noch der gleiche.

Das wird aber bei einem Ladebalken sicher nicht erwünscht sein, du brauchst ja ein Bezugssystem um zu visualisieren wo der "Anschlag" ist. Darum muss das div-Element eine feste Breite haben und du brauchst mindestens ein variables Kind-Element darin, das sich in der Breite verändert.

Code: 
 <body> 
<div id="ladebalken"><p></p></div>
<script type="text/javascript">
oLadebalken = document.getElementById("ladebalken").firstChild; 
function progress(value)
{ oLadebalken.style.width = value + "%"; }
 countUpP = 0;
 function countUp()
{ if(countUpP == 100) return; progress(++countUpP); window.setTimeout("countUp()", 100); }
 countUp();
</script>
</body>

Die Zuweisung "oLadebalken.nodeValue =" brauchst du übrigens auch nicht, wenn du die Prozentzahlen nicht ausgeben willst.
Ich hoffe das kam einigermaßen verständlich rüber.
 
Zuletzt bearbeitet:
Hi SaschaT,

Ich hoffe das kam einigermaßen verständlich rüber.
Zum Vergrößern anklicken....

Absolut... Vielleicht war es letzte Nacht auch einfach ein bisschen zu Spät, denn einiges mach jetzt viel mehr Sinn :)

Auf jedenfall danke ich dir für die Erklärung und die Verbesserungen. ;)

Gruss
Commi
 
Da es ja immer noch um das gleiche Thema geht, habe ich diesen Thread nochmal eröffnet.

Ich möchte gerne dass der Ladebalken - wenn er bei 100 angekommen ist - seine Farbe in grün ändert.

Dazu habe ich in die function progress(value), folgenden code eingefügt:

HTML: 
function progress(value)
{ 
if(value < 100)
oLadebalken.style.width = value + "%"; 
else
oLadebalken.style.background = 'green'; 
}

Der Balken ändert nun aber immer genau bei 99% seine Farbe und bleibt an selbiger Stelle stehen.

:confused:

Danke im Vorraus für jegliche Hilfe.

Gruss
Commi
 
Funktioniert wie gewünscht und ist zugleich noch eleganter, wenn du es in die Funktion countUp() vor das return einbaust:
function countUp() {
if(countUpP == 100) {
oLadebalken.style.background = 'green';
return;​
}
progress(++countUpP);
window.setTimeout("countUp()", 100);​
}
Zum Vergrößern anklicken....
 
Stimmt, ich habe es praktisch doppelt gemoppelt.
Aber warum es dann nicht lief? - Naja, egal...

Cool dass es jetzt klappt, danke dir ;)

Gruss
Commi
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück