Targeting users with ios 5 on the web - html

I'm coding a web app that uses a picture that the user can upload from their phones/computers and I found out that ios 5 doesn't allow you to upload anything (see A html5 web app for mobile safari to upload images from the Photos.app?).
Since it seems pretty much impossible I want to show a message to those users asking them to upgrade or pointing them to alternative solutions described in the link above (piccup and the like) if they want to use my app.
Can I direct this message just to ios 5 users via a media query or something similar?

Are you looking for a server side solution (Like PHP for example) or client side (JavaScript)?:
Here is a JavaScript solution:
<script type="text/javascript">
if (navigator.userAgent.match(/OS 5(_\d)+ like Mac OS X/i))
// this helps detect minor versions such as 5_0_1
document.write("You have iOS 5! Aren't you special!");
</script>
Source: https://stackoverflow.com/a/13087526/1800369
For PHP you can track this:
Detect iOS version with PHP

As you mention media queries I guess you want to do this in your CSS. Perhaps detecting the screen width of 1136px (according to orientation) would do the trick for you?
More here

You should check with jQuery for file input support. Please check an answer to this question on how to do this. Note that author stated that this snippet will return true on some Android devices even if they don't support input elements, but since you asked specifically about an iPhone I think it should do the job.

Related

How do you test your html on mobile?

I use Brackets editor to develop, I can check website on Chrome in desktop with :
http://127.0.0.1:49371/index.html
But it won't load on my iPhone (same wifi)
(I know I can play with the window on chrome, I need actual mobile device)
Couldn't find a way to do this.
ngrok is good for this, it allows you to publicly share local urls https://ngrok.com/
This is really hard to do. One solution that is easy, however, is to code on codepen.io and view your projects in debug view on mobile.

Provide link to open in different browser

I have a webapp which is running perfectly well in most browsers, but I'm still trying to work out a few bugs which is preventing it from working correctly in iOS Facebook's in-app browser. Until I've got these sorted, I'd like to provide a message to give users the option to open the link in Safari.
The solution I have for now is to use javascript to detect the browser's user agent (similar to this question), and if it's the Facebook in-app browser, provide a message that the webapp is optimised for Safari and give instructions to copy and paste the link into Safari.
My question is this: is there a way to make a <a> tag open in a particular browser? I have seen questions like this one which seem to point to using target="_system" for Cordova apps, but is there a method to do this with html only?
There isn't a way to do this for Safari (using just HTML, anyway). For other browsers that have custom URL schemes, you could do it. For example, for Chrome you could have your link point to googlechrome://www.website.com.
The definitive answer: No, this is not possible.
As Andrew M mentioned, some browsers have some methods that do some things similar, but a pure html method to open a link in a generic browser does not exist.

Run single page HTML and JavaScript page offline in iPad 1 safari

I am coaching my son's flag football team this winter and I'd like to make a little one pager app with jquery which will display and animate for the team some plays during huddles. I have been researching this quite a bit and it seems there is no way for safari to load local files. Some have suggested using goodreader, the app, but according to their manual they use a simplified browser rather than safari.
Not sure what else to try. The iPad is wifi only using ios5.
Safari is not capable of loading local files.
You have a few different options. You can:
Upload the file to Dropbox, and use it's offline mode to view it.
Use a native / hybrid container (like Appcelerator, PhoneGap, etc)
to bundle your HTML/Javascript into a "native" app.
No Safari can not load local files. You can't run local applications from there. What you can do is develop an actual app for your iphone using dreamweaver/jQuery. You could make pre-recorded videos and play them on your iPad as well. Goodreader, from what I can tell, is for reading local PDFs, which has nothing to do with apps... (but I don't really know)
This page should give you a general idea of using JQuery (mobile) to develop and actual app:
http://jquerymobile.com/
Edit: I just thought of a simpler approach that should work. Open a drop-box account at dropbox.com and put the website/Jquery in the public folder. Get the URL for the public folder and use that. Open the website on your iPad and then don't close the window. Even when the network connections stops it should still work.
I ended up using HTML5 built in APPCACHE: http://www.html5rocks.com/en/tutorials/appcache/beginner/
We went undefeated BTW :)

Lightbox to implement album in a web application

We are trying to implement a lightbox based album viewer in our web application. However, we are struggling to get it working for IE. Can you please suggest the remedy? It would be great if you can suggest some other alternatives for implementing the picture slide show for album too.
FancyBox is a jQuery plugin similar to lightbox. Works with IE and supports different media in the dialog (e.g. videos, ajax calls)
Slimbox claims to have IE6 compatibility. I don't have access to an IE6 machine to test today but it might be worth checking out their demo page.
The beauty of scripts like lightbox is that you can write the page to work on really old browsers, then the script just makes it work much better. Your page should already work before you add the lightbox script (i.e. the thumbs should already link to the full size image, or open it in a new window).
I would suggest lightbox2 and then there is jQuery Popeye what is IMHO by far better. Check out a demo installation here.

How do you add a link that will add an event to your iPhone calendar from safari?

This seems like it should be simple but after a couple hours of googling I have not figured it out. I know I can add iCal links using ICS files, but this does not work on the iPhone.
BTW, when I say iPhone I would like it to work on the touch also. Anyone have any luck with this?
You can get iPhone to download the .ics file (using Safari on a mobile web page) by using the webcal protocol:
webcal://website.mobi/mymeeting.ics
As of iOS 5, if you create a simple http link to an .ics file, Mobile Safari will offer to open it up in Calendar.
According to the iPhone documentation there is no URL scheme for the Calendar application. (There are URL schemes for Mail, Phone, Map, YouTube and iTunes.)
Of course there could be something undocumented, but I'm not sure that using it would be a good idea even if you can find it.
Of course it is possible but only if your JavaScript application is installed on the device. Look at http://tetontech.wordpress.com to see how to make calls from JavaScript to Objective-C. You can then use this and the Calendar Store Programming Guide from the documentation in Xcode to do what you want.
It is not possible. Apple does not want you to do this.
Now, what you could do is bookmark a javascript bookmarklet that checks the user-agent of the browser invoking it, and if the user is on Safari on their laptop or desktop Mac, then invoke the iCal using standard method (ICS file).
The user on iPhone could bookmark your page into a home screen bookmark with a useful (and perhaps custom) icon that said "Event" and title of "Meet Mary at 8:15". They could then, when they have synced their bookmarks, be reminded of the event and invoke it on their desktop browser.
Significant barriers here to educating users how to use this system, but it would work if you could convince people to do it, I think.