div öffnen und schließen
lima-city → Forum → Die eigene Homepage → Homepage Allgemein
attribut
bezug
blocken
button
code
dank
display
fehler
fenster
folgendes code
folgendes problem
genutzte methode
http
klicken
konsole
leute
show
spalte
test
vergessen
-
Also Leute ich habe Folgendes Problem:
ich möchte das wenn man auf einen Button klick daneben ein div Feld sichtbar wird bzw. wieder geschlossen wird, ABER ich habe darunter noch einen Button und wenn der geklickt wird soll natürlich das dazugehörige div geöffnet werden und wenn man dort dann wider drauf klickt das es geschlossen wird ODER das es nicht durch das wieder holte drauf klicken geschlossen wird sondern einfach immer in dem erschienen div eine kleiner Button sitzt zum schließen. so wie das 'x' zum schließen des Fensters.
Mir wäre am liebsten wenn es mit php geht. ich habe leider noch nicht soviel Erfahrung darin und deswegen hab ich gefragt(schließlich lernt man hier auch noch was. ;) )
Wenn es nicht geht dann wäre javascipt die Ausweichmöglichkeit.
Hoffe mir kann jmd helfen. Danke -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Mit PHP kannst du das von Benutzerfreundlichkeit gleich vergessen.
Das musst du mit JS machen.
Wenn du da noch nicht so weit bist, empfehle ich ein fertiges Framework dafür, auch wenn es überfrachtet ist, wird es wohl für dich ienfacher sein, da du ansonsten wohl JS lernen müsstest.
Allgemein gilt folgendes:
document.getElementById('mydiv').style.display = (document.getElementById('mydiv').style.display == "none")?"block":"none";
Damit kannst du das div mit der id mydiv öffnen und schließen, du musst es aber irgendwo in einem "onclick" eines attributs einfügen. Zum Beispiel ein href-Attribut.
Also:
<a href="#" onclick='document.getElementById('mydiv').style.display = (document.getElementById('mydiv').style.display == "none")?"block":"none";'>Öffnen/Schließen</a> <div id="mydiv" style="display: none;"> <a href="#" onclick='this.style.display = (this.style.display == "none")?"block":"none";'>Schließen [Das wäre dann der Schließen-Button im Fenster selbst]</a> </div>
Beitrag zuletzt geändert: 12.1.2009 21:51:58 von nikic -
Bei php geht das nur mit dem neuladen der ganzen Website. Ansosnten musst du JavaScript verwenden. Du musst eigentlich nur dieses Extrafenster einrichten und per CSS unsichtbar machen und per JavaScript (MouseClick()) wieder sichtbar.
Das müsste doch jedemenge Tuts dazu geben. Hast du schonmal gegoogelt?
Schau dir das mal an(habs in der schnelle mal rausgesucht):
http://forum.de.selfhtml.org/archiv/2006/9/t137137/ -
naya ich ahb mcih halt ent so mit javascript beschäfftig,, aber ich habe es jetzt mla auf eine Test seite gesetzt und wollt es ausprobieren .. aber wenn ich auf den Linkl klicke dann passiert nichts ...
hier mal der code:
<html> <head> </head> <body> <script type="text/javascript"> document.getElementById('mydiv').style.display = (document.getElementById('mydiv').style.display == "none")?"block":"none"; </script> <a href="#" onclick='document.getElementById('mydiv').style.display = (document.getElementById('mydiv').style.display == "none")?"block":"none";'>Öffnen/Schließen</a> <div id="mydiv" style="display: none; height: 100px; width: 100px; border: solid 1px #000000;"> <a href="#" onclick='this.style.display = (this.style.display == "none")?"block":"none";'>Schließen [Das wäre dann der Schließen-Button im Fenster selbst]</a> </div> </body> </html>
könnt ihr mir sagen was falsch ist ??
Beitrag zuletzt geändert: 12.1.2009 22:06:56 von tactical-airsoft-berlin -
Ich stelle grad fest, das ich ein Paar kleine Fehler drin habe...
versuchs mal damit:
<html> <head> </head> <body> <a href="#" onclick='document.getElementById('mydiv').style.display = (document.getElementById('mydiv').style.display == "none")?"block":"none";'>Öffnen/Schließen</a> <div id="mydiv" style="display: none; height: 100px; width: 100px; border: solid 1px #000000;"> <a href="#" onclick='this.style.display = "none";'>Schließen</a> </div> </body> </html>
Wenn es so nicht geht, dann öffne bitte die fehlerkonsole von Firefox und sag, ob es dort Fehler im Bezug uaf dieses Script gibt... -
es hat immernoch nciht funktioniert und ahb dann auch gleich auf die fehler konsole geguckt:
Fehler: syntax error
Quelldatei: http://localhost/test/#
Zeile: 1, Spalte: 23
Quelltext:
document.getElementById(
ich kann damit aber leider nichts anfangen .. -
Ich habe es mit
<a href="#" onClick='document.getElementById("container").style.visibility ="hidden"'>hide</a> und <a href="#" onClick='document.getElementById("container").style.visibility ="visible"'>show</a>
versucht, was für meine Zwecke eigentlich gereicht hat. Ich befürchte jedoch, das die hier genutzte Methode wohl überholt ist. -
Danke Leute mit dem script von thedarkside klappt es, aber geht es denn auch das wenn ich auf den 2. link klicke sich das andere div schließt. Habe wie gesagt keine ahnung von Javascript.
danke im vorraus.
EDIT:
Ich habe jetzt mal ein bisschen selber rumgespielt und beide Varianten verwendet:
<html> <head> </head> <body> <a href="#" onclick='document.getElementById("div1").style.display = (document.getElementById("div1").style.display == "none")?"block":"none"; document.getElementById("div2").style.display ="none"'>div1</a> <a href="#" onclick='document.getElementById("div2").style.display = (document.getElementById("div2").style.display == "none")?"block":"none"; document.getElementById("div1").style.display ="none"'>div2</a> <div id="div1" style="display: none; position: absolute; top: 100px; height: 100px; width: 100px; border: solid 1px #000000;"> div1 </div> <div id="div2" style="display: none; position: absolute; top: 300px; height: 100px; width: 100px; border: solid 1px #000000;"> div2 </div> </div> </body> </html>
aber kann mir mal jmd genau erklären was der Code macht ?? :
document.getElementById("div1").style.display = (document.getElementById("div1").style.display == "none")?"block":"none";
ich verstehe ja den anfang so bis zum ersten .style.display aber das danach nicht mehr. ??
Beitrag zuletzt geändert: 13.1.2009 16:25:19 von tactical-airsoft-berlin -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
