• Posted on: Jan 23, 2011
  • Tag:
  • Reactions: 687

> Add to home screen

Add to home

I found that many iPhone and iPad users don’t know that they can add their favorite web sites to the Home Screen and interact with them like standard native applications. This script helps them to discover this great feature and suggests the steps needed to add your web app to the dashboard.


Project info

Name: Add to Home screen
Last code update: 2013.01.18 – v2.0.5
Device compatibility: iPhone/Ipod touch >=3.1.1, iPad >=3.2.
QR Code opens demo page.

Support development

If this script saved your day and you wish to support future developments you may consider sending some funds via PayPal or Flattr.





Overview

The script places a floating balloon inviting the user to add your application to the home screen. Version 2 of the script takes advantage of iOS5 native fixed elements positioning and gracefully degrades to a javascript only version on iOS4.

The default message looks like this:

The code is compatible with iPhone/iPod touch, iPhone4 and iPad. On older devices the “add” icon is a “+” while on iOS 4.2 it has been replaced with . The script detects the OS version and displays the appropriate icon.

The message appears after 2 seconds (customizable) from page load, and is destroyed after 15 seconds (also customizable). The balloon enters and exits the screen with a quick configurable animation: drop from top, bubble from bottom or fade in/out.

The balloon can be dismissed any time by tapping the small “x” icon.

The script also checks the user’s locale and shows the message in an appropriate language. So far the following languages are supported:

  • Catalan
  • Chinese (Traditional and Simplified)
  • Danish
  • Dutch
  • English
  • Finnish
  • French
  • German
  • Greek
  • Hebrew
  • Hungarian
  • Italian
  • Japanese
  • Korean
  • Norwegian
  • Polish
  • Portuguese
  • Russian
  • Spanish
  • Swedish
  • Thai
  • Turkish

Please help me localize the script in more languages.

Locale can be forced, so you can use only English if so desired.

Standard usage

All you need to do for the magic to happen is to add the following inside your page HEAD:

<link rel="stylesheet" href="path/to/add2home.css">
<script type="application/javascript" src="path/to/add2home.js"></script>

That’s it. The code checks the user’s device, OS version, standalone compatibility, etc. If the user is eligible, the screen will be gladden with the cheerful balloon.

Advanced features

You can customize the script behaviors by setting the addToHomeConfig global variable *before* the add2home.js script is included into the page. Let me stress on this. The variable must be globally accessible and must be defined before the script is included inside the page.

Here’s a simple example:

<script type="text/javascript">
var addToHomeConfig = {
	animationIn: 'bubble',
	animationOut: 'drop',
	lifespan:10000,
	expire:2,
	touchIcon:true,
	message:'This is a custom message. Your device is an <strong>%device</strong>. The action icon is `%icon`.'
};
</script>
<script type="application/javascript" src="js/add2home.js"></script>

The popup appears with a bubble effect and is dismissed with a drop animation. It stays on screen for 10 seconds, it is shown only once every 2 minutes, it shows the apple-touch-icon, and changes the default text with a custom one. This is the end result:

Autostart

The script automatically starts on page load. You can prevent this behavior by passing the autostart:false option. You can later show the balloon calling the addToHome.show() public method.

You can also override all the compatibility checks and always show the popup by calling addToHome.show(true). (Not suggested!).

Returning visitors

V2.0 adds the returningVisitor option. This is a very important feature that I highly encourage you to use (ie: set it to true). What it does is to show the message to returning visitors only. The first time a user accesses your site the message is not shown. If the user comes back within a 28 days timeframe, the message is finally presented.

I believe this is very important for usability. When I end up on a new site I just want to look around and there is a very small chance that I will really come back to that site again. But if I come back a second time there’s a good chance that I’ll return a third and a forth.

Showing the message the very first time a user visits your site could be self-defeating and may just irritate her.

More power to the user

