[PHP/JS] Formular per Klick auf Link einblenden (im DIV-container)

[Muuhmann]

Hi leute,

habe eben durch Zufall dieses kleine "Gimmick", so nenn ichs mal, entdeckt und wollte jetzt wissen, wie ich sowas realisieren kann, denn in JS kenn ich mich absolut nicht aus..
Das würde sich nämlich gut für mein CD-Archiv machen...

Leider gibt mir der Sourcecode keinerlei aufschlüsse.. kann auch sein, dass es daran liegt, dass ich mich in dem gewirr von der Seite da nicht zurecht finde ^^

Für Tuts oder Links oder sogar schon fertige Lösungen wäre ich sehr dankbar!

MfG, Muuhmann

p.s. da war der finger wieder schneller als ich ^^
Bild und link vergessen:
http://www.utorrent.com/skins.php

 

[fliegenkiller]

mach ein DIV Containertag:

<div id="formdiv" style="position:absolute; visibility:hidden">inhalt</div>

=> Anmerkung: Du kannst auch display:none verwenden

Jetzt wenn du auf Edit klickst wird ein JS ausgeführt, das, sofern du nicht angemeldet bist, das Formular anzeigt:

<a href="#" onclick="javascript:document.getElementById('formdiv').style.display='block';">Edit</a>
or <a href="#" onclick="javascript:document.getElementById('formdiv').style.visibility='visible';">Edit</a>

Überprüfen, ob der Benutzer angemeldet ist, mittels Cockie oder ganz eifach der Inhalt des DIV Tags wird durch PHP bestimmt

if($user_logged_on)
{
  //show edit mask
}
else
{
  //show login form
}

Notes: Habe nicht getestet... müsste aber eigentlich funktionieren, sofern ich den Code richtig im Kopf habe...

Edit: kleiner Fehler geändert bei "...visibility=hidden"

 

[Muuhmann]

hey! cool danke!

klappt soweit, aber wie schaffe ich es, dass wenn ich z.B. mehrere "edit"-links habe und die Seite scrollbar ist, dass dieses div dann immer z.b. 100px über dem edit link erscheint...

also im moment ist es so, dass wenn ich auf einen edit-link "ganz oben" klicke erscheint das div.. soweit so gut, aber wenn ich auf einen edit-link "ganz unten", also ich musste schon mehrmals scrollen, klicke springe ich trotzdem an den anfang der seite, aber ich hätte gerne, dass der meinetwegen 300px vom "fensterrand oben" erscheint, und zwar immer...
verstehst du was ich meine?

guck dir mal die seite an, dann verstehst du was ich meine..

 

[fliegenkiller]

dann nimmst du "position: fixed;" statt "position: absolute" und du kannst mit den styleattributen "top" und "left" die Abstände zum linken und zum oberen Rand bestimmen. (oder auch zu einem anderen Objekt...)
Bsp:

<div style="position:fixed; top:5px; left:100px; visibility:hidden">CONTENT</div>

 

[Muuhmann]

klappt leider nicht.. gleiches verhalten wie vorher...

 

[fliegenkiller]

versuch sonst eine relative Positionsangabe zu machen. (position:relative) und dann platzierst du das DIV im Quelltext direkt neben dem Edit Link. Du kannst dann mit den Attributen top und left die Position relativ zum Anker verschieben (Anker ist der Ort im Quelltext, wo das DIV stehen würde). Der Wert in Pixel kann auch negativ sein.

Ein Beispiel, dass das DIV-Tag um 50px nach oben und 100px nach links verschiebt. (in Bezug auf die normale Position)

<a href="#">EDIT</a><div style="position:relative; top: -50px; left:100px">Content</div>