NimbleKit - fast iOS app development

webView and device rotation

Forum for posting sample code and examples, new posts creation is not allowed, but everybody can comment

Re: webView and device rotation

Postby cactuscraig » Tue Oct 04, 2011 5:07 pm

not sure what you mean by "a jump" - I actually need the setTimeout, otherwise, my device does not get the correct screen dimensions.
and why not put reInitWeb(); in page did and page will Rotate as well?
User avatar
cactuscraig
 
Posts: 849
Joined: Thu Feb 03, 2011 5:15 pm
Location: Scottsdale, AZ

Re: webView and device rotation

Postby ritchielee » Tue Oct 04, 2011 6:09 pm

I'm running an ipad1 with 4.3.3, what about you?

The timeout made my pad change the page size after a rotate, which kind of makes the page pop or jump in; without it it's a fluid transition between the two.

As for the reinit - I only need it on pageshown for page changes, pagedid and pagewill behave well without.
ritchielee
 
Posts: 8
Joined: Wed Sep 28, 2011 3:20 pm

Re: webView and device rotation

Postby cactuscraig » Tue Oct 04, 2011 6:15 pm

sure - but why not all point to the 1 line of code. thus any future changes get changed in 1 place, and not three... or more.

Thinking back, maybe my code was only tested in Simulator... and that I would not need the timeout on the actual device.
User avatar
cactuscraig
 
Posts: 849
Joined: Thu Feb 03, 2011 5:15 pm
Location: Scottsdale, AZ

Re: webView and device rotation

Postby ritchielee » Tue Oct 04, 2011 9:14 pm

sure thing - altered my code to set the view in reinit only. works just as well.
thanks again for the reinit and pageshown code.
ritchielee
 
Posts: 8
Joined: Wed Sep 28, 2011 3:20 pm

Re: webView and device rotation

Postby remcob00 » Wed Nov 09, 2011 8:36 pm

rouillip wrote:I want to display full screen a webView and get it full screen on device rotation, so i write this code :

<html>
<head>
<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = yes" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="NKit.js"></script>
</head>
<body>
<script type="text/javascript">

var widtha =320;
function NKIsPageSupportsAutoOrientation()
{
return "yes";
}

function pageWillRotate(degree) {
if(degree== -90 || degree== 90) {
widtha= 480;
webView1.hide();
webView2.init(0,0,widtha,300);
webView2.loadURL("http://nimblekit.com/");
webView2.setScalesToFit("yes");
webView2.show();
}
else
{
widtha= 320;
webView2.hide();
webView1.init(0,0,widtha,440);
webView1.loadURL("http://nimblekit.com/");
webView1.setScalesToFit("yes");
webView1.show();
}
}

var webView1 = new NKWebView;
webView1.init(0,0,widtha,440);
webView1.loadURL("http://nimblekit.com/");
webView1.setScalesToFit("yes");
webView1.show();


var webView2 = new NKWebView;

</script>

</body>
</html>

May be it could help some of us

Can you make this code for a universal app?
remcob00
 
Posts: 13
Joined: Sun Oct 30, 2011 3:48 pm

Re: webView and device rotation

Postby cactuscraig » Wed Nov 09, 2011 9:50 pm

you would just ned some more code to know what device you are on, then initialize based on that screen size.

Code: Select all
var isiPad = ...; //put iPad detection code here.

function pageWillRotate(degree) {
if(degree== -90 || degree== 90) {
if (iPad=true) { widtha 1024; }
if (iPad=false) {widtha= 480;}

webView1.hide();
webView2.init(0,0,widtha,300);
webView2.loadURL("http://nimblekit.com/");
webView2.setScalesToFit("yes");
webView2.show();
}
else
{

if (iPad=true) { widtha 768; }
if (iPad=false) {widtha= 320;}


webView2.hide();
webView1.init(0,0,widtha,440);
webView1.loadURL("http://nimblekit.com/");
webView1.setScalesToFit("yes");
webView1.show();
}
}



and why hide 1 and initialize another webview. why not just change the size of the same web view? then you wouldn't have to worry about the view being on a different page.
User avatar
cactuscraig
 
Posts: 849
Joined: Thu Feb 03, 2011 5:15 pm
Location: Scottsdale, AZ

Re: webView and device rotation

Postby remcob00 » Thu Nov 10, 2011 7:50 pm

cactuscraig wrote:you would just ned some more code to know what device you are on, then initialize based on that screen size.

Code: Select all
var isiPad = ...; //put iPad detection code here.

function pageWillRotate(degree) {
if(degree== -90 || degree== 90) {
if (iPad=true) { widtha 1024; }
if (iPad=false) {widtha= 480;}

webView1.hide();
webView2.init(0,0,widtha,300);
webView2.loadURL("http://nimblekit.com/");
webView2.setScalesToFit("yes");
webView2.show();
}
else
{

if (iPad=true) { widtha 768; }
if (iPad=false) {widtha= 320;}


webView2.hide();
webView1.init(0,0,widtha,440);
webView1.loadURL("http://nimblekit.com/");
webView1.setScalesToFit("yes");
webView1.show();
}
}



and why hide 1 and initialize another webview. why not just change the size of the same web view? then you wouldn't have to worry about the view being on a different page.

Can you give your full code? Including the iPad detection code.
remcob00
 
Posts: 13
Joined: Sun Oct 30, 2011 3:48 pm

Re: webView and device rotation

Postby cactuscraig » Thu Nov 10, 2011 9:12 pm

away from my mac today.
iPad detection is in the manual - only works on device - not on simulator.
User avatar
cactuscraig
 
Posts: 849
Joined: Thu Feb 03, 2011 5:15 pm
Location: Scottsdale, AZ

Re: webView and device rotation

Postby remcob00 » Sat Nov 12, 2011 6:41 pm

cactuscraig wrote:away from my mac today.
iPad detection is in the manual - only works on device - not on simulator.

Can you still give the full code. Because I have not much experience with writing javascript and I know not sure how to write the iPad detection code with NKGetDeviceType()?
remcob00
 
Posts: 13
Joined: Sun Oct 30, 2011 3:48 pm

Re: webView and device rotation

Postby blazeman » Sat Nov 12, 2011 7:58 pm

How do you expect to learn?

I'd search the forums more. I'm guessing you will find the code you need without asking someone else to specifically write it for you. Many easy things like this have been covered before.
User avatar
blazeman
NimbleKit Expert
 
Posts: 721
Joined: Sat May 30, 2009 5:58 pm

PreviousNext

Return to Sample Code

Who is online

Users browsing this forum: No registered users and 1 guest