Mel: "popup" mittels JS grafisch ansprechend präsentieren

Hallo Forum,

ich habe mal ein paar Fragen zum o.g. Thema.

Jeder kennt ja vermtlich lightbox, bei dem die Bilder einer Galerie  mittels JS in einem Layer über das vorhandene Browserfenster gelegt wird. Ist JS deaktiviert öffnet sich ein normales neues Fenster.

Ich habe nicht wirklich Ahnung von den Möglichkeiten von JS deshalb deshalb frage ich euch ob so etwas ähnliches möglich ist:

stellt Euch eienn Chat vor der in einem Fenster mit bestimmten Abmessungen präsentiert wird. Mir gefällt -rein optisch jetzt- die Browserfensterumgebung nicht. Wäre es möglich dass eben der Inhalt dieses neuen Fensters ebenfalls als "eigener layer" (es fällt mir irgendwie schwer  zu beschreiben was ich meine ) geöffnet wird dessen Aussehen dann entsprechend gut angepasst werden kann? (mir schweben dann abgerundete ecken des Chatfensters vor...)

IST so etwas überhaupt möglich?
Wisst ihr Beispiele die man sich mal ansehen kann?
Falls ja, was wären die ersten Stichworte um so etwas zu realisieren?

Viiiielen Dank,
Mel

  1. hi,

    stellt Euch eienn Chat vor der in einem Fenster mit bestimmten Abmessungen präsentiert wird. Mir gefällt -rein optisch jetzt- die Browserfensterumgebung nicht. Wäre es möglich dass eben der Inhalt dieses neuen Fensters ebenfalls als "eigener layer" (es fällt mir irgendwie schwer  zu beschreiben was ich meine ) geöffnet wird dessen Aussehen dann entsprechend gut angepasst werden kann? (mir schweben dann abgerundete ecken des Chatfensters vor...)

    IST so etwas überhaupt möglich?

    Ja, natürlich.

    Wisst ihr Beispiele die man sich mal ansehen kann?

    lightbox.js

    Ja, da wird ein Bild im "Layer" angezeigt. Dass es auch nahezu beliebige andere Inhalte sein könnten, sollte auf der Hand liegen.

    Falls ja, was wären die ersten Stichworte um so etwas zu realisieren?

    HTML, CSS, Javascript.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. HI,

      IST so etwas überhaupt möglich?

      Ja, natürlich.

      das ist ja schonmal fein.

      Wisst ihr Beispiele die man sich mal ansehen kann?

      lightbox.js

      ja das hatte ich ja auch genannt. ist aber das einzige dass mir eingefallen ist bzw. dass ich spontan kenne. kennst Du mehr?

      Ja, da wird ein Bild im "Layer" angezeigt. Dass es auch nahezu beliebige andere Inhalte sein könnten, sollte auf der Hand liegen.

      stimmt. das chatfenster sollte aber dann auch verschiebbar sein...das ist bei lightbox nicht der fall.

      Falls ja, was wären die ersten Stichworte um so etwas zu realisieren?

      HTML, CSS, Javascript.

      ach komm;) ist doch wohl klar dass ich nach JS-Stichworten suche nicht nach den allerallgemeinsten Werkzeugen..html udn css ist klar, nur wo soll ich da JS anfangen zu suchen?
      Sei mal nicht so sparsam mit Deinem Wissen ;)

      viele Grüsse Melanie

      1. Hallo,

        ja das hatte ich ja auch genannt. ist aber das einzige dass mir eingefallen ist bzw. dass ich spontan kenne. kennst Du mehr?

        Was mich ein bisschen wundert ist, dass du zwar die Lightbox gefunden  ast, aber nicht die Thickbox.
        AFAIK ist diese auch auf der Lightbox verlinkt, habe diese aber schon lange nicht mehr besucht.

        Ja, da wird ein Bild im "Layer" angezeigt. Dass es auch nahezu beliebige andere Inhalte sein könnten, sollte auf der Hand liegen.

        Dieses kannst du mit der o.g. Thickbox tun.

        das chatfenster sollte aber dann auch verschiebbar sein...das ist bei lightbox nicht der fall.

        Die letzte Version der Thickbox die ich getestet habe, konnte es noch nicht. Frag mich aber bitte nicht nach der Versionsnummer, ich benutze schon lange keine JS sachen mehr. Wäre es nicht möglich, den dynamisch erzeugten Layer mittels eines Drag&Drop Script diese Funktion beizubringen?

        Mfg,
        FeuerFuchs

        --
        Mein Selfcode: ie:{ fl:( br:> va:) ls:& fo:| rl:( n4:& ss:| de:> js:| ch:{ mo:} zu:}
        1. HI,

          Ja, da wird ein Bild im "Layer" angezeigt. Dass es auch nahezu beliebige andere Inhalte sein könnten, sollte auf der Hand liegen.

          Dieses kannst du mit der o.g. Thickbox tun.

          das kannte ich tatsächlich nicht. VIelen Dank für den Hinweis. Sehr fein, das ist schonmal gut.

          Die letzte Version der Thickbox die ich getestet habe, konnte es noch nicht. Frag mich aber bitte nicht nach der Versionsnummer, ich benutze schon lange keine JS sachen mehr. Wäre es nicht möglich, den dynamisch erzeugten Layer mittels eines Drag&Drop Script diese Funktion beizubringen?

          So wie es aussieht wird drag & drop nicht unterstützt bzw. gibt es diese Kombi halt nicht. Schade aber das was ich will ist wohl auch eher Sonderfall. Ich weiss nicht ob es möglich ist das zu kombinieren. Meine Fähigkeiten übersteigt es zu 100% leider.

          viele Grüsse, Melanie

      2. hi,

        stimmt. das chatfenster sollte aber dann auch verschiebbar sein...das ist bei lightbox nicht der fall.

        Als "ziehen und fallenlassen" in Kombination mit Javascript.
        Für den Ausdruck in Anführungszeichen beim Suchen lieber die gängige englischsprachige Entsprechung verwenden, das dürfte mehr Treffer bringen.

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        1. Hi,

          Als "ziehen und fallenlassen" in Kombination mit Javascript.
          Für den Ausdruck in Anführungszeichen beim Suchen lieber die gängige englischsprachige Entsprechung verwenden, das dürfte mehr Treffer bringen.

          interessanter in dem zusammenhang wäre für mich die technik welche lightbox und thickbox anwenden um den content eben als eigenen layer zu präsentieren. Gibts dafür auch ähnlich bekannte Schlagworte wie "drag & drop"?

          vg melanie

          1. hi,

            interessanter in dem zusammenhang wäre für mich die technik welche lightbox und thickbox anwenden um den content eben als eigenen layer zu präsentieren. Gibts dafür auch ähnlich bekannte Schlagworte wie "drag & drop"?

            HTML, CSS und Javascript.

            (Ja, schon wieder. Es ist nicht sonderlich viel Magie dahinter. Es wird ein HTML-Element ggf. per DOM-Methoden dynamisch erzeugt und befüllt, es werden ein paar Werte für Positionierung und Maße berechnet, und anschließend werden die nötigen CSS-Eigenschaften per Javascript gesetzt.)

            gruß,
            wahsaga

            --
            /voodoo.css:
            #GeorgeWBush { position:absolute; bottom:-6ft; }
            1. Hi,

              HTML, CSS und Javascript.

              (Ja, schon wieder. Es ist nicht sonderlich viel Magie dahinter. Es wird ein HTML-Element ggf. per DOM-Methoden dynamisch erzeugt und befüllt, es werden ein paar Werte für Positionierung und Maße berechnet, und anschließend werden die nötigen CSS-Eigenschaften per Javascript gesetzt.)

              Für mich sieht das eben wie Magie aus! deshalb frage ich ja.
              ich komme eben beim googlen nicht sonderlich weit wenn ich Dinge herausfinden will wie z.b. dass ein eigenes neues Fenster als layer dargestellt wird. Mir fehlen die entsprechenden Stichworte! Du schreibst ein "html-Element wird ggf. per DOM-Methoden dynamisch erzeugt".
              ok am liebsten wäre es mir wenn mir das jemand genauer erklären würde...

              vg melanie

              1. Ich muss noch was ergänzen bzw. korrigieren in meiner Fragestellung.
                Also mein Wunsch wäre ein kleines popup-Fenster grafisch ansprechender zu gestalten und zwar ohne die Browsereigenen Leisten / Begrenzungen. Dazu mal ein Bild wie ich mir das vorstelle....

                http://www.sesamstrassenkind.de/popup.png (100kb)

                Das Problem: dieses "Fenster" soll verschiebbar sein udn zwar auch ausserhalb des Browserfensters in dem es überhaupt geöffnet wird.
                Das ist dann natürlich was anderes als die technik von thickbox schätze ich mal..

                Mit meinem begrenzten Verständnis von JS denke ich aber dass so etwas NICHT möglich ist. Stimmt das? Oder geht das doch?

                viele Grüsse, Melanie

                1. Mit meinem begrenzten Verständnis von JS denke ich aber dass so etwas NICHT möglich ist. Stimmt das? Oder geht das doch?

                  Doch das geht.

                  Wie das meiste davon findest du auch bei selfhtml. z.b. createElement und das so erzeugte Element kannst du dann mit appendChild der Seite hinzufügen. Auch für den Drag & Drop Effekt gibt es bei selfhtml einen Artikel http://aktuell.de.selfhtml.org/artikel/dhtml/draganddrop/

                  Struppi.

                  --
                  Javascript ist toll (Perl auch!)
                  1. Hallo,

                    Doch das geht.

                    aber bestimmt nicht aus den Grenzen des Browserfensters hinaus, wie es Mel gern hätte.

                    So long,
                     Martin

                    --
                    F: Was ist schneller: Das Licht oder der Schall?
                    A: Offensichtlich der Schall. Wenn man den Fernseher einschaltet, kommt immer erst der Ton, und dann erst das Bild.
                    1. Doch das geht.

                      aber bestimmt nicht aus den Grenzen des Browserfensters hinaus, wie es Mel gern hätte.

                      Ich hab das schon gesehen, das war eine von mehreren Vorstellungen wie es zu funktionieren hat und das geht natürlich nicht. Habe ich vergessen dazu zu schreiben.

                      Struppi.

                      --
                      Javascript ist toll (Perl auch!)
                    2. Hi,

                      aber bestimmt nicht aus den Grenzen des Browserfensters hinaus, wie es Mel gern hätte.

                      »

                      Ja das hätte sie sooo gerne ;)

                      Kann man denn das Browserfenster an sich mit JS manipulieren? Also einfach den grundsätzlichen Rahmen "wegblenden"? Bestimmt nicht oder?

                      vg melanie

                      1. aber bestimmt nicht aus den Grenzen des Browserfensters hinaus, wie es Mel gern hätte.
                        »

                        Ja das hätte sie sooo gerne ;)

                        geht nicht.

                        Kann man denn das Browserfenster an sich mit JS manipulieren? Also einfach den grundsätzlichen Rahmen "wegblenden"? Bestimmt nicht oder?

                        geht auch nicht.

                        Struppi.

                        --
                        Javascript ist toll (Perl auch!)
                        1. geht nicht.
                          geht auch nicht.

                          Na gut...aus der Traum. Danke für die klare Aussage!

                          vg melanie

                  2. hi,

                    Mit meinem begrenzten Verständnis von JS denke ich aber dass so etwas NICHT möglich ist. Stimmt das? Oder geht das doch?

                    Doch das geht.

                    Beziehst du hier explizit die Anforderung

                    dieses "Fenster" soll verschiebbar sein udn zwar auch ausserhalb des Browserfensters in dem es überhaupt geöffnet wird.

                    mit ein?

                    Das geht m.E. nicht.

                    Die Technik arbeitet mit HTML-Elementen in einem Dokument, und diese sind nicht zum Verlassen des Anzeigebereiches des Dokumentes zu bewegen.

                    gruß,
                    wahsaga

                    --
                    /voodoo.css:
                    #GeorgeWBush { position:absolute; bottom:-6ft; }
                2. Hallo Mel!

                  http://www.sesamstrassenkind.de/popup.png (100kb)

                  Ein Versuch, ein Systemfenster _innerhalb_ des Dokuments einigermaßen nachzubilden, ist die Eibox (letzter Stand online).

                  Abgesehen davon, dass sie bei weitem nicht ausgereift ist, sind einige Nachteile im Vergleich zu dem, was Du hier beschrieben hast:

                  • einmal geöffnet, lässt sie sich nicht mehr vergrößern*
                  • lassen sich außerhalb des Dokuments nicht ziehen, da haben
                      Dir die Kollegen schon erklärt warum. Sollte das allerdings
                      eine unabdingbare Bedingung sein, musst Du auf echte
                      Popup-Fenster zurückgreifen (window.open) - mit allen
                      Nachteilen angesichts des Tabbed Browsings und der vielen Popupblocker.

                  * war von mir für den Einsatz auf meinen Seiten nicht erwünscht,
                    ließe sich sicher dennoch realisieren

                  Immer wieder mal füge ich Verbesserungen oder Erweiterungen hinzu (Anregungen und Hilfe dafür erhielt ich im entsprechenden Thread, zuletzt habe ich den Grund für den Darstellungsfehler beim Draggen in den Opera-Browsern gefunden, kann den Fehler auch beheben, leider gefällt es dann dem IE nicht mehr ;) Werde beizeiten vielleicht ein CSS-Thread diesbezüglich öffnen.

                  Mit den Antworten hier und den vorgestellten Modellen hast Du nun genug Möglichkeiten, selbst ein eigenes Modell auf die Beine zu stellen!

                  Viele Grüße aus Frankfurt/Main,
                  Patrick

                  --

                  _ - jenseits vom delirium - _
                  <hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash>
                  1. Hi Patrick

                    danke für den link aber das was ich eigentlch möchte geht leider nicht wie weiter unten deutlich wird.

                    kann man nix machen!

                    vg melanie