Position einer Ebene festlegen

gsguitar schrieb am 07.02.2012 um 20:57 Uhr

Hallo,

ich möchte im Webdesigner 7 Premium auf einer Seite die Position einer Ebene, die sich mit einem Klick auf einen link einblendet, festlegen.

Die Ebene besteht aus einem großen Rechteck, das die dahinterliegenden Seiten abdunkelt, einem kleineren weißen Rechteck und einem Text darauf. Wenn sie eingeblendet ist, soll das weiße Rechteck mit dem Text immer zentral in der Mitte des Browserfensters fixiert sein, also nicht "mitscrollen", wenn das Mausrad gedreht wird.

Gibt es einen Code, den ich in den html-Code der Seite einfügen kann, der dies erreicht? Oder gibt es noch eine andere Möglichkeit?

Hier mein Beispiel: http://www.kastenschmidt.de/ebenentest/ebenentest.htm

auf dieser Seite: http://www.brain4.de/programmierecke/js/layerVisibility.php#start z.B. bewegt sich das gelbe Feld rechts unten nicht mit. So soll es bei mir auch aussehen, nur eben zentriert auf dem Bildschirm.

Und noch etwas: ich habe das "Fenster-schließen"-X selbst dahingestrickt - wohlwissend, dass man überall klicken kann, um die Ebene wieder auszublenden. Gibt es eine Möglichkeit, dort ein "echtes" Ebene-schließen-X hinzusetzen, bei dem der Hilfstext und die Klick-Hand automatisch (also ohne meine Trickserei) erscheinen?

Danke schonmal im Voraus für eure Hilfe,

Gruß, Karsten

 

Kommentare

BeRo schrieb am 08.02.2012 um 14:31 Uhr

[...] ich möchte [...] auf einer Seite die Position einer Ebene [...] festlegen. [...] Wenn sie eingeblendet ist, [...] immer zentral in der Mitte des Browserfensters fixiert sein [...]

Es gibt mehrere Möglichkeiten, das zu realisieren. Die m. E. "einfachste" ist die, ein geeignetes Javascript zu nutzen.

So gehst Du vor:

  1. Neue Ebene auf der Seite anlegen und ihr z., B. mit den Namen "pop (lock)" geben. Der Namenszusatz "(lock)" ist zwingend. Damit wird das Popup permanent eingeblendet.
     
  2. Geeignetes Objekt (Bild/Grafik/Text), das später eingeblendet wird, so auf der Ebene anlegen und positionieren, wie es auf der Hauptseite erscheinen soll.
     
  3. Kleine Grafik erstellen, die als "Ausschalter" benutzt werden kann (z. B. schwarzes Quadrat mit rotem Punkt) und auf das unter 2 erstellte Objekt legen. Der Grafik den Link "popup:close" zuweisen als "Link auf Internet oder E-Mail-Adresse:"
     
  4. An beliebiger Stelle auf der Ebene einen kleinen Platzhalter (Rahmen) anlegen, dem der Javascript Code zugewiesen werden kann, mit dem das Popup Objekt in der Position fixiert wird.
     
  5. Auf der Hauptseite an geeigneter Stelle einen Link auf die Popup Ebene definieren.
     
  6. Das war's


So sieht die Hauptseite in meinem Beispiel aus, mit eingeblendeter "pop (lock)" Ebene:


Hier habe ich den kleinen Platzhalter untergebracht, für den Javascript Code, mit dem das Popup fixiert wird.

Hier der Script Code, den Du mit copy & paste übernehmen kannst, wenn Du die 6 Hash Zeichen # gegen öffnende, spitze Klammern tauschst:

--------------------------------------------
#div class="my_noscroll_id">#/div>
#script class="text/javascript">//#!--
if(!my_noscroll_used){my_noscroll_old = window.onscroll; window.onscroll=my_noscroll;}
var my_noscroll_sxo=0;var my_noscroll_syo=0;
function my_noscroll(e){var sx=0;var sy=0;
if(my_noscroll_old)my_noscroll_old(e);
if(typeof(window.pageXOffset)=='number'){sx=window.pageXOffset;sy=window.pageYOffset;}else if(document.body && (document.body.scrollLeft || document.body.scrollTop))
{sx=document.body.scrollLeft;sy=document.body.scrollTop;}else{ sx=document.documentElement.scrollLeft;sy=document.documentElement.scrollTop;};
var t = document.getElementsByTagName("div");var i;
for(i=0; i#t.length; i++) {
if (t[i].className=="my_noscroll_id"){var o=t[i].parentNode.parentNode.parentNode;
o.style.left=(parseInt(o.style.left)+sx-my_noscroll_sxo)+"px";o.style.top=(parseInt(o.style.top)+sy-my_noscroll_syo)+"px";
};};my_noscroll_sxo=sx;my_noscroll_syo=sy;};
var my_noscroll_used=1;//-->
#/script>
--------------------------------------------

Hier der Script Code im Original, zum Vergleich:


So sieht der Link "popup:close" aus, den ich dem "Ausschaltbutton" mitgegeben habe. Die Popup Ebene lässt sich nur nach einem Klick auf diesen Button ausblenden.


Wenn Du das Ergebnis online testen möchtest, klick mal hier.
Die Popup Ebene wird aktiviert, wenn Du auf der Seite oben rechts auf den Schriftzug "Popup-Demo" klickst.

Die fertige Projektdatei (pufix.web), inkl. Scriptcode,  kannst Du Dir hier als ZIP komprimierte Version für eigene Experimente herunterladen.

Viel Erfolg und viel Spaß beim Website Design...

Zuletzt geändert von BeRo am 08.02.2012, 14:31, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

gsguitar schrieb am 08.02.2012 um 15:40 Uhr

was soll ich sagen... genial!!! Vielen Dank, es funzt einwandfrei und sieht gut aus.

So habe ich's mir vorgestellt.

Herzliche Grüße,

Karsten

marcusdytrich schrieb am 02.05.2014 um 02:24 Uhr

Hallo BeRo,

deine Beschreibung funktioniert wunderbar. 
Jetzt habe ich nur eine Frage:

Ich möchte, das die fixierte Ebene gleich zu sehen ist, wenn sie die Webseite lädt, ohne das ich zuerst einen Objekt anklicke. 
 

Wenn ich anhand deiner Vorlage das Objekt "Popup Demo" entferne und in die Vorschau gehe, ist zwar das Bild von Anfang an zu sehen, allerdings ist nun nicht nur das Bild fixiert, sondern die komplette Webseite und es kann nicht mehr gescrollt werden. 

Hast du dafür eine Lösung? Wahrscheinlich ist es nur ein Befehl, der in deinem Code geändert werden muss.

Wäre schön von dir zu hören.

Viele Grüße

Marcus

 

BeRo schrieb am 02.05.2014 um 13:30 Uhr

@ marcusdytrich

Du kannst den Link auf die popup Ebene unverändert bestehen lassen. Du musst nur dafür sorgen, dass das "hinter" dem Link liegende Script schon beim Seitenaufruf ausgeführt wird...

Wie das geht, das habe ich schon mehrfach in diversen Threads beschrieben z. B. hier.

Damit sollte Dein Problem mit ein paar Mausklicks vom Tisch zu ziehen sein

Viel Erfolg

Zuletzt geändert von BeRo am 02.05.2014, 13:30, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