[js] textarea verbergen bzw. einblenden

[theo]

hi leute,

wie kann ich ein textfeld, was beim aufruf der seite nicht angezeigt wird, per mausklick einblenden und ... wenn moeglich auch auf die gleiche weise wieder verschwinden lassen.


gruss
hardy

[webmichl]

document.getElementById(IDdesTextFeldes).style.visibility = "hidden";

bzw

document.getElementById(IDdesTextFeldes).style.visibility = "visible";

[theo]

hi webmichl,

danke erstmal! aber wie sage ich dem script, dass es das textfeld am anfang ausblenden soll?
jetzt hab ich ja wech. aber es kommt zur zeit nicht wieder


gruss
hardy

[webmichl]

Na ja, den Anfangsstatus definierst Du über ein Stylesheet: visibility: hidden;.

Und wenn Du das Ganze über einen Link steuern willst, würde ich eine Zustandsvariable definieren und diese in einer Function hin- und herswitchen:

<script language="JavaScript">
    Zustand = "hidden";
    function Umschalter() {
    if ( Zustand == "hidden" ) Zustand = "visible";
    else Zustand = "hidden";
    document.getElementById(IDdesTextFeldes).style.visibility = Zustand;
    }
 </script>

Sollte so funktionieren...

EDIT

frag mich jetzt nicht, wo die Lücke im "visibility" her kommt - ich krieg sie jedenfalls nich wech..

[theo]

sorry, wenn ich so bloed frage: und wie bringe ich dem link bei, dass er den zustand aendern soll?



ps: ick sprecken js nickt besonders gutt

[webmichl]

mit <a href="javascript:Umschalter()">Klick</a>

[theo]

PHP-Code:

$this->inhalt.= "<table width=\"100%\">";
 $this->inhalt.= "<thead>".$title."</thead>";
     for($c=0; $c<count($banner_array); $c+=$u) {
        $this->inhalt.= "<tr>";
            for($h=0; $h<$u; $h++) {
                $this->inhalt.= "<script language=\"JavaScript\">
                    Zustand = \"hidden\";
                    function Umschalter".($c+$h)."() {
                    if ( Zustand == \"hidden\" ) Zustand = \"visible\";
                    else Zustand = \"hidden\";
                    document.getElementById('".($c+$h)."').style.visibility = Zustand;
                    }
                     </script>";
                $this->inhalt.= "<td>";
                $this->inhalt.= "<img src=\"".$path.$banner_array[$c+$h]."\"><br>";
                $this->inhalt.= "<textarea id=\"".($c+$h)."\" rows=\"10\" cols=\"25\"><a href=\"".$CMS_SYSTEM['http_path']."\"><img src=\"".$CMS_SYSTEM['http_path'].$CMS_SYSTEM['banners'].$area_id."/".$banner_array[$c+$h]."\"></a></textarea><br>";
                $this->inhalt.= "<a href=\"javascript:Umschalter".($c+$h)."()\">Quellcode anzeigen</a>";
                $this->inhalt.= "</td>";
            }
        $this->inhalt.= "</tr>";
    }
 $this->inhalt.= "</table>"; 


so sieht das monster jetzt aus.
alle textfelder sind zu beginn eingeblendet. und wenn ich sie ausblenden will muss ich zweimal auf den link klicken (gilt auch beim wechsel zu einem anderen link).
ich krieg aber nicht mehr gepeilt, woran das jetzt noch liegt.
... ich bin langsam muede, hab keine lust mehr, will feierabend und ein bier!

[webmichl]

1. würde ich der textarea eine eigene CSS-class mit visibility: hidden; zuweisen - dann ist zu Beginn schon mal keine zu sehen.

2. Sind die IDs rein numerisch - was ( meine ich ) ned sein darf und

3. dürfte das Problem a) in der Menge functions liegen ( die ID könnte man übergeben ) und b) wesentlich schwerwiegender: zZ haben wir nur eine Zustandsvariable für mehrere Textfelder - da muss dann ein Array ran. Langst Dir, wenn wir morgen weitermachen? Ich bin nämlich auch hundemüde und hab schon ne halbe Flasche Rotwein intus - kriegs also auch ned mehr so ganz gebacken -

[theo]

du gluecklicher, gluecklicher schurke!

klar, doch gerne. du hast ne halbe flasche vorsprung. schon mit der gewissheit allein kann ich nicht mehr weitermachen. ich hab auch echt keinen bock mehr.
ich wuensch dir eine angenehme nachtruhe und sanfte traeume!


bis morgen
hardy

[Stuck Mojo]

Theo?! Wo hast du dich denn rumgetrieben? ...warst im Urlaub?

Die Zustandsvariabel kann man sich sparen, da die visibility-eigenschaft (oder halt display) doch direkt im Element zu finden ist. Ich würds irgendwie so machen:

function Umschalter(id) {
    var e = document.getElementById(id);
    e.style.display = (e.style.display == 'none') ? 'inline' : 'none';
}

// Aufruf dann so:
<a href="javascript:Umschalter('idhalt');">sichtbar machen...</a>

Ich hab die display-eigenschaft gewählt - gefällt mir besser Ist ungetestet... sollte aber funzen.

Gruss
Jan

[theo]

JAN!!!

was fuer eine freude. ich verlasse das buero und schleiche zum einem feierabendpils und dann das hier.

urlaub?! viel zu gefaehrlich! scheint was ansteckendes zu sein. hatten in der letzten zeit viele.


ich hab das script getestet, aber es macht nicht, was es soll. es sieht eher so aus, als ob er den platz fuer das "ausgeblendete" textfeld freihaelt (abstand in der tabelle), der dann nach dem anklicken kollabiert. kann es an dem "inline" liegen? so wie "display: inline"?!

gruss
hardy aka theo

[Stuck Mojo]

Jup... ich dachte das ist am schickesten... du musst natürlich den textareas von beginn ein ein style="display:none;" geben... Falls du über visibility gehen willst, muss du im Script nur "display" gegen "visibility", "inline" gegen "visible" und "none" gegen "hidden" austauschen...

Gruss
Jan

[theo]

sorry ... hatte das css vergessen. aber koennen wir das noch umdrehen?
http://www.witouris.de/area51/trinit...=service&tpl=2

[Stuck Mojo]

Theo, Theo...

Als erstes: Du brauchst die Funktion nur einmal!
Zweitens: Setzt die Textareas doch ganz einfach auf display:none... wie bereits geschrieben

Gruss
Jan

[theo]

gut, ok! die function hab jetzt einfach schnell an die stelle der alten gesetzt. daher mehrfach (jetzt geaendert).
doch die css war schon angepasst. display: none;

das ergebnis is the same, sorry