• 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

    • Author: Steve
    • Posted on: 2012/03/13
    • At: 16:53

    I’m having an issue where after I’ve installed the web icon, then I return, it prompts me to re-install. I would prefer to never show the “add to home screen” once the the icon has been installed.

    I have added the following to the header

    but I’m still getting ask to install the icon.

    help is greatly appreciated. Fantastic script by the way.

    Reply
    • Author: James
    • Posted on: 2012/03/18
    • At: 03:30

    If the app hides the url bar then positioning ends up being wrong. For example if the following code is used.

    setTimeout(function() { window.scrollTo(0, 1) }, 0);

    Reply
    • prevent the script to autoload and fire it manually only when the URL bar is hidden. it should word.

      Reply
        • Author: James
        • Posted on: 2012/03/19
        • At: 05:48

        Seems to only work about 50% of the time.

        • Author: Joseph
        • Posted on: 2012/04/05
        • At: 23:19

        Thanks for the code, very useful! Do you have any further information on how to solve the minor issue with hiding the address bar? I’m pretty new to .js so any guidance is much appreciated

      • Set the autoload to false. Then add an onload event and place the addToHome.show() function inside a 1000ms timeout:

        function loaded() {
          window.scrollTo(0,1);
        
          setTimeout(function () {
             addToHome.show();
          }, 1000);
        }
    • Author: d3javu
    • Posted on: 2012/03/19
    • At: 14:24

    I was using the earlier version with success. HOWEVER, when using v2.0 I notice this problem:
    – the icon (add to home screen- the box with arrow) does not show in the bubble.
    Feel free to look at my site.

    Reply
      • Author: Eilev
      • Posted on: 2012/03/28
      • At: 09:07

      Same problem here.. any solution?

      Reply
        • Author: Eilev
        • Posted on: 2012/03/28
        • At: 09:11

        the apple-touch-ico does not show up either, it is configured to..

    • it seems to work on my iPhone…

      Reply
        • Author: P3N
        • Posted on: 2012/05/10
        • At: 20:45

        I had the same issue until i changed to the new css file ;-)

    • Author: d3javu
    • Posted on: 2012/03/19
    • At: 14:31

    Never mind! It suddenly started working after I burned some incense. Phew!
    Thanks for the nice script.

    Reply
    • Author: J-J
    • Posted on: 2012/03/19
    • At: 17:32

    Is there any way to adjust the display frequency of the bubble with something other than minutes? Could you display it, say, every 15 (or X number of) page loads?

    Reply
    • Author: Paul
    • Posted on: 2012/03/20
    • At: 03:34

    I have added a ‘add to home screen’ code to my standard website (its not optimised for an iphone) to show message about downloading my iphone app. There is no need to do an iphone optimised site (for my website) but I do like the idea of them seeing this baloon offering to download the app from the store.

    The problem is that it shows tiny and practically impossible to see. Is there any way to make it full size and not reflect on the size of my page?

    Reply
    • you can change the CSS styles as you like

      Reply
    • Author: titi
    • Posted on: 2012/03/21
    • At: 14:03

    Hi there,

    Any news about Android support?

    Thanks for this script :p

    Reply
    • Author: Liam
    • Posted on: 2012/03/23
    • At: 13:18

    Where should i put this if i want it to work with a wordpress theme?

    Reply
    • in the header.php file should work.

      Reply
      • Author: Jonas
      • Posted on: 2012/04/18
      • At: 10:38

      add the following to your header.php and the files in the js folder.

      <link rel="stylesheet" href="/js/add2home.css" type="text/css" media="screen" />

      Reply
        • Author: Jonas
        • Posted on: 2012/04/18
        • At: 10:39

        adding code to this blog doesn’t work…

      • Author: Mark Freebs
      • Posted on: 2012/05/16
      • At: 14:43

      I cannot seem to get it to work in wordpress, I have tried it with a few different themes, but it won’t work. I have copied the css and js files into their own directory, within the theme, but still no joy.

      Am I doing something wrong.

      Reply
        • Author: Mark Freebs
        • Posted on: 2012/05/16
        • At: 17:59

        never mind, I got it to work eventually. had to use
        <link rel="stylesheet" type="text/css" href="/js/add2home.css”>

        <script type="text/javascript" src="/js/add2home.js”>

        • Author: Mark Freebs
        • Posted on: 2012/05/16
        • At: 18:00

        <link rel="stylesheet" type="text/css" href="/js/add2home.css”>
        <script type="text/javascript" src="/js/add2home.js”>

        • Author: Joeyz
        • Posted on: 2012/07/06
        • At: 16:47

        looks like comments is stripping the php out,

        <script type="application/javascript" src="/js/add2home.js" charset="utf-8">

    • Author: Puzzled
    • Posted on: 2012/03/23
    • At: 15:29

    Great work!… but… the message keeps showing for every page of the site even after added to the home screen… does that happen only to me? Am I doing something wrong here?
    Cheers

    Reply
      • Author: P3N
      • Posted on: 2012/05/10
      • At: 20:56

      Only load the script if the page is not in webapp mode, then it will not load at all when the page is started from homescreen. Example of javascript:
      if ((\”standalone\” in window.navigator) && !window.navigator.standalone){
      document.write(”);
      document.write(”);
      document.write(‘var addToHomeConfig = {‘);
      document.write(‘ animationIn: \”bubble\”,’);
      document.write(‘ animationOut: \”drop\”,’);
      document.write(‘ lifespan:10000,’);
      document.write(‘ expire:7200,’);
      document.write(‘ touchIcon:true,’);
      document.write(‘ returningVisitor:true,’);
      document.write(‘};’);
      document.write(”);
      document.write(”);
      }

      Reply
        • Author: P3N
        • Posted on: 2012/05/10
        • At: 21:00

        Sorry, it could not be pasted here. Check it on pastebin –> http://pastebin.com/bDJ4iLf5
        Sorry for the mess Matteo, and thanks for another great script, love it :-)

  • Is this ok if i do the updates or i must to reinstall it each time something new update?

    Reply
    • reinstall? just replace the .js file

      Reply
    • Author: glepage
    • Posted on: 2012/03/23
    • At: 22:13

    I just want to simply use a PNG file to drop down. Nothing else. What code should I use for that?

    Reply
    • Author: Magor34
    • Posted on: 2012/03/25
    • At: 18:46

    Love the script dude.

    I just wanna know if theres an iPad update coming, even tho I’m using an old iPad (1st gen) the popup seems a bit off. It’s right on the edge of the screen when using both iPhone 114×114 Retina icon and standard iPad 58×58 icon. It looks awesome on the iPhone but looks awful on the iPad.

    Will this be fixed in the next update or do I need to find a workaround?

    Many Thanks!

    Reply
    • I’ll soon check this on new iPad. Thanks for your report.

      Reply
    • Author: Alex
    • Posted on: 2012/03/27
    • At: 16:27

    What is the best way to determine whether the balloon is currently displayed?

    I want to use addToHome.close() to make sure the balloon is hidden when the user takes certain actions. But it seems that if the balloon is not displayed, calling addToHome.close() generates an error.

    TypeError: Cannot call method ‘querySelector’ of undefined”

    I assume it’s just because close() should only be called on an open balloon. Or am I perhaps doing something else wrong?

    That question aside, this plugin is working great for me.
    Thanks!

    Reply
    • I may add a check to prevent the JS error. thanks for pointing that out

      Reply
    • Author: KH
    • Posted on: 2012/03/28
    • At: 12:59

    Hi there,

    this is a great script!!!
    Works perfect!
    I’ll let it run for a while and than donate a bit – for sure!

    Greetings, KH

    Reply
    • Author: juro
    • Posted on: 2012/03/30
    • At: 11:28

    Hi,

    this is a great script, for all -)

    Reply
    • Author: Chris
    • Posted on: 2012/03/30
    • At: 15:58

    Very nice plugin, thanks alot! So easy :)

    Reply
    • Author: Bernhard
    • Posted on: 2012/04/01
    • At: 15:22

    Wonderfull script. Very easy to integrate and very ‘powerful’ too. Thanks. Because of this it’s a pleasure to show a little financial support.

    Reply
    • Author: Tim
    • Posted on: 2012/04/03
    • At: 10:26

    Hi, I am going to sounds like an amateur here, but where do I need to install the script – ie. I get where to insert the code in the page, but do I need to also upload the javascript file onto the host server and if so where should I put it? And how should I nominate the path in the code?

    Reply
    • the naming it’s up to you. if –for instance– you upload the script to your server under the addtohome directory, then link to the files like so:
      <link rel="stylesheet" href="/addtohome/add2home.css">
      <script type="application/javascript" src="/addtohome/add2home.js"></script>

      Reply
        • Author: Tim
        • Posted on: 2012/04/04
        • At: 03:00

        ok, thanks.
        The script file downloads as a zip file. Do I need to extract all the files from the zip file first before uploading it to the server? Also, do all the files in the zip file need to be uploaded or if not, which is the file to upload?

    • Author: Lutz
    • Posted on: 2012/04/12
    • At: 17:19

    Hi there and thanks for this great script.
    Is there a possibility to open such a little box when loading which opens a or .html as popup and closing as well?

    Reply
    • Author: Mike
    • Posted on: 2012/04/13
    • At: 09:20

    Doesn’t resize properly on iPhone. Very small hard to read. Is there a fix for this? iOS5 problem maybe?

    Reply
    • Author: Dominic
    • Posted on: 2012/04/13
    • At: 14:15

    I would like it more if it would display on the whole Screen..
    Like a “big” Message.

    If you have a big site, it’s just very little.

    Can you help me?

    Reply
    • Author: Luis
    • Posted on: 2012/04/16
    • At: 13:47

    There seems to be a problem with localStorage.setItem, i think it’s a security problem, maybe only iOS5, so it’s preventing the X (close), returnungvisitor and expire functionality to work correctly.

    Reply
    • Author: Nam Nguyen
    • Posted on: 2012/04/16
    • At: 17:09

    Great script!

    Reply
  • A million times thank you. This is a great script that works perfectly and has saved me loads of time.

    Thanks again. You rock.

    Reply
    • Author: Andrey
    • Posted on: 2012/04/17
    • At: 23:11

    To small on iphone. How can i do dialog box bigger?

    Reply
    • could you please test my online demo and verify if that dialog is actually too small? I suspect people having trouble with balloon size don’t use initial-scale:1

      Reply
  • Thank you this is what you look for
    Thank you very, very

    Reply
    • Author: HomeroMx
    • Posted on: 2012/04/20
    • At: 16:15

    Hi, good morning…

    This script is awesome, all settings tested and working perfect, but I have a little issue, after “add to home screen”, all my links open a new safari tab, this is my deb site:

    http://www.jomaeli.com/booksmart/

    Any ideas????

    Thanks a lot…

    HomeroMtz

    Reply
      • Author: HomeroMx
      • Posted on: 2012/04/20
      • At: 16:19

      jeje sorry… its “my dev” site… ;)

      Thanks again….

      Reply
      • Author: Miles M
      • Posted on: 2012/04/26
      • At: 06:13

      full-screen for just the home page and browser-bar windows thereafter is just the way iOS web apps are formatted

      Reply
    • Author: Beck
    • Posted on: 2012/04/20
    • At: 16:49

    Hi,

    Nice script but I cant get it to work with my page. It works on a blank page I’ve tried.

    Look at my source (minimal source): http://www.larmkonsult.se/kga/problem.html

    Seems to be problem with my other css/js. If I remove these the popup shows.

    Reply
      • Author: Beck
      • Posted on: 2012/04/20
      • At: 16:50

      Double right click to view source.

      Reply
    • Author: jakob
    • Posted on: 2012/04/23
    • At: 23:41

    Hey. I can implement this ( ADD TO HOME SCREEN) module into my mobile jomla website ..? If I can how do I do? .. I have tried a little back and forth but no luck .. I’m far from good at making websites. So I hope there’s someone who can help me … thanks in advance

    Reply
    • Author: Darren
    • Posted on: 2012/04/24
    • At: 12:19

    Hi

    On my iphone the website is too big and needs to be resized to fit the screen but the buble is the perfect size.

    We did have it working the opposite way where the website was resized to fit the screen but the bubble was too small, then we added the following code and it went the opposite way as stated above. Can you suggest a fix. FYI great feature.

    My website link: http://bit.ly/JneD6a

    <meta http-equiv="Content-Type" content="; charset=” />

    Reply
      • Author: Darren
      • Posted on: 2012/04/25
      • At: 01:25

      Hi – I took out this line of code and the website is resized to fit the screen but the bubble is too small. Any suggestions would be very much appreciated.

      Website (in Construction) http://bit.ly/JneD6a

      Line of code:

      Reply
  • Hi there, above all thanks a lot for you great script. However I am experiencing a little issue, the same as HomeroMx.

    Each page I open from the WebApp open in a new safari tab, any idea to stay in the full screen webapp ?

    Thanks in advance.

    Reply
      • Author: Miles M
      • Posted on: 2012/04/26
      • At: 06:11

      Pretty sure that the full-screen feature for just the home page and browser-bar windows thereafter is just the way iOS web apps are formatted.

      Reply
  • I can’t get my apple-touch-icon to show up either and the close button isn’t working. I followed the directions exactly. http://www.reblis.com/beta

    Reply
    • Author: Fernando Lisboa
    • Posted on: 2012/05/03
    • At: 02:36

    Hi, in my iphone does not appears this option, i need customize ?

    Reply
    • Author: John
    • Posted on: 2012/05/03
    • At: 06:32

    Hello, I want to donate to you but I REFUSE TO USE PAYPAL. Oh well, your loss. Moneybookers is great, so are PayMate. Offer something other than PayFuck, eh, I mean, PayPal, and I’ll be glad to donate 20 bucks!

    Reply
    • there’s flattr

      Reply
        • Author: John
        • Posted on: 2012/05/07
        • At: 16:52

        sorry, but i’m not going to sign up to something just for one donation. i’ve shared on facebook and twitter. i love this script – it used to work for me i know, but i have no ios devices to test on now so i’m just going on faith it’s working on my sites. i’ve tried testing in safari with the ua set to iphone or ipad under the developer menu but it doesn’t show. hope it’s working!

      • no problem, it’s the thought that counts ;)

    • Author: Stephen
    • Posted on: 2012/05/03
    • At: 15:53

    Is there no option to say: “once a user dismisses the bubble I don’t want to show it again” ?

    Reply
    • set “expire” to a very high number (eg: one year 525600)

      Reply
    • Author: Tim
    • Posted on: 2012/05/04
    • At: 03:03

    Great script Matteo. Works perfectly so far. Any idea on when Android support will be added? Days? Weeks? Months? no pressure haha keep up the good work!

    Reply
    • Author: Chris
    • Posted on: 2012/05/07
    • At: 00:11

    First of all, great script! I use it on multiple sites and works like a charm.
    However, I’ve added it on a new site of mine and the bubble keeps returning, even though I ‘install the webapp’. Any idea what could be wrong?

    Here’s the code (same for all my sites):
    var addToHomeConfig = {
    touchIcon: true
    };

    Thanks!

    Reply
    • Author: John
    • Posted on: 2012/05/07
    • At: 16:49

    does this work in safari when under developer settings the ua is set to an iphone or ipad? i’m trying to test like this and it just won’t work.

    Reply
  • Hello wehn i put this in the .html then the page are zommed? if I leave out the very small then the button

    Reply
    • Author: Cartman
    • Posted on: 2012/05/12
    • At: 03:13

    Best script ever!

    Reply
  • I cannot get this to work on my wordpress powered blog. I have unzipped and uploaded as is to the plugins folder and added the following in header:

    Reply
  • It wouldnt let me post the code so where it says path too I have used /wp-content/plugins/cubiq-add-to-homescreen-508e479/style/add2home.css AND /wp-content/plugins/cubiq-add-to-homescreen-508e479/src/add2home.js

    Reply
    • Author: D Murray
    • Posted on: 2012/05/14
    • At: 17:22

    Hi

    Thank you for the great script.

    I’m having a similar problem to Chris.
    I have set apple-mobile-web-app-capable to yes, but, even after adding my site to my homescreen, I still get the bubble appearing on every page. I hav ethe code below in my . Am I doing something wrong?

    Regards

    D

    Reply
    • post a link to your site

      Reply
        • Author: D Murray
        • Posted on: 2012/05/15
        • At: 09:51

        Hi Matteo

        I can’t post a link to my client site as I’d get into bother :)

        I did however upload your examples to a test server, which seems to be doing exactly the same thing on my iPhone 4:

        http://www.electriccheese.co.uk/mobile/examples/simple/

        When I add the link to the homescreen and then open Safari again and refresh the page, the bubble pops up again.

        I did just update iOS to 5.1.1 (9B206). Could that be anything to do with it? Or am I missing something here?

        Many thanks

        D

      • I’d say that it works on my iPhone

        • Author: D Murray
        • Posted on: 2012/05/15
        • At: 20:12

        Thnaks for looking Matteo.

        I just tested it on my partners iphone 4. I load the page, no bubble appears. I close the browser and re-open it, refresh the page and the bubble appears as expected. I then add the page to the homescreen. I then re-load safari and refresh the page and the bubble appears again.

        I’m out of options.

        Thanks again.

      • Please do like so:
        1) clear your browser cache in Safari preferences
        2) go to http://cubiq.org/dropbox/a2h/examples/simple/ and let me know if the problem persists

        Thanks

        • Author: D Murray
        • Posted on: 2012/05/17
        • At: 13:58

        Hi Matteo

        Sorry, should have said, I get the same results with and without the cache being cleared. I’m clearing the cache fully under settings.

        I just tried your link on my iPhone4 and iPad2 (both with latest update):
        http://cubiq.org/dropbox/a2h/examples/simple/
        and get the same result again. The bubble popus up after the link has been added to the homescreen.

        I only have access to 2 iphones and an iPad2 I’m afraid.

        Driving me potty.

        Many thanks for your help

        D

      • I totally need to see a video of this :) Really I cannot replicate on any of my devices. Please remember to completely kill the browser (remove it from background) before clearing the cache. Even better try to reboot your iphone.

        Matteo

        • Author: D Murray
        • Posted on: 2012/05/18
        • At: 11:53

        I’ll bob a link in an email to you…

    • Author: D Murray
    • Posted on: 2012/05/14
    • At: 17:23

    Doh, wouldn’t let me post my code either, but I set the web app to enabled etc. Should I add that before or after the call to the js and css?

    Thanks

    D

    Reply
    • Author: sissi
    • Posted on: 2012/05/20
    • At: 22:29

    I have the tool embedded on a page where there is also an iframe that loads google mapps.

    Somehow it’s using the url of the iframe rather than the url of the page itself as bookmark link…..any ideas why? thx :)

    Reply
    • Author: Pradeep
    • Posted on: 2012/05/21
    • At: 12:05

    We are using iPad. When we open our web site in Safari we have ‘Add to Home’ pop up. If we Add it to Home we get an icon on the iPad screen. If we close that session and again open it in Safari we again get ‘Add to Home’ pop up. How can we avoid that. We checked the same functionality for other site e.g. espn. For that site the ‘Add to Home’ pop up does not come back once it is added to screen on iPad. Is there any way to find out that whether this site is already added on the screen of the iPad?

    Reply
    • you can make an educated guess, but it’s not bulletproof. On ESPN they probably set a cookie if you come from the URL that shows the balloon (instead of simply espn.com).

      Reply
        • Author: Pradeep
        • Posted on: 2012/05/28
        • At: 17:08

        Hi Matteo. Thank you for reply. One more question, if we are able to add web app on the screen of iPad (with the help of javascript), then there should be a way to find which web apps are present on the iPad screen. Is there such kind of javascript/jquery to find out web apps on iPad screen.
        Thanks in advance.

      • Unfortunately there’s no such API

        • Author: Pradeep
        • Posted on: 2012/05/30
        • At: 12:29

        Hi Matteo, did not find reply button below your latest comment. So asking my question here. When we click ‘Add’ button from pop up to add app on iPad screen at that time which event/function is called? Can we handle/update that event/function? Please let me know as we require it urgently.
        Thanks in advance.

      • no action/event is triggered when you tap the “add to homescreen” button

    • Author: Anthony
    • Posted on: 2012/05/21
    • At: 12:13

    Hey, great script though it seems to have a problem with iOS 5.1.1 which causes the icon and splash screen to fail to load.

    Reply
    • Author: Daniel
    • Posted on: 2012/05/23
    • At: 14:55

    Hi Matteo, first of all thanks for the nice script.

    We have a problem with the following:

    The bubble opens on every page, because we are using a cms. But this is ok.

    Now if you add a page to the home screen, the bubble will not appear on this particular page, but on every other page.

    It would be nice if the script only added one particular page to the home screen (the homepage) and does not appear on every page after that.

    Is this possible or do we have to only include the script on the homepage and not on the following pages?

    Thank you!
    Daniel

    Reply
    • yes, include the script in the homepage only.

      Reply
        • Author: Daniel
        • Posted on: 2012/05/25
        • At: 12:31

        Thanks for your answer, of course this JS just points to an iPhone feature, so the url cannot be changed. Your answer is the solution we are looking into right now.

      • if you have a 1 page site, you have to call the script programmatically with addToHome.show()

  • I love this script! I would like to customize it so there are different apple-touch-icons for each college. Is that possible? I’ve tried adding another icon called apple-touch-iconcc.png, editing css and js file but it always uses the standard apple-touch-icon.png. Ideas?

    Reply
    • maybe you have caching issues? Remember to place just 1 touch icon per page per device and add a “scrambler” to the image name to destroy cache (eg: apple-touch-icon.png?v123)

      Reply
      • Where in the code would I tell the browser to use the other image? In js file? CSS file?

      • sorry don’t follow you. the icon is declared in the METAs

      • Yes, that answers my question. Thanks for your help.

    • Author: Stass
    • Posted on: 2012/05/27
    • At: 11:08

    «If the user intentionally closes the balloon, it won’t show up again for all the duration of that session.»

    How I can owerride this?

    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>