Reload javascript on mobile-device rotation?

Question

I have a script that calculates the height of a div and returns it as a style. But when you rotate mobile-devices the height changes, so I need a way to reload it. How can I accomplish this?

<script type="text/javascript">
window.onload = function() {
    var height = document.getElementById('id').offsetHeight;
    document.getElementById('id').style.marginTop = height + 'px';
}
</script>

I saw it described [here](http://stackoverflow.com/a/2307936/944681) (at least for Android). — Michal Klouda, Sep 07 '12 at 13:42

score 4 · Accepted Answer · answered Sep 07 '12 at 13:42

4

Make a function out of it and call that on both load and resize. No need to reload your page, just call the code again:

<script type="text/javascript">
function calcHeight() {
    var height = document.getElementById('id').offsetHeight;
    document.getElementById('id').style.marginTop = height + 'px';
}

window.onload = calcHeight;
window.resize = calcHeight;

</script>

answered Sep 07 '12 at 13:42

jfriend00

683,504
96
985
979

It works in cases like `alert("resize event detected!");` but not for my script. Why? – nicolas Sep 07 '12 at 14:33
@nicolas - Perhaps you need to reset the marginTop back to it's default value (like it was when the page was loaded) before getting the offsetHeight. There's probably a better way to do what you're trying to do, but without seeing the HTML, we can't advise on that. – jfriend00 Sep 07 '12 at 22:42

score 3 · Answer 2 · answered Sep 07 '12 at 13:44

You can create a function:

function setHeight() {
   var height = document.getElementById('id').offsetHeight;
   document.getElementById('id').style.marginTop = height + 'px';
}

That you can call onload:

window.onload = function() {
   setHeight();
   // Other actions when window is loaded
}

And onresize:

window.onresize = function(event) {
   setHeight();
   // Other actions when window is resized
}

This should do the job.

Reload javascript on mobile-device rotation?

2 Answers2