If the user intentionally closes the balloon, it won’t show up again for all the duration of that session. This feature overrides all your configurations, even if you set the balloon to show up every single time, if the user taps the close button the message won’t be shown until the browser is closed and reopened.

All the Options

The addToHomeConfig object is used to configure the balloon. The options are:

  • autostart: should the balloon be automatically initiated? Default: true.
  • returningVisitor: show the message to returning visitors only. Set this to true and the message won’t be shown the first time an user visits your site. Default: false.
  • animationIn: the animation the balloon appears with. Can be: drop, bubble and fade. Default: drop.
  • animationOut: the animation the balloon exits with. Can be: drop, bubble and fade. Default: fade.
  • startDelay: milliseconds to wait before showing the message. Default: 2000
  • lifespan: milliseconds to wait before hiding the message. Default: 20000
  • bottomOffset: distance in pixels from the bottom (iPhone) or the top (iPad). Default: 14
  • expire: minutes before displaying the message again. If you don’t want to show the message at each and every page load, you can set a timeframe in minutes. The message will be shown only one time inside that timeframe. Default: 0 (=always show).
  • message: Define a custom message to display OR set a fixed locale. If you don’t like the default message we have chosen for you, you can add your own. You can also force a language by passing the respective locale (eg: ‘en_us’ will always display the English message). Default: ” (=script decides).
  • touchIcon: if set to true, the script checks for link rel="apple-touch-icon" in the page HEAD and displays the application icon next to the message. Default: false.
  • arrow: shows the little arrow pointing the bottom bar “add” icon. For custom designs you may want to disable it (ie: set it to false). Default: true.

Have a look at the many examples to see how the config works.

Public methods

You can programmatically open the balloon by calling the addToHome.show() function.

You can programmatically close the balloon by calling the addToHome.close() function.

During development you may also need to reset the local and session storages. You can do so by calling the addToHome.reset() function.

Change the balloon appearance

Of course you are free to design the balloon in any way you want. Just change the add2home.css file to your likings.

IMPORTANT: UTF-8 forever!

The script contains the “Add to home” message in many languages. To handle English together with Japanese or Hebrew the script has been encoded in UTF-8 (the standard nowadays).

For this reason it is crucial that the JS file is served as UTF-8. That should be default on recent webservers but you can force it by adding the following to your .htaccess:

AddDefaultCharset utf-8
AddCharset utf-8 .html .css .js .xml .json .rss

If you don’t want to convert all your site to UTF-8 you can serve just this script with the proper charset, like so:

<Files "add2home.js">
AddDefaultCharset utf-8
</Files>

(Not tested but should work)

If you can’t modify the .htaccess file, you may want to remove all languages but English from the script.

Web app capable

To prevent the balloon from appearing once the app has been added to the home screen, remember to add the apple-mobile-web-app-capable meta to your page head:

<meta name="apple-mobile-web-app-capable" content="yes">

If your app is not “web app capable”

