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

> Add to home screen

Add to home

Add To Homescreen (ATH) is a javascript widget that opens an overlaying message inviting the user to add the web site/application to the home screen. This was born mainly to support web-app-capable applications but extended to a more general purpose use case.

Support Development

Add To Homescreen is a free, open source javascript software. It is released under the MIT License which basically grants you complete freedom in usage for open source and commercial applications.

That being said the only way for me to subtract hours from my day work and keep implementing this script is through donations. If you find this widget useful and wish to support future development, please consider a donation.




Overview

The script opens an always-on-top message inviting the user to add the application to the home screen. This is currently supported on iOS and Mobile Chrome. While other devices have the ability to bookmark any website to the home screen, only iOS and Mobile Chrome have a straightforward way to do it. ATH would technically also work on Windows Phone (which has the equivalent Pin to Start option), but I’m not currently able to test it on that device. WinPhone support might be added in a future release if there will be enough interest.

ATH by default looks something like this

ath-preview

But appearance is customizable with plain old CSS.

The script is compatible with iOS 6+ and Chrome 31+. It would be possible to add iOS5 (and older) support, but considering the iOS7 penetration I decided to support the latest two releases only. If there’s really interest in older versions I might reintroduce <iOS5 support or you could use the previous version of ATH (which supports iOS3 and up).

Languages

The message changed in v3 so unfortunately all the languages supported in v2 are not available anymore. If you wish to help please send more translations!

Basic Usage

v3 API changed drastically (sorry about that) and it’s not a drop in replacement for v2. The good news is that v3 is aware of user sessions saved on previous ATH versions, so if the users have already seen the message, it won’t be displayed again.

The easiest way to use ATH is to link the script into your document HEAD and call the addToHomescreen() function as soon as possible. Eg:

<head>
<title>Add To Home</title>
...
<link rel="stylesheet" type="text/css" href="../../style/addtohomescreen.css">
<script src="../../src/addtohomescreen.js"></script>
<script>
addToHomescreen();
</script>
</head>

That’s all you need. ATH automatically hooks to the onload event, checks device compatibility, detects if the app is already in full screen mode and eventually pops up the message.

It is not strictly needed to place the script in the document HEAD (you can also place it at the end of your BODY), but ATH makes a series of checks that are better done sooner than later.

Options

ATH accepts one option parameter to customize the script behavior.

To change the start up delay for example you could use the startDelay option.

addToHomescreen({
   startDelay: 5
});

This would delay 5 seconds before showing the message.

Below the most common options.

  • modal: prevents further actions on the website until the message is closed.
  • mandatory: the website is not accessible until the user adds the application to the homescreen. This is useful mainly for web-app-capable applications that need full screen viewing to be accessed (eg: games).
  • skipFirstVisit: setting this to true prevents the message to appear the first time the user visits your website. It is highly recommended to enable this option!
  • startDelay: seconds to wait from page load before showing the message. Default: 1.
  • lifespan: seconds to wait before automatically close the message. Default: 15 (set to 0 to disable automatic removal).
  • displayPace: minutes before the message is shown again. By default it’s set to 1440, meaning that we will be showing the message only once per day.
  • maxDisplayCount: absolute maxium number of times the call out will be shown. (0 = no limit).
  • icon: display the touch icon in the pop up message. Default: true
  • message: you can provide your custom message if you don’t like the default.
  • onShow: custom function executed when the message is shown.
  • onAdd: custom function executed when the application is added to the homescreen. Please note that this is a guesstimate (see below).
  • detectHomescreen: ATH tries to detect the homescreen. Supported values are: false, true (=’hash’), ‘hash’, ‘queryString’, ‘smartURL’ (see below).
  • autostart: the message is not shown automatically and you have to trigger it programmatically.

Detect the homescreen

There’s no native event we could hook to to know when a user actually adds the page to the homescreen. That’s also the reason why this script has become so complicated despite the apparent simple task it has to accomplish.

ATH development started when Apple introduced the apple-mobile-web-app-capable meta tag and stand alone mode with it. When the webapp is in stand alone mode the window.navigator.standalone property is set to true and that’s the only 100% safe way to know if the app has been added to the homescreen… With some caveats (of course).

