[GELÖST] Popup an bestimmter Stelle des Browsers öffnen

Yogilein · 13. Okt. 2014

Hi,

ich verzweifle mal wieder

Voraussetzung: Großer Bildschirm, in dem der Browser nur einen Teil einnimmt.

Und zwar möchte ich, dass sich ein Popup-Fenster links im Browser öffnet. Beim IE geht das, solange der Browser nicht zu weit rechts liegt, bei Chrome geht es grundsätzlich nicht. Da liegt das Popup immer links oben am Bildschirm. Das finde ich unpassend.

Kennt ihr eine Möglichkeit, dass das Popup immer nur innerhalb des Browserfensters geöffnet wird?

miniA4kuser · 13. Okt. 2014

Was hast du denn bis jetzt probiert (Code)?

Yogilein · 13. Okt. 2014

Na, ja, so viele Möglichkeiten kenne ich gar nicht. Mit "left" und "top" ging es schon einmal gar nicht, da die von mir getesteten Browser grundsätzlich dies auf den Bildschirm und nicht auf das Browserfenster bezogen. Daher habe ich es jetzt komplett ohne diese Angaben gemacht, was aber von den Browsern unterschiedlich interpretiert wird.

Opera macht es ganz in meinem Sinne.
Firefox macht es auch noch gut.
Safari und IE verschieben in die linke Bildschirmecke, wenn der Browser sehr weit rechts liegt.
Chrome verschiebt grundsätzlich in die linke Bildschirmecke.

mikdoe · 14. Okt. 2014

Zeig doch mal den Code, was du genau probiert hast. Es gibt ja mehrere Wege, ein Fenster zu öffnen. Welche Kommandos hast du bisher versucht?

Yogilein · 14. Okt. 2014

Hier mal ein Original-Aufruf:

Code:

MeinFenster=window.open("http://www.yogispiele.de/Spiele/Kaeferli4/Highscore_10.php","Kaeferli4_Highscore","width=420,height=320");
MeinFenster.focus();

Und wie gesagt, "top" und "left" verschlimmbessert es eher.

dbarthel · 14. Okt. 2014

Yogilein schrieb:
Mit "left" und "top" ging es schon einmal gar nicht, da die von mir getesteten Browser grundsätzlich dies auf den Bildschirm und nicht auf das Browserfenster bezogen.

dann beziehe es doch auf das Browserfenster.

Möglichkeit 1:

Code:

var width = window.innerWidth ||                      // alle Browser
  (window.document.documentElement.clientWidth ||     // IE im Standard-Mode
   window.document.body.clientWidth);                 // IE im Quirks-Mode
var height = window.innerHeight || 
   (window.document.documentElement.clientHeight || 
    window.document.body.clientHeight);

Möglichkeit 2:

Code:

var width = document.body.offsetWidth;
var height = document.body.offsetHeight;

----------------

Also müsstest du den Code:

Code:

LeftPosition=(screen.availWidth)?(screen.availWidth-w)/2:46;
TopPosition=(screen.availHeight)?(screen.availHeight-h)/2:20;

entsprechend anpassen, also bei Möglichkeit 1, etwa so:

Code:

LeftPosition= (window.innerWidth ||  (window.document.documentElement.clientWidth || 
window.document.body.clientWidth))?(window.innerWidth || window.document.documentElement.clientWidth || 
window.document.body.clientWidth)-w)/2:46; // 46 = Abstand von Links

TopPosition=(window.innerHeight || (window.document.documentElement.clientHeight || 
window.document.body.clientHeight))?( window.innerHeight || (window.document.documentElement.clientHeight || 
window.document.body.clientHeight)-h)/2:20 //20 = Abstand von oben


settings='width=420,height=320,top='+TopPosition+',left='+LeftPosition+',scrollbars=no,location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no';


win=window.open("http://www.yogispiele.de/Spiele/Kaeferli4/Highscore_10.php","Kaeferli4_Highscore",settings);
if(win.focus){win.focus();}}

Yogilein · 14. Okt. 2014

Danker, guter Ansatz, aber irgendwie scheint er noch nicht richtig zu funktionieren.

Ich habe den Code (nach ein paar kleinen Änderungen in der Syntax) jetzt mal so ausprobiert:

Code:

LeftPosition= (window.innerWidth ||  (window.document.documentElement.clientWidth || 
window.document.body.clientWidth))?(window.innerWidth || (window.document.documentElement.clientWidth || 
window.document.body.clientWidth)-w)/2:46; // 46 = Abstand von Links

