Facebook Feeling

Hi,

das was du im neuen Fenster siehst ist ein sog. FORMULAR

- das kann man "zu Fuss" machen, z.B.
http://de.selfhtml.org/html/formulare/index.htm

- oder man bedient sich eines professionellen Werkzeuges, z.B.
http://www.formular-generator.de/
 

Ja danke, werde mir das mal ansehen...

Sorry, bin selber kurz auf der Leitung gestanden.
Es geht mir nicht um das Formular, vielmehr geht es um das Fenster, das dieses Formular beinhaltet.

Wie wird das erzeugt? Gibt es da auch fertigen Code oder ähnliches?

Es sieht doch einfach nett aus mit dem durchsichtigen Rand.

Vielleicht kann da auch jemand helfen?

Sorry, bin selber kurz auf der Leitung gestanden.
Es geht mir nicht um das Formular, vielmehr geht es um das Fenster, das dieses Formular beinhaltet.

Wie wird das erzeugt? Gibt es da auch fertigen Code oder ähnliches?

Es sieht doch einfach nett aus mit dem durchsichtigen Rand.

Vielleicht kann da auch jemand helfen?

So etwas nennt sich seit einigen Jahren "Pop-Up" und wird mittels JavaScript realisiert. Statt die Seite bildschirmfüllend zu präsentieren, wird mittels JavaScript die Fenstergröße angepasst. Alternativ geht das auch per Layer/Ebene mit CSS.

mein (hand-geschnitztes) Beispiel zum Thema PopUp-Fenster

Wenn man sich den Effekt auf Facebook ansieht, dann sieht man schon, dass es sich dabei nicht einfach nur um ein Popup-Fenster handelt. Die Methode ist da schon etwas feiner.

Es wird sicher über Javascript realisiert aber ich denke, dass es sich dabei um komplexen Code handelt. Mit einfacher Größenanpassung eines Fensters ist das nicht vollbracht.

Vielleicht trifft doch jemand den Kern der Sache...

LG
Andy


 

 

Wenn man sich den Effekt auf Facebook ansieht, dann sieht man schon, dass es sich dabei nicht einfach nur um ein Popup-Fenster handelt. Die Methode ist da schon etwas feiner.

Es wird sicher über Javascript realisiert aber ich denke, dass es sich dabei um komplexen Code handelt. Mit einfacher Größenanpassung eines Fensters ist das nicht vollbracht.

  Nein, Facebook hat natürlich supergeheime, für den Rest der Menschheit noch nicht zugängliche Techniken....DENK NACH EHE DU SCHREIBST. Das ganze wird über JavaScript +- CSS +- HTML +- PHP (oder ASP) realisiert, so wie auf jeder anderen Website auch. Augenmerk hier auf den Begriff CSS + LAYER. Hättest Du mehr Ahnung von der Materie, würdest Du es verstehen. Also: "Popup" als grobe Definition, ob alleine per JavaScript, per JavaScript + DHTML oder JS + CSS - so und nicht anders.

BTW.: installiere Dir "zum Spass" ein Wordpress... lade Dir den WP-Plugin CForms herunter und siehe da, CForms kann Dir nach ein paar Zeilen Anpassung des CForms CSS Formularfenster wie gezeigt per "Knopfdruck" erzeugen... Simsalabim...

Danke lieber Experte für diese ausführliche Darstellung. Warum stellt auch so ein Trottel wie ich, der sich nicht jeden Tag mit CSS, PHP und Javascript beschäftigt, in diesem Forum eine Frage?
Tut mir ja furchtbar leid, wenn ich den Superstar des Webdesign beleidigt habe.
Zumindest der Ratschlag hat etwas gutes, bevor man schreibt sollte man denken, das tut so manchem hier gut.

Und für die anderen: Fragt hier nur, wenn ihr Experten seid, Unwissenheit wird hier bestraft.

 

Hi |

Schau dir auch mal das hier an: http://www.mjijackson.com/shadowbox/

Ist zwar ein MediaViewer, aber mit der Methode "Inline Content" kannst du sicherlich ein Formular in ein solches "Fenster" einbauen und als Action einen Ajax-Request absetzen, sodass die Seite nicht neu geladen wird und der Effekt wie bei Facebook aussieht.

greez
JoSsiF

Bitte an unsere Regeln/Netiquette halten, PWT!


Andy: Schau mal hier, da (Text + Quellcode) ist ein Layer auch über dem Hintergrund, und sogar halbtransparent.
http://www.grafik-blog.de/140-halbtransparenz-im-web.html
Statt Text könnte darin dein Message-Formular stehen. Wenn du so etwas hinbekommen hast, können wir uns um das ein- und ausblenden kümmern :-)
Auch eine gute Anlaufstelle: www.w3schools.com

also das mit den durchsichtigen Layern funktioniert ganz gut, jetzt fehlt nur mehr das ein- und ausblenden.

Gibt es dazu auch eine gute Seite mit Tipps?

Erst einmal hier zum "CSS visibility Property":
http://www.w3schools.com/CSS/pr_class_visibility.asp


Dann gibst du dem einzublendenden Layer eine ID, etwa

<div id="eins">
Damit kann er nachher angesprochen werden.

Zunächst soll er sowieso unsichtbar sein, also:

<div id="eins" style="visibility:hidden;">

dann kannst du ihn per Javascript-Link anzeigen:

var y = document.getElementById("eins");y.style.visibility = "visible";
(Das z.B. als JS-Funktion und dann mit <a href="javascript:function();"> aufrufen)

Ja danke, das mit der Sichtbarkeit ist soweit klar. Aber wie sieht es mit dem langsamen (stufenlosen) Ein- und Ausblenden aus bzw. wenn der neue Layer voll sichtbar ist mit dem Abdunkeln der restlichen Seite?

Im Moment sieht das ganze so bei mir aus:

 

Der Code dazu:
 

<style type="text/css">
#logobox {
margin: 0pt;
background-color:white;
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
position:absolute; top:320px; left:300px; width:250px; height:200px;
border:1px solid #aaaaaa;
-moz-border-radius:5px;
-khtml-border-radius:10px;
}

#logo {
margin: 0pt;
background-color:#39F;
position:relative; top:10px; left:10px; width:230px; height:180px;
}
</style>

Und zur Darstellung:

 

<div id="logobox"><div id="logo">Testbox</div></div>

Wie kann ich jetzt den inneren Layer undurchsichtig machen, so dass nur der Rahmen durchsichtig bleibt?
Und wer eine Antwort auf obige Fragen hätte, wäre auch mein Star für eine Nacht ;-)

Rahmen und innerer Layer sollten 2 voneinander unabhängige Layer sein. Folglich kannst du deren Opazität auch getrennt regeln, was die Frage nach dem durchsichtigen Rahmen beantwortet.

Den Blendeffekt kriegst du hin, indem du die Opazität per JavaScript in einer Iteration stufenweise änderst.

greez
JoSsiF