How to require fullscreen mode in a jQTouch application? - iphone

I'm using jQTouch to develop a version of a website optimized for safari on the iphone. The jQTouch demo helpfully shows how to show an "install this" message for users not using full screen mode and hide it for those who are. When in fullscreen mode, the body should have the class "fullscreen." So you can hide the "install this" message for people who have already added your app to their home page by adding this css rule to your stylesheet:
body.fullscreen #home .info {
display: none;
}
What I'd like to do is require users to use the app in fullscreen mode only. When viewed from the regular browser, they should only see a message asking them to install the app. That message should of course be hidden otherwise.
This ought to be really, really easy, so I must just be missing something obvious.
I thought one way to do this would be to simply test for the class "fullscreen" on the body: if it's not there, use goTo to get to another div, or hide the other divs, or something like that.
Strangely, however, this doesn't work. As a test, I've still got the original "info" message, as in the jQTouch demo, and it doesn't show up when I launch in fullscreen mode. So the body must have the fullscreen class. And yet I can't find any other trace of it: when I put this alert to test things after the document has loaded, I get nothing when launching in fullscreen mode:
alert($("body").attr("class"));
I also thought I might test for fullscreen mode by checking for the value of the fullScreen boolean. But this doesn't seem to work either. What am I missing? What is the best way to do this?

Well, I couldn't figure out why the standard way wasn't working, but someone on the jQTouch Google Group suggested this, which works:
if (window.navigator.standalone) {
alert ('Thanks for launching this app your home screen')
} else {
alert('Add this app to your home screen for the best experience')
}

Related

Detect how non-full screen WebApp was loaded (Home Screen v. Safari)

It's easy to detect how a full-screen WebApp (i.e., WebApps that include <meta name="apple-mobile-web-app-capable" content="yes">) was launched – just check window.navigator.standalone
Is it possible to do the same for a non-full screen WebApp?
I want to show the user a "bookmark this web page" bubble (like on http://youtube.com), but I don't want to show it if the web page was launched from the home screen.
I'm pretty sure this is possible since YouTube is a non-full screen WebApp and it doesn't show the "bookmark me!" bubble when its launched from the home screen
I might be missing something in your question, but: window.navigator.standalone is telling if the app is currently in full screen mode or not (if the browser supports this property at all).
That means: if the property is there and it is false, you might want to offer your bookmark button. If it is there and true, don't show it (app is already bein run from home screen). If the property is missing, don't show the bookmark button because the user agent does not support it.
Try to visit www.luscarpa.com for instance. Use Safari and then bookmark it to your home screen and notice the difference.
It also has info about the fullscreen mode (that's where I have learned about it): http://www.luscarpa.com/development/make-your-website-an-iphone-web-application/
Horace, you can study Google's commented javascript source code, which appears they may have used in their YouTube bubble detection scheme, at
http://code.google.com/p/mobile-bookmark-bubble
if ('standalone' in navigator && !navigator.standalone && (/iphone|ipod|ipad/gi).test(navigator.platform) && (/Safari/i).test(navigator.appVersion)) {
document.write('<link rel="stylesheet" href="add2home.css">');
document.write('<script type="application/javascript" src="add2home.js"><\/s' + 'cript>');
}
that's a little script that came from cubiq.org/add-to-home-screen seems to get the job done
of course, if you're not using the add2home script then you should change the filenames.
look at the youtube website url opened in the Safari, in the last part of the url, there has a home/?bmb=1, i think that bmb=1 is actually making the difference, when you bookmark this page, the url will include this bmb variable, then when you press the home web button, on the server side you can detect this and know it is from home web button.

When a user launches "new window" in a home screen app

When a user launches "new window" link in a home screen app.
In Mobile Safari this type of action would open a new tab. What happens if the app is on the home screen and has name="apple-mobile-web-app-capable", content="yes" active.
Will the window still technically be in another tab, although you cant get back to the original one - or will it just navigate within the current tab?
First of all, unfortunately window.open method does not work at all.
Instead, a < a href="..". >...< /a > works and by default launches Safari and opens the link in a normal browser window (so, if the user wants to come back to the app, he has to doubleclick the iPad key and switch back to it).
You can force the link to open inside the app (so replacing the current page) with the tricks listed here: iPhone Safari Web App opens links in new window
Hei, I found a brilliant way to have a "window.open" effect in an iOS webapp too!
It loads a page in a Safari tab and has solved my problem, maybe it can be useful to others: http://webdeveloper.com/forum/showpost.php?p=1161159&postcount=14
It's also a great way to avoid the popup blocker (the blocker would stop a window.open(url) call but it doesn't stop that method) :-)