If you are not willing to add the web-app-capable tag, you can still prevent the balloon from showing up, but there’s no golden rule here. The easiest way is to check for a special url hash. Have a look at the hash-trick example to get an idea, of course this technique modifies the URL the user is going to bookmark (eg: cubiq.org/#ATHS) and it may interfere with other frameworks that use hash-change event. So use it with caution.

The code is and always be MIT licensed, special thanks to all those who helped translating the script!

/Share the joy

/Reactions

  • 很好的服务,给我方便。谢谢。

    Reply
    • Author: Kenneth
    • Posted on: 2011/12/30
    • At: 12:32

    Works perfektly! Is there a way to enlarge the close icon?? Have tried in the css, but that doesn’t make the icon bigger..

    Reply
    • Change the

      #addToHomeScreen .close

      CSS property

      Reply
    • Author: Houssam Hamdan
    • Posted on: 2011/12/30
    • At: 15:45

    Is it possible to send notification messages to standalone iPhone web apps?

    Thank you

    Reply
    • you mean “from” standalone iphone web apps?

      Reply
    • Author: Jully Olivier
    • Posted on: 2011/12/30
    • At: 21:35

    Hie,

    Thanks so much for this very good script.

    Also, I have a problem to implement it correctly.

    When I use it alone in a page without effect js and css, everything is right.

    But in my iphone page, it does’nt. Do you have an idea please ?

    Thanks, Olivier

    Reply
      • Author: Jully Olivier
      • Posted on: 2012/01/03
      • At: 23:32

      Hie

      I think the problem is coming from IUI in my page. Is there someone with an idea ?
      Thanks so much for this excellent work.

      Reply
    • Author: Erik Nohlmans
    • Posted on: 2012/01/07
    • At: 17:03

    Much love for this work. Super thanx!

    Reply
    • Author: Jully Olivier
    • Posted on: 2012/01/09
    • At: 19:11

    Hie, Is there someone to help me to fixe the problem, please ?

    Out of my page, it is running well.

    http://olivierjully.free.fr/WebApp/add.html

    But in my IUI page, it does’nt :

    http://olivierjully.free.fr/WebApp/index.html

    Height size problem !

    Thanks very much. Olivier

    Reply
    • Author: Chae
    • Posted on: 2012/01/09
    • At: 19:56

    This is a great plugin for my site! I am having just one issue. Once it is launched on the homescreen and you hit any link it launches again in safari.
    Am I missing something or doing something wrong?

    Other than that it is great!

    Reply
      • Author: Tobias
      • Posted on: 2012/01/11
      • At: 19:55

      @CHAE: You also have to add this to the head of your website:

      Then Web App will not start again in safari

      Reply
        • Author: Tobias
        • Posted on: 2012/01/11
        • At: 19:58

        meta name=”apple-mobile-web-app-capable” content=”yes”

        • Author: Chae
        • Posted on: 2012/01/20
        • At: 09:02

        Tobias,

        Thanks for the reply, I have added this to the header of my site template but still opens up a new Safari window.
        Also, is there any way I can customize the add 2 homepage text? It is pulling the title text from my website, and it does not start with my company name.

        Thanks

    • Author: Chae
    • Posted on: 2012/01/10
    • At: 00:55

    I found this code, but where do I install this?
    (function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener(“click”,function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;”href”in d&&(d.href.indexOf(“http”)||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,”standalone”)

    Reply
    • Author: Alex
    • Posted on: 2012/01/10
    • At: 09:53

    im usually too lazy to write comments but this is an awesome script/idea :)

    Reply
    • Author: Hans
    • Posted on: 2012/01/10
    • At: 11:16

    Hi there !
    Great script. But it doesn’t seem to work for me. I built my app with iUI and experience the same problem Mr.Olivier (above) seems to. Whatever I try, I can’t seem to get it to work. Do you have any information about your script together with iUi ? Cheers and thanks,

    Hans

    Reply
      • Author: Jully Olivier
      • Posted on: 2012/01/10
      • At: 21:29

      Hie, I fixed the problem with IUI.
      Place a display:table in addscreen css wire. Reset with margin:0 and padding:0 +++
      Very good source.

      Reply
    • Author: faber
    • Posted on: 2012/01/10
    • At: 16:22

    lo trovo un lavoro molto utile, complimenti!

    Reply
    • Author: nikki
    • Posted on: 2012/01/12
    • At: 21:40

    It’s probably something really simple but i am a newbie and can’t figure it out. the message drops down from the top but it shows the text only…no bubble, no touch icon…what is the problem?

    Reply
  • Thanks for the tip, I’m trying it on my website.

    Reply
    • Author: Chirag Patel
    • Posted on: 2012/01/13
    • At: 08:07

    I am using this script. It works fine but popup baloon is coming everytime even if i have added to home screen. Please give me the solution ASAP.

    Thank you.

    Reply
      • Author: Saco
      • Posted on: 2012/01/24
      • At: 09:59

      Hmm, “Please give me the solution ASAP?” I think you should say “Thanks for giving me a great solution”. Very rude demanding that someone should give you something for free, when you already got most of it for free?

      Anyways, Matteo, thank you for a great script, I am looking at a cookie based solution but it is not easy.

      Reply
    • Author: Damian B
    • Posted on: 2012/01/21
    • At: 23:29

    Polish translation:

    pl_pl: ‘Aby zainstalować tę aplikacje na %device: naciśnij %icon a następnie Dodaj jako ikonę

    Reply
    • Author: Alan
    • Posted on: 2012/01/23
    • At: 02:03

    I’ve added the basic script to my mobile site, but I just dont get the popup. Can anyone suggest what I’m doing wrong?

    Reply
    • Author: Soeren P
    • Posted on: 2012/01/23
    • At: 14:27

    All my visitors/users are Danes, so I would like to present the message in Danish.
    However, if the visitor has an iPhone with English as the device language, then then instruction should still be “Add to Home Screen” (with the rest in Danish). Is that possible?

    Reply
  • Hi,
    Been trying to download the script but the Get the Script button at the top of the page is not working?

    Reply
    • Panic over, found it under the Public Repo button as a zip file

      Reply
    • Author: Donat
    • Posted on: 2012/01/26
    • At: 10:54

    Hi Matteo, thanks for this fine script. It’s up to the point, simply perfect.
    You suggest to use “one of the many include/require/load javascript libraries” for conditionally including the script. I tested this with yesnope.js, but the async loading leads to problems with the initialization.

    Reply
    • you should really try v2.0 (out now)

      Reply
  • Have you considered adding support for Android devices like some of the work on this project: http://code.google.com/p/mobile-bookmark-bubble/issues/detail?id=17

    Thanks,

    doug

    Reply
    • yes, I’ll probably add android compatibility in a near future

      Reply
    • Author: Phil
    • Posted on: 2012/01/30
    • At: 14:20

    Hey, awesome script, works like a charm.
    One question though: to hide the URL bar, I did this:
    body onload="window.scrollTo(0, 1);"
    So now when I show the bubble it’s 40px too high, but when I move the page it “jumps” down to its correct position. Any idea on how to solve this?

    Reply
      • Author: Phil
      • Posted on: 2012/01/30
      • At: 14:48

      Also, the X-Button doesn’t seem to work for me (unless I’m doing something wrong).

      var addToHomeConfig = {autostart:false,
      startDelay:0,message:'test.'};

      Reply
      • Author: Phil
      • Posted on: 2012/01/30
      • At: 17:21

      iPhone 4, by the way.
      In your example (http://cubiq.org/dropbox/a2h/examples/simple/) the X button doesn’t work for me either.

      Reply
      • Author: Phil
      • Posted on: 2012/01/30
      • At: 17:55

      with iOS 5 :)

      Reply
      • Author: Phil
      • Posted on: 2012/01/30
      • At: 18:01

      I can change it if I edit this line:
      balloon.style.bottom = options.bottomOffset + 'px';
      to
      balloon.style.bottom = (options.bottomOffset - 60) + 'px';
      But as soon as I scroll or pinch, it “jumps” down. Any idea how I could catch these 60 pixels?

      Reply
        • Author: Odizl
        • Posted on: 2012/02/28
        • At: 16:44

        Hey there,
        I am having the same problem, have you manage to fix it?
        Thank

    • Author: Sean
    • Posted on: 2012/01/31
    • At: 06:39

    I’m having the same issue as Phil (above)

    Most mobile suites like to hide the address bar these days. Taking this into account would make this awesome. I hope there is a fix for this.

    Reply
    • Author: Phil
    • Posted on: 2012/01/31
    • At: 10:22

    One possible solution I can think of is to scroll the page via javascript just before showing the bubble, but I’ve been trying to do that unsuccessfully so far.
    A different approach (not the smartest one, most likely) would be to check if the page’s been scrolled manually (e.g. with jquery’s .scroll()-event) and then remove the “-60″ from the code. I’ll give that a try.

    Reply
    • Author: Scott
    • Posted on: 2012/02/02
    • At: 17:20

    Having trouble adding this to a WordPress-powered JQM site. Anyone know how to include this properly? (I’ve tried adding to header.php using wp_enqueue_script to no avail).

    Thanks!

    Reply
      • Author: Victor
      • Posted on: 2012/02/07
      • At: 16:58

      Im adding my custom.js to the headtag, then within it I have the code that calls the add2home bubble.

      It is not possible to only show this bubble at the JQM home indexpage, it will be displayed on all subpages too.

      You must define the variables before the section that uses document.write to add the script URL’s, and because of this you can not use the pagecreate events to activate this script and have it showing only on JQM home page.

      Best regards Victor

      Reply
        • Author: Graham
        • Posted on: 2012/02/09
        • At: 15:27

        Use is_front_page to only display on home page:

    • Author: Bradley
    • Posted on: 2012/02/05
    • At: 22:15

    Really great piece of code, thank you very much! I can’t wait ’till you add Android support – Will be so awesome!
    Cheers

    Reply
    • Author: Mike
    • Posted on: 2012/02/08
    • At: 14:33

    Dang – I wish you hadn’t published this. Espn mobile site added it and now I get that annoying ballon each time…

    Reply
    • Author: Joe Spaulding
    • Posted on: 2012/02/11
    • At: 06:07

    How do I apply this to icons on my site. my teacher asked me to add the code that would add a link to an icon so that when you add it to the home screen it makes the icon on the devices
    im not sure what the link is that I need to add to my icon.

    Reply
    • Not sure I understand your issue. have a look at the advanced example, you have to add a couple of metas to enable the touch icon.

      Reply
  • when the dom is ready, i have a error message : unable to load the local ressources in add2home.js in line 17. how can i fix it ?
    thank for all

    Reply
    • Author: Brianna
    • Posted on: 2012/02/15
    • At: 18:33

    Hey,

    Is there a way to customize the homescreen icon that will appear on the user’s device after they save it to homescreen?

    Thanks!

    BTW Amazing script. Love it.

    Reply
    • yes, Brianna. Have a look at the “touch-icon” example.

      Reply
    • Author: Dax
    • Posted on: 2012/02/16
    • At: 15:08

    Okay, I got a problem. I put this code in the index.php, just before thr tag.

    var addToHomeConfig = {
    animationIn: ‘bubble’,
    animationOut: ‘drop’,
    lifespan:10000,
    expire:2,
    touchIcon:true,
    message:’Install this web app on your %device: tab `%icon` and then Add to Home Screen.’
    };

    Also, I uploaded through the FTP the “apple-touch-icon.png” (57×57) to the root. Also to the root I installed the folder (next to the folder “css”) “js” and put the “add2home.css” and the “add2home.js”.

    The message comes up, but the bubble is transparent, the apple-touch-icon is missing and the %icon won’t show up. Also when manually installing the web app, the apple-touch-icon doesn’t get shown…

    Who can see the mistake? I thank everyone that can help.

    Reply
  • [...]the time to read or go to the content or web-sites we have linked to below the[...]

    Reply
  • I’m having an issue getting the close button to work. I’ve tried it using your live demo on my iPhone and iPad and when I touch the “x” nothing happens. Any ideas? Thanks!

    Reply
      • Author: Koen
      • Posted on: 2012/03/14
      • At: 11:38

      Same problem here.

      Reply
      • does it work in the demo page?

    • Author: wetter
    • Posted on: 2012/02/17
    • At: 19:53

    Android, Android, Andoird!

    And a merge into the querymobile-environment, maybe they have some energy in realizing for even more mobile-browser :)

    Thanks very much anyway. :)

    Reply
    • Android doesn’t have a full screen mode actually. The script itself already works on Android but the procedure to add a bookmark to the homescreen is not straight forward as it is on iDevices

      Reply
    • Author: Derek
    • Posted on: 2012/02/18
    • At: 20:25

    Has anyone got this working using WPtouch Pro for WordPress? I tried adding the code to the header.php file of the theme being used but it’s not working at all. I put all the files in the root of the site and used the following:

    var addToHomeConfig = {
    animationIn: ‘bubble’,
    animationOut: ‘drop’,
    lifespan:10000,
    expire:2,
    touchIcon:true,
    message:’AB Playbill. Your device is an %device. The action icon is `%icon`.’,
    returningVisitor:true
    };

    if (‘standalone’ in navigator && !navigator.standalone && (/iphone|ipod|ipad/gi).test(navigator.platform) && (/Safari/i).test(navigator.appVersion)) {
    document.write(”);
    document.write(”);
    }

    Reply
      • Author: Derek
      • Posted on: 2012/02/18
      • At: 20:33

      I should learn how to use this properly. Here is my code:

      var addToHomeConfig = {
      animationIn: 'bubble',
      animationOut: 'drop',
      lifespan:10000,
      expire:2,
      touchIcon:true,
      message:'AB Playbill. Your device is an %device. The action icon is `%icon`.',
      returningVisitor:true
      };

      if ('standalone' in navigator && !navigator.standalone && (/iphone|ipod|ipad/gi).test(navigator.platform) && (/Safari/i).test(navigator.appVersion)) {
      document.write('');
      document.write('');
      }

      Reply
    • Author: Last1Here
    • Posted on: 2012/02/20
    • At: 21:03

    Is there a way to dim the background while the add2homescreen popup is displayed ?

    Thanks in advance, Last1Here

    Reply
    • Author: Last1Here
    • Posted on: 2012/02/20
    • At: 21:10

    My comment didn’t appear first time sorry if this is a reposts

    Is there a way to dim the background during the 10 or so seconds the add2homescreen popup is displayed

    Thanks

    Reply
    • you may place a black div between the contents and the balloon… not horribly difficult

      Reply
        • Author: Last1Here
        • Posted on: 2012/02/28
        • At: 19:14

        Ok I’ll try that

        Thanks

    • Author: Michael Katzenmayer
    • Posted on: 2012/02/21
    • At: 16:48

    Very nice work, thanks!

    Just wanted to add that it’s not always necessary to mess with the .htaccess file to set the character encoding.

    Most of the time (maybe always?) it’s enough to add

    charset=”UTF-8″

    to the script tag.

    Reply
    • Author: JD
    • Posted on: 2012/02/21
    • At: 16:50

    Works great, thanks. One problem, it the bubble reappears after I add it to my home screen. Any thoughts? I have tried the hash trick and

    Neither have works,

    Regards.

    Reply
    • hi JD,

      did you figure out a solution to this problem ?

      thanks
      anthony

      Reply
  • After drinking 1 cup of yerba daily for 20 yrs, suddenly it seemed to go right through me, even with the small amount of milk I put in it.

    Reply
    • Author: Michal Prokes
    • Posted on: 2012/02/24
    • At: 22:45

    What a great script! Best way to make people aware of installing webapp! I would like to contribute with czech translation. “cs_cz: ‘Pro instalaci aplikace na Váš %device, stiskněte %icon a v nabídce Přidat na plochu.’” I’m not sure if this is literal translation, but its user-friendly czech sentence.

    Reply
      • Author: Michal Prokes
      • Posted on: 2012/02/24
      • At: 22:48

      Damn! I made this with correct utf-8 codes, but i didn’t think that it will write corectly with diacritics right on the page. PLS find the correct UTF codes

      Reply
    • thanks! I’ll add Czech in the next update

      Reply
        • Author: Mat
        • Posted on: 2012/03/02
        • At: 16:26

        Matteo,

        I’m using godaddy linux hosting. I’m trying to make this work but for some reason it looks like it’s not recognizing the CSS because it drops in as a text that says

        Install this web app on your iPhone: tap and then Add to Home Screen. x’

        But not the normal bubble that iPhone 4S shows.

        I followed all the instructions but for some reason I still cannot get anything but text dropping down. Sorry if this seems like a dumb question but I’m a bit of a newbie at all of this and just trying to learn.

        Help?
        matk@me.com

    • Author: Mat
    • Posted on: 2012/02/25
    • At: 22:36

    I’m using godaddy linux hosting. I’m trying to make this work but for some reason it looks like it’s not recognizing the CSS because it drops in as a text item rather than a bubble.

    I put he css file in the same folder as the .js file and it still didn’t work so I then put the css file in the main directory and that still didn’t work. Sorry if this seems like a dumb question but I’m a bit of a newbie at all of this and just trying to learn.

    Help?

    matk@me.com

    Reply
  • Someone make this works with sencha touch?

    Reply
    • Author: sergey
    • Posted on: 2012/03/02
    • At: 06:13

    any youtube videos on how to do this?

    Reply
    • Author: Joanne
    • Posted on: 2012/03/02
    • At: 16:03

    Hello Matteo,
    Thank you for this handy and versatile script. It did save my day and I tried to make a small donation, but it was not clear how to donate in US dollars. I admit I am clueless about euros. Please advise.
    Joanne

    Reply
      • Author: Joanne
      • Posted on: 2012/03/03
      • At: 15:42

      Never mind, as you know PayPal took care of the conversion with no problem.

      Thanks again for a very well done script.

      Reply
    • Author: Brian Gershon
    • Posted on: 2012/03/02
    • At: 18:18

    Here’s a fix for a problem I ran into on jQuery Mobile 1.0.1 using the “touchOverflowEnabled: true” option. When set to true, the “add to home” bubble would drop down too low (below Safari toolbar). I was using touchOverflowEnabled for fixed toolbar support, but jQuery Mobile 1.1 deprecates touchOverflowEnabled in favor of real fixed toolbars so soon will be a non-issue.

    Reply
  • FYI:
    On my iPhone with iOS 5.0.1 the text string for Danish (da_DK) is ”Føj til hjemmeskærm”, not ”Tilføj til hjemmeskærm”.

    Reply
    • Author: Tobi
    • Posted on: 2012/03/05
    • At: 00:13

    Perfect script, thank you! Just one serious problem: If private browsing is activated in Safari, the javascript returns an error as the client state cannot be stored in client database (I guess). Maybe this should be investigated in, to not display the ballon if private mode in browser is enabled. I could reproduce the problem on ipad2 and iphone4s.

    Reply
      • Author: Tobi
      • Posted on: 2012/07/06
      • At: 02:21

      Do you like to address this issue? – Any feedback would be much appreciated. Thank you.

      Reply
      • It should be localstorage. A check on localstorage should be done before actually storing data in it.

    • Author: David King
    • Posted on: 2012/03/07
    • At: 11:03

    Great script and easy to use. I removed the website sizing code because both the iPhone and iPad resize to suit their screens
    (REMOVED)

    Other than that the script is great, just what I was looking for.
    Thankyou for a great script I use this on both my darts501.com & darts501.mobi sites

    Reply
    • Author: David King
    • Posted on: 2012/03/07
    • At: 11:08

    Great script and easy to use. I use it on both my .com and .mobi sites.

    I removed the meta name=”view” from the coding because bith the iPad and iPhone resize to suit.

    Thanks for some nice coding

    Reply
  • did anyone find out how to stop the bubble coming up after youve already added it to your home screen ??

    Reply

/Leave a reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>