innerHeight

[JeroenE]

Hallo,

Hoe komt het dat screen.availHeight wel werkt en window.innerHeight niet?
Als ik het volgende in mijn site zet om te zien of het werkt, alert(window.innerHeight), dan krijg ik undefined als uitkomst.
Hoe komt dat?

 

[JeroenE]

Blijkt dat het mijn browsers waren die het niet wilden aanvaarden. Eigenaardig genoeg geen enkele (ie, chrome, ff, safari, opera) en ook niet op mijn iPad
Het volgende probleem is dat het de div niet vertikaal gecentreerd staat zoals het zou moeten zijn.

[JS]
var ny = -170;
var ntop = Math.floor((window.innerHeight - 360)/2);
function flogin(n) {
if (n) {
document.getElementById("blurdiv").style.display = "block";
if (ny < ntop) {
ny++;
};
} else {
if (ny > -170) {
ny--;
};
};
document.getElementById("logindiv").style.top = ny + "px";
if ((ny > -170 && n == 0) || (ny < ntop && n == 1)) {
setTimeout("flogin(" + n + ")", 2);
};
if (ny == -170) {
document.getElementById("blurdiv").style.display = "none";
};
};
[/JS]

 

[Domero]

Natuurlijk kun je met absolute positionering dit uitrekenen maar om verticaal te centreren op de body kun je ook de volgende CSS gebruiken:

.centbox {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
margin: auto;
}

<div class="centbox"><div>Hier wat inhoud</div></div>

 

[JeroenE]

Dank je wel, Domero, voor de hulp. Ik zal dit in de toekomst zeker kunnen gebruiken.
Wat ik er echter niet heb bij verteld, en wat misschien ook moeilijk uit te maken valt uit het script, is dat, bij het aanroepen van de functie "flogin(1);" of "flogin(0)", de div van buiten het scherm naar beneden schuift tot in het midden of omgekeerd.

 

[Domero]

maak een div van 1 pixel en centreer die via de css methode en zet die op onzichtbaar, lees de positie uit met id.offsetTop en je hebt je coordinaten

 

[JeroenE]

Niet wat ik eerst in gedachten had, maar een veel betere oplossing dus.
Dank je wel, Domero. Het werkt perfect :thumb:

Hier even de oplossing zoals ik die gemaakt heb (met -webkit... blijft de browser hangen)

De style:

#refdiv {
	position: absolute;
	z-index: -1;
	height: 1px;
	width: 1px;
	top: 50%;
	left: 50%;
}

Het javascript:
[JS]
var ny = -170;
var ntop = 0;
function flogin(n) {
if (!ntop) ntop = Math.floor(document.getElementById("refdiv").offsetTop - 110/2);
if (n) {
document.getElementById("blurdiv").style.display = "block";
if (ny < ntop) {
ny++;
};
} else {
if (ny > -170) {
ny--;
};
};
document.getElementById("logindiv").style.top = ny + "px";
if ((ny > -170 && n == 0) || (ny < ntop && n == 1)) {
setTimeout("flogin(" + n + ")", 2);
};
if (ny == -170) {
document.getElementById("blurdiv").style.display = "none";
};
};
[/JS]

 

[Domero]

HTML5 is de browser laten doen wat jij in gedachten hebt.. en o wat is dat een gevecht soms hihi nice Jeroen!