✔ Ladebalken für ein Formular

Wessy

Wessy

Erfahrenes Mitglied
Hallo alle beisammen,

sorry dass ich mit sowas nerven komme, aber da ich in Javascript total der Nix-Blicker bin ^^, wende ich mich mit meinem Problem an euch!

:-)

Wie dem auch sei, ich möchte lediglich einen Style Schitt per Javascript zuweisen.

Also: Klickst du auf Knopf = verpasse TD nen Style

Hab das ja auch soweit fertig, aber der Style ist von anfang an aktiv. *grummel grummel* Muss das jetzt noch abändern und ich habe nix plan wir!

Hier mal wie weit ich bin:

HTML: 
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.ladebalken {  background-image: url(http://www.tierboard.de/images/ladebalken.gif); background-repeat: no-repeat; background-position: center center}
-->
</style>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<form name="form1" method="post" action="">
  <table width="280" border="0" cellspacing="0" cellpadding="0">
    <tr> 
      <td width="1"> 
        <input type="button" name="aktion" value="speichern" onClick="alert('Text wurde ausgewählt!');">
      </td>
      <td id="ladebalken" class="ladebalken">&nbsp;</td>
    </tr>
  </table>
</form>
</body>
</html>

Hat einer eine Lösung für dieses fast schon unüberwindbare Problem? En Forum ist zwar keine "Ich-werf-Frage-rein-und-bekomm-Lösung"-Maschine, aber ich kann mir da echt nicht selbst helfen! :D
 
Hi,

mal schauen, ob ich Dein Problem richtig verstanden habe.

Du kannst zu Beginn eine Klasse ohne Hintergrund zuweisen. Beim Betätigen des Knopfes wird diese durch
die Klasse mit dem Ladebalken ausgetauschen. Bei erneutem Drücken wird die leere Klasse wieder zugewiesen.
Code: 
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.emptybalken{}
.ladebalken {  background-image: url(http://www.tierboard.de/images/ladebalken.gif); background-repeat: no-repeat; background-position: center center}
-->
</style>
<script type="text/javascript">
  <!--
/*
 * Funktion wechselt zwei Klassen in einem Element gegeneinander aus
 *
 * strID     - ID des Elementes, dessen Klasse gewechselt werden soll
 * strNormal - Name der ersten Klasse
 * strHigh   - Name der zweiten Klasse
 */
function toggleClass(strID, strNormal, strHigh){
	var objElement = document.getElementById(strID);

  objElement.className = (objElement.className.search(new RegExp(strHigh)) == -1)? strHigh : strNormal;
}
 //-->
</script>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<form name="form1" method="post" action="">
  <table width="280" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="1">
        <input type="button" name="aktion" value="speichern" onClick="toggleClass('ladebalken', 'emptybalken', 'ladebalken'); /*alert('Text wurde ausgewählt!');*/">
      </td>
      <td id="ladebalken" class="emptybalken">&nbsp;</td>
    </tr>
  </table>
</form>
</body>
</html>
Vielleicht hilft Dir das weiter.

Ciao
Quaese
 
Juhu, du hast es. Das ist nicht nur das was ich wollte, sondern noch ein bischen mehr. :D

Vielen herzlichen Dank Quaese...
 
Also ich bin da aber bis jetzt noch nicht hinter gekommen, warum das in meinem Internetexplorer nicht funktioniert. Gibt es da einen Grund für?

Was muss ich denn machen damit der CSS auch im IE gewechselt wird?
 
Hi,

ich kann das Problem nicht nachvollziehen, dass es bei mir im IE (5, 6 u. 7) funktioniert.

Ciao
Quaese
 
Hmmm, ok. Ich hab allerdings auch noch ein kleines bischen am Script geschraubt. Vllt habe ich was falsch gemacht. Werde zuhause noch mal naschauen und dann melde ich mich noch mal.

Ich hatte das Phänomen, dass einfach garnix passiert. Aber wie gesagt, melde mich später noch mal.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück