(function ($) { $.fn.zoomableType = function (klass) { if (navigator.userAgent.match(/iPhone/)) return this; $(this).live('click', function () { if ($.zoomableType) return false; $.zoomableType = $('<span>', { 'id': 'zt' + new Date().getTime(), 'class': (klass || 'zoomed') }).text($(this).text()).appendTo('body').attr('data-unzoomed-width', $(this).width()).attr('data-unzoomed-height', $(this).height()); setSizeAndPosition($.zoomableType); $(document).bind('click.zt keydown.zt', unzoom); $(window).bind('resize.zt', setSizeAndPosition); function unzoom() { $(document).unbind('click.zt keyup.zt'); $(window).unbind('resize.zt'); $.zoomableType.remove(); $.zoomableType = null; } function setSizeAndPosition() { var win = $(window); var widthScale = (win.width() - win.width() * 0.10) / $.zoomableType.attr('data-unzoomed-width'); var heightScale = (win.height() - win.height() * 0.10) / $.zoomableType.attr('data-unzoomed-height'); $.zoomableType.css('font-size', (widthScale < heightScale ? widthScale : heightScale) * 100 + '%'); var radius = $.zoomableType.outerWidth() * 0.02; $.zoomableType.css({ 'padding': radius, '-moz-border-radius': radius, '-webkit-border-radius': radius, 'border-radius': radius, 'text-shadow': '#000 2px 2px ' + parseFloat($.zoomableType.css('fontSize')) * 0.01 + 'px' }); $.zoomableType.css({ 'left': (win.width() - $.zoomableType.outerWidth()) / 2, 'top': win.height() / 2 - $.zoomableType.outerHeight() / 2 }); } }); return this; } })(jQuery);