orientatie.js
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var orientation;
// niet alle mobiele browsers ondersteunen de 'orientationchange' dus we gebruiken 'resize' als fallback
var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
window.addEventListener(orientationEvent, setOrientation, false);
window.addEventListener("load", setOrientation, false);
function setOrientation(){
orientation = (screen.width > screen.height) ? "landscape" : "portret";
// hieronder doen wat je wilt afhangend van de orientatie
if(orientation == "portret"){
// 2 elementen onder elkaar;
document.getElementById('element_1').style.cssFloat = "none";
document.getElementById('element_2').style.cssFloat = "none";
} else {
// 2 elementen naast elkaar;
document.getElementById('element_1').style.cssFloat = "left";
document.getElementById('element_2').style.cssFloat = "left";
}
}
// niet alle mobiele browsers ondersteunen de 'orientationchange' dus we gebruiken 'resize' als fallback
var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
window.addEventListener(orientationEvent, setOrientation, false);
window.addEventListener("load", setOrientation, false);
function setOrientation(){
orientation = (screen.width > screen.height) ? "landscape" : "portret";
// hieronder doen wat je wilt afhangend van de orientatie
if(orientation == "portret"){
// 2 elementen onder elkaar;
document.getElementById('element_1').style.cssFloat = "none";
document.getElementById('element_2').style.cssFloat = "none";
} else {
// 2 elementen naast elkaar;
document.getElementById('element_1').style.cssFloat = "left";
document.getElementById('element_2').style.cssFloat = "left";
}
}