• 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: bstewart
    • Posted on: 2011/05/26
    • At: 15:25

    Any way to increase the size of the box (and fonts) on the iPhone? iPad size is good. GREAT SCRIPT!

    Reply
    • You can customize it in any way you like, just modify the css

      Reply
    • Author: dayna
    • Posted on: 2011/05/27
    • At: 20:27

    Do you know to do this for Android?

    Reply
    • Author: Carlos
    • Posted on: 2011/05/28
    • At: 13:23

    Superb script.. have just donated to say thanks!

    Reply
    • Author: Thumb
    • Posted on: 2011/05/29
    • At: 20:19

    i used this in a webapp (duh…) and i really liked it,
    i’ve put you on my credits page (1 out of 3 pages) so you’ll get visitors from me as well =D

    Reply
    • glad you liked it and thanks for your support

      Reply
    • Author: ccar
    • Posted on: 2011/05/30
    • At: 22:28

    Thank you.

    Reply
    • Author: bearlakeboarder
    • Posted on: 2011/06/08
    • At: 15:26

    Do you know of any way to get this working on Android? I’m working on a cross-platform web app… By the way, EXCELLENT SCRIPT! Thanks a lot man. It works flawlessly on my jQueryMobile site for iPhone and iPad (haven’t tested iPod, but I assume it’s the exact same). And it seems to be the only script of its kind as of 6/8/11.

    Reply
    • technically it might work on android, but as far as I know it’s not possible to “install” a webapp on android from the browser itself.

      Reply
  • Perfect! Absolutely bang on the money, gone are the days of having to explain how to install web apps. Love it

    Reply
    • Author: Mark
    • Posted on: 2011/06/29
    • At: 19:57

    This script works excellent on a couple sites I’m working on.

    I’ve modified the code a bit so instead of launching the load event on window.load, I launch it on a button press (on a help button instead)

    Basically only had to comment out the event listeners and make the method public.

    But it only seems to run once. If I press the button again it goes through the motions but doesn’t seem to show anything.

    Any ideas?

    Reply
      • Author: Mark
      • Posted on: 2011/06/29
      • At: 20:15

      Nevermind.
      I realized the element was being removed in transitionEnd.
      As soon as I commented that out, I can make it appear as many times as I like.

      Reply
      • Author: Jorge
      • Posted on: 2011/11/18
      • At: 04:45

      Hey Mark, could you post the lines you updated? I’m trying to do the same thing but I don’t know where exactly to tweak.

      Thanks in advance!

      Reply
    • Author: Roger
    • Posted on: 2011/06/30
    • At: 19:09

    Very cool script. Thank You

    Has anyone had an issue with ASP pages and the script? I tested the example and it works great under .html but when I change the extension to .asp I get the error. I changed this because most of my pages on my site are .asp

    Active Server Pages error ‘ASP 0138′
    Nested Script Block

    A script block cannot be placed inside another script block.

    Reply
    • Try this:
      document.write('<s' + 'cript type="application/javascript" src="../../src/add2home.js">&ls;\/s' + 'cript>');

      Reply
      • Author: Roger
      • Posted on: 2011/07/06
      • At: 19:11

      The code still did not work. A friend of mine said he has it working on an ASP page. I will check it out and post the results if needed. Thanks!

      Reply
    • Author: jay
    • Posted on: 2011/07/06
    • At: 08:01

    Great script!

    is ti possible to replace the word iPod with the word iTouch when it displays %device

    Reply
    • you have to replace it in the script core.

      Reply
    • Author: Ian
    • Posted on: 2011/07/07
    • At: 03:11

    This is awesome! Had it working great, think it still is but I must have worn out my number of uses, definitely not more than 100, maybe 5-10? But iterations:100 is still set, is that not what I think it is or did I miss something (not a js person, really)? Thanks!

    Reply
      • Author: Ian
      • Posted on: 2011/07/07
      • At: 06:00

      Seems to be ok if i leave it for a few min, gotta be patient!

      Reply
    • Author: jay
    • Posted on: 2011/07/09
    • At: 17:54

    @matteo

    i kinda figured thats where it would be… i dont know enough about javascript to do an if statement on the $device variable
    to display iTouch instead of iPod would you offer paid support to implement that change? if so how much?

    cheers

    jay

    Reply
    • replace
      nav.platform.split(‘ ‘)[0]
      with
      nav.platform.split(‘ ‘)[0].replace(/ipod/i, ‘iTouch’)

      Reply
    • Author: jay
    • Posted on: 2011/07/09
    • At: 17:56

    also how do you do the video screencast of your iphone – thats cool!

    thanks

    Reply
    • Author: Gaucho
    • Posted on: 2011/07/10
    • At: 19:09

    Great stuff!! It wasn’t working for me on a JQtouch webapp until I changed the following code in the add2home.js file:

    // take this existing line out:
    //document.body.appendChild(div);

    // and add the following with ‘home’
    // changed to whatever the first screen’s div ID is:
    document.all.home.appendChild(div);

    I’m guessing there may be a better way to do this… but this worked for me so I thought it may help others

    thanks again Cubiq – GREAT work!!

    Reply
      • Author: Jonah
      • Posted on: 2011/09/19
      • At: 00:22

      Thank you so much for this, Gaucho!! You really saved me. It wasn’t working and I was tearing my hair out until I found your post. Saved me so much time!!

      Reply
      • Author: RJ Auburn
      • Posted on: 2011/10/07
      • At: 20:14

      Hit the same issue with jQuery mobile (RC1). Made the hack as above and it works great.

      Reply
    • Author: jay
    • Posted on: 2011/07/11
    • At: 23:09

    awesome thanks on both instances!

    Reply
    • Author: Luca
    • Posted on: 2011/07/12
    • At: 14:19

    Ciao
    ho visto che sei italiano, una domanda: il tuo script mi sembra che non sia compatibile con jQuery Mobile, è vero o sbaglio io qualche cosa?

    Reply
    • Author: JIm
    • Posted on: 2011/07/13
    • At: 20:32

    how can I modify the code to only show the bubble message on the home page? I’ve tried adding

    if ($(‘body’).hasClass(‘front’)) {
    if (‘standalone’ in navigator && !navigator.standalone && (/iphone|ipod|ipad/gi).test(navigator.platform) && (/Safari/i).test(navigator.appVersion)) {
    var addToHomeConfig = {
    animationIn:’fade’, // Animation In
    animationOut:’fade’, // Animation Out
    lifespan:10000, // The popup lives 10 seconds
    expire:0, // The popup is shown only once every 2 minutes
    touchIcon:true
    };

    document.write(”);
    document.write(”);
    }
    }

    and also tried

    if (‘standalone’ in navigator && !navigator.standalone && (/iphone|ipod|ipad/gi).test(navigator.platform) && (/Safari/i).test(navigator.appVersion) && ($(‘body’).hasClass(‘front’)) {
    var addToHomeConfig = {
    animationIn:’fade’, // Animation In
    animationOut:’fade’, // Animation Out
    lifespan:10000, // The popup lives 10 seconds
    expire:0, // The popup is shown only once every 2 minutes
    touchIcon:true
    };

    document.write(”);
    document.write(”);
    }

    Neither worked. I also tried to use a PHP code if statement for front page, but that stops the popup from displaying too.

    Thanks so much for any help!!

    Reply
    • Author: Tom McKearney
    • Posted on: 2011/07/15
    • At: 17:01

    Is there a way to tell whether or not they have already done this? I don’t want to annoy the crap out of users who have already added it.

    Tom

    Reply
    • if they already added the app to the homescreen, they probably access it from the homescreen and if your app is in full screen mode the message is not shown.

      Reply
    • Author: JIm
    • Posted on: 2011/07/15
    • At: 19:23

    Thanks so much for all your time on this!

    Another issue I’m having is when the Safari Mobile address (header) bar gets hidden.

    It appears the calculation of the popup position gets calculated before the address bar is hidden. So, the address bar is visible for a moment, and then when it’s hidden the popup ends up 50 pixels or so above the Safari toolbar footer. It doesn’t seem to be a problem in the demo because the Safari address bar isn’t hidden.

    Any ideas on a way to fix this?

    Thanks for any help!

    Also, great blog post on iOS5 and fixed positioning…

    Reply
    • you may try by increasing the startDelay. Set it to 4000ms or whenever the url bar hiding is completed.

      Reply
        • Author: Jim
        • Posted on: 2011/07/18
        • At: 17:03

        Thanks for the response Matteo.

        I have actually added a full screen splash div behind the popup in the js file and I’m using both as a startup/splash page for users in Mobile Safari. Anyway, I removed the fade and startDelay so that the splash screen starts right away. Both fade after 10 seconds, or when the close button is clicked.

        In order to get the popup to display at bottom of screen after Safari address bar is hidden, I have also tried to use the bottom offset to push the popup down with a negative value, but a few times the popup ended up below the Safari footer.

        Thanks again for any help.

    • Author: Alan
    • Posted on: 2011/07/16
    • At: 02:18

    Have you tested this in conjunction with your iScroll script? I seem to be doing everything right (files load properly, and addToHomeClose is available), but I can’t seem to get it to show up. I’ve tried doing what Gaucho recommends above (replacing document.body.appendChild(div) with document.all.main.appendChild(div)) but it doesn’t seem to help. (I’m using iScroll on #main, with an inner element of #event-list).

    Any ideas?

    Reply
    • Author: Midhun
    • Posted on: 2011/07/18
    • At: 18:41

    I am not able to get the touchicon beside the message in the bubble. I have done the following:

    touchicon: true;

    I have added the following lines in my head tag:

    link rel=”apple-touch-icon” href=”../apple-touch-icon.png” type=”image/png”/
    link rel=”apple-touch-icon-precomposed” href=”../apple-touch-icon-precomposed.png”/
    link rel=”apple-touch-icon” sizes=”72×72″ href=”../apple-touch-icon-72×72.png” /
    link rel=”apple-touch-icon” sizes=”114×114″ href=”../apple-touch-icon-114×114.png” /

    but still I am not able to get the touchicon image in the bubble.

    Any ideas please??

    Thanks a lot in advance. :-)

    Reply
    • mmh maybe the relative path? try to use absolute path for your touch icons

      Reply
        • Author: Midhun
        • Posted on: 2011/07/25
        • At: 18:37

        I am working in asp.net mobile. I need to create a user control and only then it will work. I didnt know this before and though there was a mistake in script. My mistake. Works now perfectly.

        Great script though!

        One more thing. This bubble shows up even after user adds to home screen. Can the script be updated in such a way that, once user adds to home screen, the bubble should not show up.

        I dont know how feasible it is. But just wanted to know.

        Thanks!

      • It shouldn’t show up when the app has been added to the homescreen. If it does, I need a detailed report.

        • Author: Henry Jin
        • Posted on: 2011/07/28
        • At: 05:19

        Maybe visitor still uses Safari to see the bubble. If in Safari we can not detect if already added to home screen, the only solution will be cookie. Correct me if I am wrong.

      • remember to add apple-mobile-web-app-capable meta

      • Author: Midhun
      • Posted on: 2011/07/26
      • At: 16:57

      Report means… do you want a screencast or ..?

      What do you want the report to contain?

      Sorry for such dumb question, but I m new to asp.net development. :-)

      Thanks,
      Midhun.

      Reply
      • a link to your app would be the easiest thing. also what iOS device are you testing on?

        • Author: Midhun
        • Posted on: 2011/07/27
        • At: 18:14

        Its dev.mkitgo.com. I tested it using Iphone 3G. I made a change to the options.expire to 0. I tested it with option.expire to 1, but still, in all cases, the bubble shows up even after adding to home screen.

      • your site is not “web app capable”, you have to add

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

        to your page head

    • Author: Adam
    • Posted on: 2011/07/19
    • At: 11:08

    Is it possible to add a different message for users who are viewing through a Twitter app / QR reader app WebUIView so I can tell them “open this in Safari to add to homescreen” or something?

    Reply
    • this is a cool feature to add. I’ll put it in my to-do!

      Reply
    • Author: Frank
    • Posted on: 2011/07/23
    • At: 02:10

    It seems like, taht the “Add to home screen” Bubble will not resize for iphone users. It shows up very small. is there an option to change it, that it shows up in fit of iphone screen?

    thx

    Reply
    • don’t know what you mean. the balloon is the same size for all devices. if you want it bigger you can always alter the stylesheet

      Reply
    • Author: andrew
    • Posted on: 2011/07/26
    • At: 17:20

    Brilliant tutorial, very professional & works a treat!

    Reply
    • Author: Davis Gossage
    • Posted on: 2011/07/29
    • At: 03:32

    Just wanted to compliment you on how professional this looks. Also is there a maximum value for the ‘expire’ option? I was wanting to set it so it reminds users every week.

    Reply
    • there shouldn’t be any limit to the expire. You can freely set to one week or one year, or even 10 years probably.

      Reply
  • love this! – thanks, want to use it but have a small problem. when i use

    meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0″

    it scales up current site (posterous) weirdly so i have taken this line out, problem is the box is smaller and location arrow is wrong on the top now (ipod one is fine) – is there a simply way to adjust the arrow on the top for the ipad?

    i’m new to mobility sites but can hack things together ok. ;)

    Reply
    • Author: Ray
    • Posted on: 2011/07/31
    • At: 16:12

    on the main links

    can we have some type of sounds buttons?

    Reply
    • Author: Ray
    • Posted on: 2011/07/31
    • At: 16:12

    Can we have sounds with the buttons?

    Reply
    • Author: Davis Gossage
    • Posted on: 2011/07/31
    • At: 20:43

    One more question. I’m having trouble getting my custom webclip icon to show up. Is this because add2home.js controls this?

    Reply
    • no, add2home does not interfere with your custom icon.

      Reply
    • Author: nilkash
    • Posted on: 2011/08/03
    • At: 13:46

    hii this is nice feature…
    but ther is one problem i include it still showing balloon

    Reply
    • Author: nilkash
    • Posted on: 2011/08/03
    • At: 14:06

    hiiiiiiiii i include meta tag for prevent the balloon to appear but its not working….

    Reply
    • Author: Davis G
    • Posted on: 2011/08/04
    • At: 19:57

    I can’t run this web app in fullscreen mode because I need the back button to be available. If the app isnt running full screen, is it impossible to detect that the page has been added to the home screen? Thanks for your help, love the plugin.

    Reply
      • Author: Davis G
      • Posted on: 2011/08/04
      • At: 20:00

      YouTube does this somehow, and I read that you can use a get http request to get the context root? This is all over my head, but would you know how to make this work?

      Reply
      • Interesting. I’ll have a look at it.

    • Author: Jacob
    • Posted on: 2011/08/10
    • At: 19:11

    Didnt worked for me :(

    I changed the code for jqtouch like some suggestions here, but no way to make it work. Neither iPad, iPhone, nothing :(

    Reply
  • The script works perfectly, just one thing , I added my Homepage to the Home screen and once I revisit the Homepage I see the pop-up again, my site already has the meta tag :

    apple-mobile-web-app-capable

    is there something else I need to do in order for the pop-up to not display if the shortcut is already added to the homescreen?

    Reply
    • Author: Hiro
    • Posted on: 2011/08/14
    • At: 11:17

    Hi,
    It’s awesome!
    I was looking for something like this!!
    I donated you right now.

    Thanks a lot!

    Reply
    • arigatogozaimashita
      I’ll soon update the add2home script, so stick around! ;)

      Reply
    • Author: J. Pisano
    • Posted on: 2011/08/19
    • At: 20:30

    Wicked cool code. Awesome. Is there a way to pre-create a “button” on the website that would be used for the button that gets placed on the iPhone, etc.? That is I would like to create a button graphic to be used as the icon for the “app launch” on the iPhone so it would be automatically used instead of what is generated…

    Reply
    • Author: Alex
    • Posted on: 2011/08/22
    • At: 00:28

    For Jacob
    You need to put your deafults in add2home.css

    Reply
      • Author: Alex
      • Posted on: 2011/08/22
      • At: 00:31

      You can take all tools at top – GET THE SCRIPT
      and put each file to your web site root.

      Reply
    • Author: Tony M
    • Posted on: 2011/08/25
    • At: 15:52

    Hi Matteo. I absolutely love your script, buddy–thanks a million. It looks great on my blank test pages. The problem is I can’t get it to work on my full iOS web page, which utilizes iUI. iUI uses its own javascript code. My question is: Do you know of any way to make both iUI and Add to Home Screen work harmoniously? If you’re not familiar with iUI, do you have any tips with regards to how I may run multiple javascripts without conflict? Thanks.

    Reply
      • Author: Tony M
      • Posted on: 2011/08/25
      • At: 16:11

      Nevermind. I solved the problem. I changed some code (From: document.body.appendChild(div); To: document.documentElement.appendChild(div);), and now it works flawlessly! I’ll be donating later today. Thanks again!

      Reply
    • Author: Cupper
    • Posted on: 2011/09/02
    • At: 21:09

    Thank you, you saved me a lot of time. Your page was the first interesting one on Google and 15 minutes later I had it working on my webapp.

    Reply
  • Thanks a lot for the script! But for some reason apple-touch-icon stopped working. It was working for one day and the next day icon doesn’t appear anymore. The code is the same. Can you have a look? URL of the app: http://www.genkin.org/apps/ndfilters/ndfilters.html

    Reply
    • it works for me. Maybe a temporary server error?

      UPDATE: the second time you load the page the icon doesn’t appear. That’s really weird, I cannot replicate on my server. Can you try to use relative paths instead of absolute ones?

      Reply
      • Hi Matteo, thanks for checking! Actually I used relative path at first but when the next day the icon disappeared I started investigating and changed to absolute path – same thing. It does the same thing on my local dev server and remote “production” one. Just changed path back to relative one on my local dev server – doesn’t work. Really strange. Any thoughts?

      • below line 117 add: console.log(touchIcon); and see what it returns.

    • Author: craig
    • Posted on: 2011/09/04
    • At: 02:12

    Is there anyway to add a link to the pop up for going out to another page. I would like to use this pop up for directing people to another page so they can download my iPhone and Android apps.

    Reply
    • you can customize the message. have a look at the advanced features.

      Reply
    • Author: Markus
    • Posted on: 2011/09/10
    • At: 19:45

    Hello, can the script check if home screen icon is exist?

    Reply
  • hiiiiiiiii i include meta tag for prevent the balloon to appear once it is added to home screen but its not working…

    Reply
    • Author: Phil
    • Posted on: 2011/09/15
    • At: 14:39

    You write “iPhone does not support fixed positioned elements, so the message has to be relocated on each page scroll.”.
    On the app.ft.com site which uses a similar balloon, you can perfectly scroll the background while the balloon stays fixed. Maybe check how they do it.

    Nice work anyhow.

    Reply
    • They probably use a JS scroller such as iscroll

      Reply
    • Author: vladimir
    • Posted on: 2011/09/16
    • At: 15:29

    hi, i have some question about script… in JS i’m new… so, i will discribe my problem…
    I have imported this script in my ASP.NET project, when i trying to compile and run my project, Visual Studio throws me an error – http://screencast.com/t/ho8Chwo48Q
    can you help me solve this error?

    Reply
    • Author: Luca
    • Posted on: 2011/09/21
    • At: 18:13

    Ciao Matteo,
    Everything is going well, I have put my webapp on Ipad, when click on created icon my website start in fullscreen, but when I try to click a link inside my site Ipad switch to browser and not stay in app! Why? Have you already find a solution for this strange behaviour? Thanks in advance! Luca

    Reply
      • Author: vladimir
      • Posted on: 2011/09/21
      • At: 20:13

      you need to rewrite your links…
      i did in that case
      javascript

      function navigator_Go(url) {
          window.location.assign(url); // This technique is almost exactly the same as a full [a] page refresh, but it prevents Mobile Safari from jumping out of full-screen mode
      }
      

      right url

      ((HyperLink)sender).NavigateUrl = "javascript:navigator_Go('" + Request.ApplicationPath + "page.aspx" + "');"; //for Iphone
      
      Reply
    • Author: Max
    • Posted on: 2011/09/22
    • At: 03:02

    the script works perfectly on ipad only in the portrait mode, but when I rotate the ipad or run the app on the landscape mode, the balloon shifts to the right of the icon, and it does not stand exactly below the icon, is there anyway to solve this problem?

    Reply
    • cannot replicate, works perfectly on my ipad. perhaps there’re some conflicting elements in your installation? I should see a demo.

      Reply
        • Author: Max
        • Posted on: 2011/09/22
        • At: 18:33

        i have iPad 1 with IOS 4.3.5 version, the problem even exists when I run your simple example in the ipad simulator window, that’s why i don’t think it’s my app or ipad problem.

        • Author: Max
        • Posted on: 2011/09/22
        • At: 23:16

        the problem is solved! I just didn’t copy the Meta tag in your html page for keeping the page scale at 1.0, so it changed the page scale whenever i rotated the ipad, and therefore the balloon relocated in wrong spot.
        Thank you for the script

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