I am attaching a listener to the orientationchange
event:
window.addEventListener('orientationchange', function () {
console.log(window.innerHeight);
});
I need to get the height of the document after the orientationchange
. However, the event is triggered before the rotation is complete. Therefore, the recorded height reflects the state before the actual orientation change.
How do I register an event that would allow me to capture element dimensions after the orientation change has been completed?
Use the resize event
The resize event will include the appropriate width and height after an orientationchange, but you do not want to listen for all resize events. Therefore, we add a one-off resize event listener after an orientation change:
Javascript:
window.addEventListener('orientationchange', function() {
// After orientationchange, add a one-time resize event
var afterOrientationChange = function() {
// YOUR POST-ORIENTATION CODE HERE
// Remove the resize event listener after it has executed
window.removeEventListener('resize', afterOrientationChange);
};
window.addEventListener('resize', afterOrientationChange);
});
jQuery:
$(window).on('orientationchange', function() {
// After orientationchange, add a one-time resize event
$(window).one('resize', function() {
// YOUR POST-ORIENTATION CODE HERE
});
});
Do NOT use timeouts
Timeouts are unreliable - some devices will fail to capture their orientation change within your hard-coded timeouts; this can be for unforeseen reasons, or because the device is slow. Fast devices will inversely have an unnecessary delay in the code.