TopPosition=(window.innerHeight || (window.document.documentElement.clientHeight || 
window.document.body.clientHeight))?( window.innerHeight || (window.document.documentElement.clientHeight || 
window.document.body.clientHeight)-h)/2:20; //20 = Abstand von oben


alert(LeftPosition);
alert(TopPosition);


settings='width=420,height=320,top='+TopPosition+',left='+LeftPosition+',scrollbars=no,location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no';

win=window.open("http://www.yogispiele.de/Spiele/Kaeferli4/Highscore_10.php","Kaeferli4_Highscore",settings);
if(win.focus){win.focus();}

Durch alert lasse ich mir die Position anzeigen. Die ist aber immer gleich, egal wohin ich das Browserfenster verschiebe. Es wird also nicht die Position links oben ermittelt. Die Angabe ändert sich aber in Abhängigkeit der Fenstergröße (auch wenn die Position links oben gleich bleibt).

dbarthel · 14. Okt. 2014

Yogilein schrieb:
Durch alert lasse ich mir die Position anzeigen. Die ist aber immer gleich, egal wohin ich das Browserfenster verschiebe. Es wird also nicht die Position links oben ermittelt. Die Angabe ändert sich aber in Abhängigkeit der Fenstergröße (auch wenn die Position links oben gleich bleibt).

wieso das Fenster verschieben?

Das Script ermittelt, abhängig von der Größe des Browserfensters, den Abstand von Links und Rechts zum Browserfenster, und positioniert entsprechend das Fenster.
Und die Werte ändern sich, wenn sich die Größe des Browserfensters ändert.

Wenn du also das Fenster ganz oben und ganz links willst, musst du nur den Abstand links/Abstand oben ändern.

Yogilein · 14. Okt. 2014

Ich wollte damit sagen, dass das Popup immer an der selben Stelle aufgeht, egal wo sich mein Browserfenster befindet. Nur wenn ich das Browserfenster in der Größe ändere, geht das Popup auch woanders auf.

Hier noch eine Erklärung in Bildern:

Das Ganze ist mein Bildschirm, das weiße Fenster ist der Browser, das gelbe Fenster das Popup.

Mit deinem Code sieht das z.B. so aus:

Uns so wünsche ich es mir (das Popup erscheint immer an der selben Stelle, bezogen auf das Browserfenster, falls es dort darstellbar ist):

dbarthel · 14. Okt. 2014

Kann sein, das ich da einen Fehler drin hatte, da ich den Teil

Code:

LeftPosition=(screen.availWidth)?(screen.availWidth-w)/2:40;TopPosition=(screen.availHeight)?(screen.availHeight-h)/2:30;

für dich umgeschrieben hatte, da du ja von dem Browserfenster und nicht vom Bildschirm ausgehen willst.

Probier mal folgenden Code:

Code:

<script>


LeftPosition= (window.innerWidth ||  (window.document.documentElement.clientWidth || 
window.document.body.clientWidth))/2+146; // 146 = Abstand von Links

TopPosition=(window.innerHeight || (window.document.documentElement.clientHeight || 
window.document.body.clientHeight))/2+120 //120 = Abstand von oben

settings='width=420,height=320,top='+TopPosition+',left='+LeftPosition+',scrollbars=no,location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no';

alert(settings);

win=window.open("http://www.yogispiele.de/Spiele/Kaeferli4/Highscore_10.php","Kaeferli4_Highscore",settings);
if(win.focus){win.focus();}
</script>

Solange du das Browserfenster nicht in seiner Größe änderst, wird das PopUp immer an der selben Stelle angezeigt, auch wenn du das Browserfenster verschiebst.
Ändert sich die Größe des Browserfensters, wird die Position des PopUp angepasst.

Die Angaben von "Abstand von oben" und "Abstand von links" musst du natürlich anpassen.

- - - Aktualisiert - - -

So wie es auf deinem Screenshot aussieht, willst du das PopUp immer innerhalb des Browserfensters, richtig?

Dafür müsstest du abfragen, welche Position dein Browserfenster auf dem Bildschirm hat und dies dann einsetzen.

Yogilein · 14. Okt. 2014

Zeigt leider immer noch das gleiche Verhalten.

Im Prinzip geht's eigentlich nur darum, die linken, oberen Koordinaten des Browserfensters zu ermitteln.

PS: Das kommt davon, wenn man sich einen etwas größeren Bildschirm zulegt. Vorher ist mir das gar nicht aufgefallen, da das Browserfenster i.d.R. immer so groß wie der Bildschirm war.

dbarthel · 14. Okt. 2014

Yogilein schrieb:
Im Prinzip geht's eigentlich nur darum, die linken, oberen Koordinaten des Browserfensters zu ermitteln.

sag das doch gleich

dann ist dies hier deine Lösung:

Code:

<script>
LeftPosition= (window.innerWidth ||  (window.document.documentElement.clientWidth || 
window.document.body.clientWidth))/2+(screenX-46); // 46 = Abstand vom rand // kann weggelassen werden (nur +screenX;)

TopPosition=(window.innerHeight || (window.document.documentElement.clientHeight || 
window.document.body.clientHeight))/2+(screenY-20) //20 = Abstand vom rand // kann weggelassen werden (nur +screenY;)

settings='width=420,height=320,top='+TopPosition+',left='+LeftPosition+',scrollbars=no,location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no';

win=window.open("http://www.yogispiele.de/Spiele/Kaeferli4/Highscore_10.php","Kaeferli4_Highscore",settings);
if(win.focus){win.focus();}
</script>

ich habe das Fenster jetzt bewusst sensitiv für die Größe des Browserfensters gelassen, aber ausreichend wäre auch, wenn du

Code:

LeftPosition = screenX;
TopPosition = screenY;

benutzt.

Yogilein · 14. Okt. 2014

Ja, das war jetzt die Lösung. Vielen Dank!

Mein Fehler war, das ich immer davon ausgegangen bin, dass screenX und screenY nicht funktionieren, denn ich hatte mal folgendes ausprobiert (sinngemäß):

Code:

MeinFenster=window.open("../Spiele/Wirrwarr/Highscore_10.php","Highscore","width=420,height=320,top=screenY,left=screenX");

Mittlerweile ist mir auch klar, warum es nicht ging: Die Angaben stehen in einem Anführungszeichen, also sind screenX und screenY hier keine Variablen, sondern einfach nur ein Teil des Strings.

Da hätte ich früher draufkommen sollen ...

dbarthel · 15. Okt. 2014

Ja genau so ist es.

j-l-n · 15. Okt. 2014

Nebenbei:

j-l-n schrieb:
das Fenster [wird] vom Pop-Up Blocker geblockt:

Most browsers block popups if they are called outside of user-triggered event handlers like onclick.

Zum Vergrößern anklicken....

PS:

Popups came to us from dark ages, where no AJAX existed. As of now, they are mostly out of use. Dynamic content is loaded into DIV elements or IFRAMEs.
Popups can be abused. A bad page may open tons of popup windows, so most browsers try to block popups and protect the user.

Zum Vergrößern anklicken....

Quelle und weiterführende Info: Popup windows | JavaScript Tutorial

dbarthel · 15. Okt. 2014

zum Thema Pop-Up-Alternative, hier mal eine Übersicht an IQuery basierenden PlugIns, die "PopUps" realisieren: popup | jQuery Plugin Registry

meine Empfehlung: Magnific-popup oder Colorbox

kkapsner · 15. Okt. 2014

Wobei das stark von der Anwendung abhängt. Manchmal muss man das "Popup" und den Hauptinhalt gleichzeitig sehen/bearbeiten können. Dann bin ich der Meinung, dass ein normales Popup doch die beste Lösung ist.

dbarthel · 16. Okt. 2014

Wobei normale Popups eben schon bei vielen Usern von irgendeinem Blocker blockiert werden.

kkapsner · 16. Okt. 2014

Wobei die normalen Blocker ja nicht alle Popups verhindern, sondern nur die, die ohne Nutzerintention geöffnet werden (also ohne click).

[GELÖST] Popup an bestimmter Stelle des Browsers öffnen

Yogilein

Member

miniA4kuser

Lounge-Member

Yogilein

Member

mikdoe

Moderator

Yogilein

Member

dbarthel

Lounge-Member

Yogilein

Member

dbarthel

Lounge-Member

Yogilein

Member

dbarthel

Lounge-Member

Yogilein

Member

dbarthel

Lounge-Member

Yogilein

Member

dbarthel

Lounge-Member

j-l-n

Guest

dbarthel

Lounge-Member

kkapsner

Super Moderator

dbarthel

Lounge-Member

kkapsner

Super Moderator