webView and device rotation

[HughJohnson]

Sorry it doesn't do anything for native controls.

Doh, I was so hoping I was just missing something and it did work.

[rue]

... the innerWidth doesn't seem to get updated until after the 1st pageDidRotate() function execution.

Yeah I had the same problem but it fires the page did rotate function when the app starts in landscape, so it fixes it correctly. Is this not the case for you? I only tried on iPad2 so could be different for you.

I haven't tested your code on a real device... just on the Simulator. So I don't know if a real device will not have this problem.

Can someone check this code on a real iPhone???

[cactuscraig]

what I use is:

Code: Select all

 function pageDidRotate()
    {
        setTimeout("modifyElements()",100); 
    }

Because of asynchronicity the window.innerWidth & window.innerHeight are not set right away. By doing a 100ms timeout, gives time for the device to rotate, then fire the function.

[ritchielee]

Hi
If it's any help to anyone, I've tested on an ipad various connotations of the code posted in this thread and found that although not perfect, a combination works best (see below). You will still get a split view if you rotate main2.html and then go back to main.html, but the user can rectify with a turn.

Code: Select all

function pageWillRotate(degree) { 
              webView.init(0,0,window.innerWidth,window.innerHeight);
           }

function pageDidRotate(degree) {
         setTimeout(modifyElements,100);  
            webView.init(0,0,window.innerWidth,window.innerHeight);

           }

[cactuscraig]

What is in your modifyElements function ?

Code: Select all

function modifyElements()
{
   // Do something...
}

And, correcting my previous post, it should be

Code: Select all

setTimeout("modifyElements()",100);

[ritchielee]

Hi

Thanks for posting: realised that 'function call' & timeout can be omitted for the results I managed.

Did you have anything in there that would help on the last problem - switching back to main after page 2?

ps. thanks for your posts and samples all over the forum which have helped me get to grip with things

R

[cactuscraig]

not sure I understand your issue, exactly. Have you tried using the setTimeout function ? I find the iPad doesn't get the results of the window.inner? right away.

Code: Select all

function pageWillRotate(degree) { 
     setTimeout("initWeb()",500);
             
           }

function pageDidRotate(degree) {
         setTimeout("initWeb()",500);

           }

function initWeb()
{ 
      webView.init(0,0,window.innerWidth,window.innerHeight);
}

[ritchielee]

I see what you're trying to do, but it only adds a jump to the resizing of the content on rotate.

I'll try and describe the problem better, which you've all mentioned BTW:

If I'm on page one [portrait], then navigate to page two. Then on page two I rotate to [landscape], then switch back to page one: the page is cached in portrait mode, so you end up with the 70/30 split page.

[cactuscraig]

Code: Select all

<script type="text/javascript">
    function NKIsPageSupportsAutoOrientation()
    {
        return "yes";
    }
    
    
    var w = new NKWebView();
    w.init(0,20,window.innerWidth,window.innerHeight);
    
    w.loadURL("http://nimblekit.com/");
    w.setScalesToFit("yes");
    w.show();
    
    function reInitWeb()
    {
        NKLog ("WIDTH: " + window.innerWidth);
        w.init(0,20,window.innerWidth,window.innerHeight);
    }
    
    function onPageShown()
    {
        reInitWeb();

    }
    function pageDidRotate(degree) {
        NKLog ("!");
        setTimeout("reInitWeb()",500);  
            
    }
    
    
       
    var navController = new NKNavigationController();
    navController.setTitle("NavCon");
    
    var nkb = new NKButton();
    nkb.init(0,0,100,20,"pageTwo()");
    nkb.setTitle("Page 2");
    nkb.show();
    
     modal = new NKModalWindow();
     var nkt = new NKTextField();
    function pageTwo()
    {
        navController.gotoPage("page2.html");
       
        
           
    }
  
    
    </script>

[ritchielee]

Awesome, but with just one little tweak, as the timeout still caused a jump.

This works perfectly:

Code: Select all

function pageWillRotate(degree) { 
webView.init(0,0,window.innerWidth,window.innerHeight);
}

function pageDidRotate(degree) {  
webView.init(0,0,window.innerWidth,window.innerHeight);
}

function reInitWeb() {
webView.init(0,0,window.innerWidth,window.innerHeight);
}

function onPageShown() {
reInitWeb();
}