[stackoverflow] cufon magic preview v2

3937187/cufon-and-jquery-magic-preview

HTML

<script src="http://cufon.shoqolate.com/js/cufon.js"></script>
<script src="http://cufon.shoqolate.com/fonts/Vegur.font.js"></script>
<h1>Cufon Test</h1>
<input id="in" type="text" preview="#out">
<div id="out"><h1>Start typing 1 ...</h1></div>

<input id="in2" type="text" preview="#out2">
<div id="out2"><h1>Start typing 2 ...</h1></div>

JavaScript

Cufon.replace('h1');

//refresh @ 1000 ms after focus lost & only if dirty
(function($) {
    $.extend($.fn, {
        liveCufon: function(attr) {
            attr = attr || 'preview';
            return this.keyup(function() {
                //on keyup: update the html, mark as dirty, remove any pending timeouts
                var $t = $(this);
                $($t.attr(attr)).html($t.val());
                $t.data('dirty', true);
                window.clearTimeout($t.data('timeout'));
            }).blur(function() {
                //on blur: if dirty than set a new timeout
                var $t = $(this);
                if ($t.data('dirty')) {
                    $t.data('timeout', window.setTimeout(function(_$t) {
                        Cufon.replace(_$t.attr(attr));
                        _$t.data('dirty', false);
                    }, 1000, $t));
                }
            });
        }
    });
})(jQuery);

//refresh @ 1000 ms after last keypress
(function($) {
    $.extend($.fn, {
        liveCufon2: function(attr) {
            attr = attr || 'preview';
            return this.keyup(function() {
                //on keyup: update the html, restart the timeout
                var $t = $(this);
                $($t.attr(attr)).html($t.val());
                window.clearTimeout($t.data('timeout'));
                $t.data('timeout', window.setTimeout(function(_$t) {
                    Cufon.replace(_$t.attr(attr));
                    _$t.data('dirty', false);
                }, 1000, $t));
            });
        }
    });
})(jQuery);

$('#in').liveCufon();
$('#in2').liveCufon2();