qEZgPX

index.html

<div id="upsell"></div>

<script id="upsell-banner-template" type="x-tmpl-mustache">
  <div class="upsell-banner is-hidden" role="banner" aria-labelledby="upsell-title" {{#desc}}aria-describedby="upsell-desc"{{/desc}}>
    <div class="upsell-banner__inner">
      <div class="upsell-banner__column">
        <button class="upsell-banner__dismiss js-upsell-dismiss">&#215;</button>
      </div>
      <div class="upsell-banner__column">
        <img src="http://www.fillmurray.com/64/64" alt="" />
      </div>
      <div class="upsell-banner__column upsell-banner__column--full header">
        <h1 class="header__title" id="upsell-title">{{title}}</h1>
        <p class="header__sub-title" id="upsell-desc">{{subTitle}}</p>
        <p class="header__label"><strong>{{label}}</strong></p>
      </div>
      <div class="upsell-banner__column">
        <a href="{{appStoreLink}}" class="upsell-banner__action button js-upsell-action" title="{{action}}">{{action}}</a>
      </div>
    </div>
    {{#desc}}
    <div class="upsell-banner__inner upsell-banner__inner--desc content">
      <div class="upsell-banner__column">
        <span class="content__info">i</span>
      </div>
      <div class="upsell-banner__column upsell-banner__column--full">
        <p id="upsell-desc" class="content__desc">{{desc}}</p>
      </div>
    </div>
    {{/desc}}
  </div>
</script>

qEZgPX.markdown

qEZgPX

A Pen by Matthew Burrows on CodePen.

License.

script.js

var browser = (function() {
  var isIOS = (function () {
        if (/(iPod|iPhone|iPad)/.test(navigator.userAgent)) {
          return true;
        }
        return false;
      }()),
      isAndroid = (function () {
        var matches = navigator.userAgent.match(/Android (\d+(?:\.\d+)+)/);
        return matches !== null;
      }()),
      androidVersion = (function () {
          var matches = navigator.userAgent.match(/Android (\d+(?:\.\d+)+)/),
              version,
              versionNumber;
          if (matches === null) {
              return false;
          }
          matches = matches[0].split(" ")[1];
          version = matches.split(".");
          if (version[0] !== null) {
              versionNumber = version[0];
          }
          if (version[1] !== null) {
              versionNumber += "." + version[1];
          }
          if (version[2] !== null) {
              versionNumber += version[2];
          }
          return parseFloat(versionNumber);
      }()),
      isKindle = (
        /Silk/.test(navigator.userAgent) ||
        /Kindle/.test(navigator.userAgent) ||
        /KFOT/.test(navigator.userAgent) ||
        /FKTT/.test(navigator.userAgent)
      );
  return {
    isIOS: isIOS,
    isAndroid: isAndroid,
    androidVersion: androidVersion,
    isKindle: isKindle
  };
})();

(function ($) {
  var cache = {
      $upsellContainer: $('#upsell')
    },
    states = {
      hidden: 'is-hidden'
    },
    // @TODO: access set cookie value.
    enabledCookies = true,
    // @TODO: access language cookie value.
    language = 'en' || 'en',
    i18n = {
      en: {
        title: 'EN Title here',
        subTitle: 'EN Subtitle here',
        label: 'EN Label here',
        desc: 'EN Description here: lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem impedit sapiente debitis.',
        action: 'EN View'
      },
      cy: {
        title: 'CY Title here',
        subTitle: 'CY Subtitle here',
        label: 'CY Label here',
        desc: 'CY Description here: lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem impedit sapiente debitis.',
        action: 'CY View'
      },
      ga: {
        title: 'GA Title here',
        subTitle: 'GA Subtitle here',
        label: 'GA Label here',
        desc: 'GA Description here: lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem impedit sapiente debitis.',
        action: 'GA View'
      },
      gd: {
        title: 'GD Title here',
        subTitle: 'GD Subtitle here',
        label: 'GD Label here',
        desc: 'GD Description here: lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem impedit sapiente debitis.',
        action: 'GD View'
      }
    },
    methods = {
      showBanner: function () {
        cache.$upsellBanner.removeClass(states.hidden);
      },
      hideBanner: function (evt) {
        if (evt) {
          evt.preventDefault();
        }
        cache.$upsellBanner.addClass(states.hidden);
        setTimeout(function () {
          cache.$upsellBanner.remove();
        }, 400);
        // @TODO: Set cookie hiding the banner for 30 days.
      },
      trackUpsell: function (evt) {
        if (evt) {
          evt.preventDefault();
          // @TODO: Send stat call that passes what appstore the user is visiting
          console.log('tracking');
        }
      },
      detach: function () {
        $(document).off('click.upsell');
      }
      attach: function () {
        $(document)
          .on('click.upsell', '.js-upsell-dismiss', methods.hideBanner)
          .on('click.upsell', '.js-upsell-action', methods.trackUpsell);
      },
      getAppstoreLink: function () {
        // @TODO: Need to add in the correct link locations to the appstores.
        if (browser.isIOS) {
          return '/iOS';
        } else if (browser.isAndroid) {
          return '/Android';
        } else if (browser.isKindle) {
          return '/Kindle';
        }
        return '/#';
      },
      renderTemplate: function () {
        var template = $('#upsell-banner-template').html(),
            params = $.extend({}, i18n[language], {
              appStoreLink: methods.getAppstoreLink()
            });
        $('#upsell').html(Mustache.render(template, params));
        cache.$upsellBanner = cache.$upsellContainer.find('.upsell-banner');
        methods.attach();
        setTimeout(methods.showBanner, 1);
      },
      hasNativeApp: function () {
        return (
          browser.isIOS ||
          (browser.isAndroid && browser.androidVersion >= 2.2) ||
          browser.isKindle
        );
      },
      init: function () {
        // @TODO: uncomment real condition.
        // if (enabledCookies && methods.hasNativeApp()) {
        if (true && true) {
          methods.renderTemplate();
        }
      }
    };
  
  $(document).on({
    ready: function () {
      if (browser.isAndroid) {
        alert(browser.androidVersion);
      }
      methods.init();
    }
  });
  
})($);

style.scss

$upsell-bg: #eee;
$upsell-dismiss-bg: #c7c7c7;
$upsell-action-bg: #f54997;
$upsell-action-text: #fff;
$gel-gutter: 8px;

.upsell-banner {
  width: 100%;
  max-height: 250px;
  background: $upsell-bg;
  overflow: hidden;
  font-family: Arial, Helvetica, freesans, sans-serif;
  transition: max-height 0.4s ease 0s;
  &.is-hidden {
    max-height: 0;
  }
  .upsell-banner__inner {
    min-width: 320px;
    max-width: 1024px;
    width: 100%;
    display: table;
    margin: 0 auto;
    padding: $gel-gutter 0;
    text-align: left;
    &--desc {
      border-top: 2px solid $upsell-dismiss-bg;
    }
  }
  .upsell-banner__row {
    display: table-row;
  }
  .upsell-banner__column {
    display: table-cell;
    padding: 0 ($gel-gutter / 2);
    vertical-align: middle;
    &--full {
      width: 100%;
    }
  }
  .upsell-banner__dismiss {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    color: $upsell-dismiss-bg;
  }
}

.header {
  .header__title {
    color: #1a1a1a;
    font-size: 14px;
    line-height: 1.3;
  }
  .header__sub-title {
    margin-bottom: $gel-gutter;
    color: #777;
    font-size: 11px;
    line-height: 1.25;
  }
  .header__label {
    color: #1a1a1a;
    font-size: 12px;
    line-height: 1;
    text-transform: uppercase;
  }
}
.content {
  .content__info {
    width: 14px;
    display: inline-block;
    padding: 2px;
    background-color: $upsell-dismiss-bg;
    border-radius: 50%;
    color: $upsell-bg;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
  }
  .content__desc {
    color: #1a1a1a;
    font-size: 16px;
    line-height: 1.3;
  }
}

.button {
  display: inline-block;
  background: $upsell-action-bg;
  padding: ($gel-gutter / 2) $gel-gutter;
  color: $upsell-action-text;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
}

This might be way too slow thinking about it. No idea on a solution but you'll likely get a horrible jump as it loads in

@joshrp - animate it in...