Fire function before window resizes content on orientation change?

so I've been building myself a mobile webapp and am trying to hide the reshuffle of the layout after the user has rotated the phone (i have a portrait and a landscape layout set by js).

I had thought that I should be able to set $('body').display = "none"; when the resize fires and fade the body back in after a second or so, however the shuffle still happens before the display = "none" kicks in.

Is there any way to fire a function as soon as the page rotates so that i can hide the reshuffling elements? I have also tried onorientationchange listeners but they seem to fire directly after the event has taken place.

Answers:

Answer

you can delay the reshuffling with a timeout:

$(window).resize(function(){
   $('body').hide();
   setTimeout(function(){
      reshuffle();
      $('body').show();
   }, 100);//100ms
});
Answer

You can try doing this:

$.when($('body').hide()).then(function() {
     $(window).resize(function(){
         setTimeout(function(){
             reshuffle();
         }, 100);//100ms
     });
});

documentation

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.