Vissza stílusokhoz.

Böngésző window ablaka

.
.
.
.

Böngésző window ablakának méretei.
Belépéskor, vagy átméretezést
követő frissítéskor:

Window Ablak X = 0
Window Ablak Y = 0

Ablak átméretezésekor: (resize)

Window Ablak RX = 0
Window Ablak RY = 0

Belépéskor és átméretezéskor:

Window Ablak RX = 0
Window Ablak RY = 0

Egér pozíciója body területén: 0,0


Böngésző ablak. Böngészőablak szélesség: X = $(window).width();
Böngészőablak magasság: Y = $(window).height();

Böngészőablak sarkainak, px értékei:
A = Bal felső: top=0; left=0;
B = Jobb felső: top=0; left=X;
C = Jobb alsó: top=Y; left=X;
D = Bal alsó: top=Y; left=0;
Megjegyzés:
Window Ablak szélessége = body szélességi méretével.

Felhasználó böngészőablakának sarokpozíciói, belépéskor és átméretezéskor:
(Teszteléshez, a böngészőablak négy sarkában elhelyezünk egy-egy 20x20px piros objektumot.)

JavaScript
$(document).ready(function(){
function WinAblak(){
  var Fbx=$(window).width();           // Felhasználó böngészőablakának szélessége.
  var Fby=$(window).height();         // Felhasználó böngészőablakának magassága.
  var FMleft=Fbx-20+"px";                // Elhelyezendő 20x20px méretű objektum, left értéke.
  var FMaTop=Fby-20+"px";            // Elhelyezendő 20x20px méretű objektum, alsó top értéke.

  var MonitorFJobb = document.getElementById("FM_Fjobb");    // Felső-jobb
	MonitorFJobb.style.left=FMleft;
  var MonitorAJobb = document.getElementById("FM_Ajobb");     // Alsó-jobb
	MonitorAJobb.style.top=FMaTop;
	MonitorAJobb.style.left=FMleft;
  var MonitorABal = document.getElementById("FM_Abal");           // Alasó-bal
	MonitorABal.style.top=FMaTop;
}
WinAblak();  // Belépéskor, function WinAblak() függvény meghívása.

           // Böngészőablak átméretezésének ellenőrzése.
$(window).resize(function(){	
		WinAblak();  // Átméretezéskor is, meghívjuk a function WinAblak() függvényt.
	});
});

CSS stílus.
#FM_Fbal, #FM_Fjobb, #FM_Ajobb, #FM_Abal{position:fixed; top:0px; left:0px; width:20px; height:20px; background-color: red;}

XHTML fájl.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link href="stilus.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="windowablak.js"></script>
</head>
<body>
    <!-- Monitor sarokpozícióiba 20x20px divek elhelyezése: -->
    <div id="FM_Fbal">.</div>
    <div id="FM_Fjobb">.</div>
    <div id="FM_Ajobb">.</div>
    <div id="FM_Abal">.</div>
</body>