Open Mail.app on IPhone from webpage that's INSIDE an app

our app loads profile pages from our website INSIDE the app. They have been optimized for iPhone css, but they are still an html page. Our mailto link isnt working as expected.
When clicked, nothing happens. However, when clicked and held (tap and hold), the menu slides up with "new message", "create new contact", "copy", etc.
How should this be formatted to get the Mail.app to automatically launch?
<a class="action_bubble" target="_blank" rel="external" href="mailto:bob#bob.com">Send Email</a>
The "call" link works as expected.
<a class="action_bubble" href="tel:1234567890">Call</a>
So, not sure what to do with this...
Here is a project on GitHub that addresses your issue. Basically, when you use a UIWebView controller, you need to decide how to manage the links using the delegate handler for UIWebView. In Interface Builder you can have it automatically recognize phone numbers which is probably why your phone numbers work and it will recognize http links as default behavior. However, mailto and some of the other special href options will need to be handled manually.
make sure "Detection" property is set for your UIWebView like "Phone","Address". you can set it from your IB.
or from code
self.webView.dataDetectorTypes = UIDataDetectorTypeAll;
Could it be, that you have just tried within the simulator? The simulator does not have a mail app, so it couldn't be opened. Try on a device. I think your code actually works.
I've just tested on a device: your code works.
A little late to the party but I've found out the following:
iOS has some weird ways to deal with web content
DON'T encapsulate your email address within an A tag, just put it there as plain text
Make sure that in your storyboard (if using one) the webView has the Addresses property checked and you're done ... same goes for phone numbers

Set textbox focus in mobile safari

Hey, I was wondering how to set the focus to a text box in Mobile Safari.
I've tried document.myForm.myTextArea.focus() which works in regular Safari, but it does not seem to work in Mobile Safari.
To clarify, I want to set focus to a text box as soon as the user loads a page, and have the iPhone keyboard pop up.
Just found this previous post stating this is a bug in webkit. Sorry for not doing a more thorough search.
http://discussion.forum.nokia.com/forum/showthread.php?t=127724
I found a bug report with the iUI project relating to this.
It seems that a focus() call will not work if called from the onload event or if called via a timer.
http://code.google.com/p/iui/issues/detail?id=129
Update: Although I have no source for this, I am told (by people who have tried it) that in iPhone OS 4 the problem with focus() and onload should be fixed.
Nothing to do with the timer, focus() doesnt work at all... im doing mine through an AJAX function. i guess my web application will have to suffer in mobile safari.
Bye the way, this also affects HP webOS devices and any other device using mobile safari

Launching Safari in-app?

Is it possible to Launch Safari without having the app close? Just like the in-app email compose window.
I'm aware of how to display a webpage in UIWebView. I'd like to use a full web browser, i.e. Safari.
You can use a UIWebView to display web content in your app.
You can create a UIWebView with the URL to display. It will follow any links that the user touches, but that won't give you the address bar, search, navigation buttons, bookmarks or the page (tab) control. Those you'll have to add yourself, but odds are you don't want all of that. (Do you really need Google searches in your app?)
Creating a controller to manage a UIWebView and as much or as little navigation as you need is pretty easy. With a little planning, your custom controller class will also a good thing to keep in your library for the next app.
No you can not make use of the full Safari from within your own application. Your application must terminate for Safari to open.
In iPhone OS 2.0 you also had to terminate in order to send e-mails, so some chance exists that Apple couls open up Safari in the same way for iPhone OS 4.0. Make sure to request it at http://bugreport.apple.com if you are eager.
The second best option currently available is to roll your own "Browser view controller" using UIWebView. Let it have back, forward, stop/reload buttons, and an extra button for opening in Safari if the user is not content. This is how many of the greatest apps our there, like Tweetie, does it.