nicht angemeldet
kleine Lightbox selbst schreiben
0 0 0 0 0 
Struppi
0 0 Struppi
0 Document Object Model
0 0 Struppi
0
kleine Lightbox selbst schreiben
Hallo,
ich möchte mir eine Ligthbox schreiben.
Ich möchte in der Lightbox ein Formular und verschiedene andere Elemente platzieren. Es geht also nicht primär darum Bilder anzuzeigen.
Meine Google-Suche nach "JavaScript Lightbox Tutorial" gab mir zwar reichlich Ergebnisse aber die beschäftigen sich nur damit die bekannte Lightbox irgendwo einzubinden.
Sicher könnte ich mir auch das Lightbox-Script herunterladen und soweit wie möglich meinen Bedürfnissen anpassen, ich würde es aber viel lieber selbst schreiben um ein bisschen JS dazu zu lernen.
Vom Konzept her ist es vermutlich nicht viel mehr als ein Div mit höchstem z-index über die gesamte Fensterfläche zu legen.
In dem Div kann ich die anderen Elemente dann wie gewohnt platzieren.
Das sollte mit createElement und appendChild nicht so schwer werden.
Um das dann optisch nicht ganz so langweilig erscheinen zu lassen bietet sich das Einblenden der Hintergrundfarbe des Div an (Hintergrund abdunkeln) bis es fast nicht mehr transparent ist.
Wie wird sowas gemacht, dass es in den gängigen Browsern funktioniert?
In dem Div mit dem abgedunkelten Hintergrund möchte ich dann mittig, als "Arbeitsfläche" ein weiteres Div mit weißem Hintergrund platzieren.
Mit welchem Effekt das eingeblendet werden soll überleg ich mir noch ;)
Es ist also irgendwie mehr oder weniger Standard-Kram.
Nur weiß ich leider überhaupt nicht wo ich ansetzen muss.
Könntet ihr mir beim einblenden der Divs helfen oder mir einen Link zu einem Beispiel geben?
Herzlichen Dank!
Matze
-
Hallo,
Es ist also irgendwie mehr oder weniger Standard-Kram.
Nur weiß ich leider überhaupt nicht wo ich ansetzen muss.
Könntet ihr mir beim einblenden der Divs helfen oder mir einen Link zu einem Beispiel geben?Wie du schreibst, ist das mit createlElement und appendChild doch kein Problem. Was den Rest angeht, kannst Du doch beim lightbox-script abkupfern, oder?
Gruß
jobo
-
Hallo jobo,
Wie du schreibst, ist das mit createlElement und appendChild doch kein Problem. Was den Rest angeht, kannst Du doch beim lightbox-script abkupfern, oder?
Könnte ich, aber genau das will ich nicht. Ich will es selbst schreiben, damit ich weiß wie es geht, warum es so gemacht wird und wie die benutzten Funktionen funktionieren.*
Grüße, Matze
* was für ein bescheuerter Satz ;)
-
Hallo,
Könnte ich, aber genau das will ich nicht. Ich will es selbst schreiben, damit ich weiß wie es geht, warum es so gemacht wird und wie die benutzten Funktionen funktionieren.*
Wie jetzt. Du willst Dir gewisse Dinge da nicht abgucken (zB. wie das verdunkelt wird), willst aber stattdessen, dass dir jemand hier im Forum das extrahiert? Bestimmt findste jemanden (;-).
Gruß
jobo
-
Wie jetzt. Du willst Dir gewisse Dinge da nicht abgucken (zB. wie das verdunkelt wird), willst aber stattdessen, dass dir jemand hier im Forum das extrahiert? Bestimmt findste jemanden (;-).
Du interpretierst da zu viel hinein.
Anders als bei z.B. PHP finde ich zu JS keine vernünftige deutsche Dokumentation in der ich einfach einen Funktionsnamen eingeben und nachschauen kann wie sie genau funktioniert.
Mehr als Copy&Paste lern ich durch deinen Vorschlag also nicht.
Matze
-
Anders als bei z.B. PHP finde ich zu JS keine vernünftige deutsche Dokumentation in der ich einfach einen Funktionsnamen eingeben und nachschauen kann wie sie genau funktioniert.
Du meinst sicher nicht JS, du meinst das DOM und das ist durchaus nicht unbedingt vereinheitlicht. Aber es gibt viele Seiten wo es relativ ausführlich aufgelistet ist (auch ein paar deutschsprachige), vor allen bei denen, die das DOM bereitstellen, den Browserherstellern.
Struppi.
-
Hallo,
... du meinst das DOM und das ist durchaus nicht unbedingt vereinheitlicht.
Was meinst Du damit? Dass der IE zB. bei option-Elementen kein onclick-Event erkennt?
Gruß
jobo
-
... du meinst das DOM und das ist durchaus nicht unbedingt vereinheitlicht.
Was meinst Du damit? Dass der IE zB. bei option-Elementen kein onclick-Event erkennt?
oder kein getElementsByClassName oder Firefox kein outerHTML oder oder da gibt es vermutlich dutzende Beispiele.
Kannst dir ja ein paar raussuchen: http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#dom
Struppi.
-
Hallo,
... du meinst das DOM und das ist durchaus nicht unbedingt vereinheitlicht.
DOM ist genauso vereinheitlich wie HTML.
Was meinst Du damit? Dass der IE zB. bei option-Elementen kein onclick-Event erkennt?
Event onclick hat (noch) nichts mit DOM zutun.
oder kein getElementsByClassName oder Firefox kein outerHTML oder oder da gibt es vermutlich dutzende Beispiele.
getElementsByClassName ist selbst in DOM 3 als Methode nicht enthalten; outerHTML ebenso wenig. Das scheint mir hier das eigentliche Problem, dass Javascript nur die Sprache ist, mit der man die Schnittstelle DOM bemüht. Das diese sprache nicht einheitlich ist, das ist wohl war.
Kannst dir ja ein paar raussuchen: http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#dom
Das wird noch ein Weilchen dauern, bis alle neuen Browser HTML 5 unterstützen werden.
Gruß aus Berlin!
eddi-
Hallo,
Das scheint mir hier das eigentliche Problem, dass Javascript nur die Sprache ist, mit der man die Schnittstelle DOM bemüht. Das diese sprache nicht einheitlich ist, das ist wohl war.
Wenn sie DOM bemüht aber nur, oder wie? Ich finde JS eigentlich recht einheitlich.
Gruß
jobo
-
Hallo Jobo,
Das scheint mir hier das eigentliche Problem, dass Javascript nur die Sprache ist, mit der man die Schnittstelle DOM bemüht. Das diese sprache nicht einheitlich ist, das ist wohl war.
Wenn sie DOM bemüht aber nur, oder wie? Ich finde JS eigentlich recht einheitlich.
wie Struppi schon Schrieb, gibt es nicht standardisierte Unterschiede wie zum Beispiel getElementsByClassName, outerHTML oder wie Du schriebst wohl ein Problem mit Element <option> und onclick. Man sollte dabei aber beachten, was die standardisierte Schnittstelle DOM ist, und was unterschiedliche Implementierungen innerhalb der Sprachinterpretation verschiedener Browser sind. Es ging mir mit meinem Einwand also darum, nicht DOM und Javascript in einen Topf zu schmeißen, anzurühren und DOM für etwas verantwortlich machen zu wollen, was damit nichts zu tun hat.
Gruß aus Berlin!
eddi-
Hallo,
Das scheint mir hier das eigentliche Problem, dass Javascript nur die Sprache ist, mit der man die Schnittstelle DOM bemüht. Das diese sprache nicht einheitlich ist, das ist wohl war.
Wenn sie DOM bemüht aber nur, oder wie? Ich finde JS eigentlich recht einheitlich.
wie Struppi schon Schrieb, gibt es nicht standardisierte Unterschiede wie zum Beispiel getElementsByClassName, outerHTML oder wie Du schriebst wohl ein Problem mit Element <option> und onclick. Man sollte dabei aber beachten, was die standardisierte Schnittstelle DOM ist, und was unterschiedliche Implementierungen innerhalb der Sprachinterpretation verschiedener Browser sind. Es ging mir mit meinem Einwand also darum, nicht DOM und Javascript in einen Topf zu schmeißen, anzurühren und DOM für etwas verantwortlich machen zu wollen, was damit nichts zu tun hat.
Eben. Wenn der IE den onclick-Event beim option-Element nicht registriert, dann macht der IE was falsch. Wenn der FF getElementsByClassName anbietet, dann ist das sozusagen eine FF-Ergänzung. Wenn er outerHTML nicht kann, dann ist er konform, IE bietet das eben an. Na und. Die Sprache an sich (ECMA-Script???) ist doch aber recht einheitlich und auch übersichtlich. Man kann sich Element herauspicken, als Liste oder nach ID, kann Events zuweisen oder Element aus dem DOM-Baum herausnehmen oder reinfummeln oder ersetzen. Die Domfunktionen sind ja zum Teil sogar fast namensgleich mit denen von PHP.
Gruß
jobo
-
Re:
Das scheint mir hier das eigentliche Problem, dass Javascript nur die Sprache ist, mit der man die Schnittstelle DOM bemüht. Das diese sprache nicht einheitlich ist, das ist wohl war.
|
wie Struppi schon Schrieb, gibt es nicht standardisierte Unterschiede wie zum Beispiel getElementsByClassName, outerHTML oder wie Du schriebst wohl ein Problem mit Element <option> und onclick. Man sollte dabei aber beachten, was die standardisierte Schnittstelle DOM ist, und was unterschiedliche Implementierungen innerhalb der Sprachinterpretation verschiedener Browser sind. Es ging mir mit meinem Einwand also darum, nicht DOM und Javascript in einen Topf zu schmeißen, anzurühren und DOM für etwas verantwortlich machen zu wollen, was damit nichts zu tun hat....
Ich hatte mich doch nun schon von -Sprache- zu -Implementierungen- auf Dich zu bewegt. Was willst Du denn nun noch?
Die Domfunktionen sind ja zum Teil sogar fast namensgleich mit denen von PHP.
Ich merke schon, Dir ist immer noch nicht klar, dass sie als standardisierte Schnittstelle sogar IDENTISCH sind, weil sie es müssen.
Gruß aus Berlin!
eddi-
Hallo,
Die Domfunktionen sind ja zum Teil sogar fast namensgleich mit denen von PHP.Die Domfunktionen sind ja zum Teil sogar fast namensgleich mit denen von PHP.
Ich merke schon, Dir ist immer noch nicht klar, dass sie als standardisierte Schnittstelle sogar IDENTISCH sind, weil sie es müssen.
Immer noch nicht? Wie schnell solls denn noch gehen? PHPs Funktionen müssen ident sein mit denen von Javascript?
Gruß
jobo
-
Re:
PHPs Funktionen müssen ident sein mit denen von Javascript?
Was das umgesetzte DOM-Level anbelangt, und das ist bei PHP DOM 1, wenn ich mich recht entsinne, müssen die Beiden Sprachen identisch sein. Das betrifft die Funktionsnamen, die nach der Spezifikation bestimmten Funktionsargumente und die Rückgabewerte der Funktionen. Implementierungsunterschiede ergeben sich nur als Erweiterung der Funktionalität. Das aber trifft ja, wie getElementsByClassName() zeigt, auch innerhalb einer Sprache unterschiedlicher Browser.
Gruß aus Berlin!
eddi
-
-
-
-
-
-
... du meinst das DOM und das ist durchaus nicht unbedingt vereinheitlicht.
DOM ist genauso vereinheitlich wie HTML.
Naja, falsche Ausdruck, es ist noch nicht einheitlich in den Browsern umgesetzt (daher hatte ich ursprünglich auch diese genannt)
Das scheint mir hier das eigentliche Problem, dass Javascript nur die Sprache ist, mit der man die Schnittstelle DOM bemüht. Das diese sprache nicht einheitlich ist, das ist wohl war.
Nein, das DOM bzw. die Browserumsetzung ist nicht einheitlich, die Sprache ist es zum großteil schon.
Kannst dir ja ein paar raussuchen: http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#dom
Das wird noch ein Weilchen dauern, bis alle neuen Browser HTML 5 unterstützen werden.
Aber dann wird alles gut :-)
Struppi.
-
Re:
Aber dann wird alles gut :-)
Nach all den Jahren ist meine Hoffnung schon länger im Krematorium - nur die Grabrede ist noch nicht ganz fertig. ;)
Gruß aus Berlin!
eddi-
Nach all den Jahren ist meine Hoffnung schon länger im Krematorium - nur die Grabrede ist noch nicht ganz fertig. ;)
Dann schreib deine Grabrede in Perl. Die versteht mindestens perl.
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Hallo Beat,
Nach all den Jahren ist meine Hoffnung schon länger im Krematorium - nur die Grabrede ist noch nicht ganz fertig. ;)
Dann schreib deine Grabrede in Perl. Die versteht mindestens perl.
...und das bei der ringelschwänzigen Verwandschaft der Verblichenen? Nein, PHP reicht da völlig aus!
Gruß aus Berlin!
eddi
-
-
-
-
-
-
-
-
-
-
-
Auch wenn ich es löblich finde, dass Du es selbst machen möchtest. Warum das Rad neu erfinden? Vor allem, wenn man dann doch wieder auf die Hilfe anderer angewiesen ist?
http://www.dolem.com/lytebox/
Hier können auch iFrames eingebunden werden... also auch Kontaktformulare, Videos und alles andere...
Vielleicht willst Du Dir da ja was abschauen... der Code ist auch etwas kleiner als bei der ursprünglichen Lightbox.
-
Auch wenn ich es löblich finde, dass Du es selbst machen möchtest. Warum das Rad neu erfinden? Vor allem, wenn man dann doch wieder auf die Hilfe anderer angewiesen ist?
http://www.dolem.com/lytebox/Doesn't work wie so viele anderen Lightboxes auch.
Ich will neue Räder!mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Doesn't work wie so viele anderen Lightboxes auch.
Da ich es selbst auch für solche Funktionen nutze: Doch, it works...
Und wenn man sich noch in den Tiefen des JS etwas auskennt, lässt es sich sicherlich auch optisch noch weiter anpassen, so dass es nicht mehr unbedingt den typischen Lightbox-Look hat...
Ob es das ist, was der OP möchte, muss er natürlich selbst entscheiden.
-
Doesn't work wie so viele anderen Lightboxes auch.
Da ich es selbst auch für solche Funktionen nutze: Doch, it works...
Ach schmeiss die Maus doch in den Müll!
Und das ist nicht das einzige.mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische
-
-
-
-