// set a web app capable website
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">

Standalone mode is meant for web applications, not “standard” web sites. The webapp has to be designed with standalone mode in mind, for example links inside your fullscreen app will open in a new browser window hence your app navigation has to be handled with JS.

Also, as of this writing Chrome –despite support for mobile-web-app-capable– doesn’t fill the window.navigator.standalone property, making it an unreliable way to detect if the app has been added.

So, how can we detect if the app has been actually added to the home screen? ATH tries its best to help you in this hard task and the followings are your options.

  • Show the callout only once per user. This is the best, safest and most polite solution of all. Set the maxDisplayCount to 1 and the user will be presented with the nasty callout only one time, smartly circumventing the problem.
  • Build a standalone application. When possible try to use apple-mobile-web-app-capable.
  • Add a special token in the URL and have the user bookmark the tokenized address. ATH supports hash, query string or smart url tokens. Continue reading for details.

I strongly suggest to go with the first option and show the callout only once. That’s the safest solution, but if you want to be more aggressive you can take the “token” route.

First of all you have to choose where to place the token. ATH offers three options:

  • hash: http://www.example.com/#ath
  • query string: http://www.example.com/?ath=
  • smart url: http://www.example.com/ath/

As soon as the page is loaded ATH adds the token to the page URL (no worries, no reload will happen as we use history.replaceState). If the user adds the page to the homescreen the actual URL that will be saved contains the token. If the page already contains the token before ATH could add it, it means that (most likely) the page has been added to the homescreen.

Bear in mind that this is a guesstimate, there are some exceptions but the good news is that it should be pretty rare to have false positive, ie: it should never happen to see the popup after the app has been added. Instead it may happen to have ATH think that the app has been added even if it hasn’t.

Be careful when using the detectHomescreen option since it may interfere with your application especially if you already use #hash or history.replaceState for your navigation.

Optimal configuration

Do not annoy your users with frequent callouts the suggested setup is to show the message only once, the second time the user visits your website.

addToHomescreen({
   skipFirstVisit: true,
   maxDisplayCount: 1
});

The above config skips the first time the user comes to your site, so she has time to look around freely. The next time she will be greeted by the cheerful balloon and from that moment on she won’t be bothered again.

Debug mode

ATH v3 also introduces debug mode. By setting debug: true some of the preliminary checks are skipped and the message is shown on desktop browsers and unsupported devices as well.

You also have the addToHomescreen.removeSession() function in your tool belt, which clears the current session. This is very useful when testing various options and the callout seems not to be willing to show up again. This is common because ATH is very conservative, to avoid showing the message by mistake it tries to show it the less as possible.

Open the pop up programmatically

Of course you can bypass the automatic triggering and open the call out programmatically. To do so you have to set the autostart: false option.

var addtohome = addToHomescreen({
   autostart: false
});
addtohome.show();

addToHomescreen() it’s a kind of singleton and returns the instance to the real AddToHomescreen class. From there you have access to the show() method. Note that no checks are performed to verify if the DOM is ready, if you show the message programmatically that’s up to you.

show() also supports one boolean option. If you pass true the callout is shown no matter what overriding most of the preliminary tests.

localStorage variable name

The user session is stored in a localStorage variable called org.cubiq.addtohome by default. localStorage is domain based, so if you have multiple applications on the same domain ATH can’t understand which one you actually added to the homescreen.

You can have multiple instances of ATH on the same domain by setting a different appID for each installation. Eg:

addToHomescreen({
   appID: 'org.cubiq.myCoolApp'
});

IMPORTANT: once set do not change the appID! If you change the appID all users will see the callout again regardless if they already added the application to the home screen or not. Only exception is for standalone applications. They would keep working correctly anyway.

apple-mobile-web-app-title

From iOS6 you have a handy meta tag called apple-mobile-web-app-title that holds the name that will be displayed on the homescreen, otherwise the page title will be used. Since the app name is limited to 11 characters you may want to take advantage of this feature.

/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>