• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Wachsender Balken

Status
Für weitere Antworten geschlossen.
ixam

ixam

Neues Mitglied
Hallo,

ich würde gerne eine Art Fortschrittsbalken erstellen, wie soll ich das anstellen?

Ich habe es bereits mit reinem Javascript probiert:
Code: 
<?php 
echo"<div id=\"temperature\" style=\"position:relative;margin-left:0%;top:95%;width:2%;height:2%;background-color:red;\" onload="temperatur();"></div>";
?>

<script type="text/javascript">
 var length=2;
 function temperatur(){
  length=length + 1;
  document.getElementById('temperature').style.width=length+'%';
  setTimeout(temperatur(),100);
 }
</script>
Allerdings passiert nichts. Ich schätze, dass es daran liegt, dass das div nicht mit den neuen Werten neu geladen wird.

Könnt ihr mir weiter helfen?


Grüße
ixam
 
Werbung:
Jein. Als HTML-Attribut stimmt das, aber es gibt auch noch andere Elemente, welche das Load-Event kennen. DIV gehört aber eindeutig nicht dazu.

Folgendes musst geändert werden:
Code: 
setTimeout(temperatur, 100);
Da die Funktion sonst sofort ausgeführt wird und nichts zurückgibt (null). Stattdessen muss die Funktion als Referenz übergeben werden.
 
Werbung:
Ich habe den Code jetzt folgender maßen verändert:

PHP: 
<?php 
//Ausgabe der Bilder und der Temperaturleiste 
echo"<img src=\"img/bunsen.gif\" style=\"margin-left:40%;margin-top:25%;float:left;\" OnMouseover=\"temperatur();\">";
echo"<div id=\"temperature\" style=\"position:relative;margin-left:0%;top:95%;width:2%;height:2%;background-color:red;\" ></div>";

?>

<script type="text/javascript">
 var lange=2;
 function temperatur(){
  lange=lange + 1;
  document.getElementById('temperature').style.width=lange;
  setTimeout(temperatur, 1000);
 }
</script>
Firefox sagt jetzt:
Code: 
Error: temperatur is not defined
das kann ich mir aber nicht erklären. Könnt ihr mir weiterhelfen?

Grüße
ixam
 
ixam schrieb:
Ich habe den Code jetzt folgender maßen verändert:

PHP: 
<?php 
//Ausgabe der Bilder und der Temperaturleiste 
echo"<img src=\"img/bunsen.gif\" style=\"margin-left:40%;margin-top:25%;float:left;\" OnMouseover=\"temperatur();\">";
echo"<div id=\"temperature\" style=\"position:relative;margin-left:0%;top:95%;width:2%;height:2%;background-color:red;\" ></div>";

?>

<script type="text/javascript">
 var lange=2;
 function temperatur(){
  lange=lange + 1;
  document.getElementById('temperature').style.width=lange;
  setTimeout(temperatur, 1000);
 }
</script>
Firefox sagt jetzt:
Code: 
Error: temperatur is not defined
das kann ich mir aber nicht erklären. Könnt ihr mir weiterhelfen?

Grüße
ixam
Zum Vergrößern anklicken....

Kleiner Tippfehler:
PHP: 
<?php 
//Ausgabe der Bilder und der Temperaturleiste 
echo"<img src=\"img/bunsen.gif\" style=\"margin-left:40%;margin-top:25%;float:left;\" OnMouseover=\"temperatur();\">";
echo"<div id=\"temperature\" style=\"position:relative;margin-left:0%;top:95%;width:2%;height:2%;background-color:red;\" ></div>";

?>

<script type="text/javascript">
 var lange=2;
 function temperatur(){
  lange=lange + 1;
  document.getElementById('temperature').style.width=lange;
  setTimeout(temperatur(), 1000);
 }
</script>
Has das () vergessen.:wink:
 
rexini: eben nicht. Genau das bemängelte ich ja im oberen Beitrag. Der Fehler kommt er beim Onmouseover richtig?

Funktionieren folgende zwei Sachen:
Code: 
setTimeout(window.temperatur, 1000);
oder:
Code: 
setTimeout(arguments.callee, 1000);
 
Werbung:
Ok.
Es lag daran, dass er zu dem Zeitpunkt des Aufrufs, die Funktion noch gar nicht kennt. :lol:

Ok das it damit gelöst. Ich habe allerdings jetzt ein anderes Problem:

Ich möchte, dass dieser Fortschrittsbalken kontinuierlich steigt, wenn die Maus auf einem Bild ist und kontinuierlich sinkt, wenn diese nicht drauf ist. Mit OnMouseOver funktioniert das erste, allerdings bereitet das Zweite größe Schwierigkeiten. Habt ihr eine Idee, wie ich das am Besten umsetze und wie ich das kontinuierliche Steigen/sinken hinbekomme?

Ich habe mir bereits überlegt das Ganze mit Hilfe einer Schleife zu machen, die erhöht, wenn die Funktion mit true und die erniedrigt, wenn die Funktion mit false aufgerufen wird. Allerdings weiß ich nicht, wie ich diese Schleife bauen soll.

Grüße
ixam
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben