PhoneGap Tips

Demos: Image Replacement

Try this example in your iOS or Android web browser, or read more about hardware acceleration and image replacement.

Negative text-indent

Tap the HTML5 logo!

HTML

<a class="html5logo"
  href="javascript:void(0);">HTML5</a>

CSS

.html5logo {
  display: block;
  width: 128px;
  height: 128px;
  background: url(/img/html5-badge-128.png) no-repeat;
  text-indent: -9999px;
}

JavaScript

$('.html5logo').on('click tap', function(e) {
  e.preventDefault();
  var $self = $(this);
  $self.one('webkitAnimationEnd', function() {
    $self.removeClass('pulse');
  }).addClass('pulse');
});

Text-indent with overflow hidden

Tap the HTML5 logo!

HTML

<a class="html5logo"
  href="javascript:void(0);">HTML5</a>

CSS

.html5logo {
  display: block;
  width: 128px;
  height: 128px;
  background: url(/img/html5-badge-128.png) no-repeat;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

JavaScript

$('.html5logo').on('click tap', function(e) {
  e.preventDefault();
  var $self = $(this);
  $self.one('webkitAnimationEnd', function() {
    $self.removeClass('pulse');
  }).addClass('pulse');
});