Cufon and Jquery Magic Preview

Question

Jquery Magic preview allows a user to enter in text and have it auto update (much like this "submission field" works with the preview loading below!). I would like the user to be able to enter in the text and then the Cufon font to take over what they've written (or just have it typed in cufon font).

$(function() {
$('form.example input:text').magicpreview('mp_'); 
});

Cufon.replace('p#mp_trythis1');

An example here: http://twmorton.com/magicpreviewjquery/

Answer 1

Alright, a better example of what I need would be previewing a font, like at this website:

http://www.fontspace.com/mario-arturo/sahara

When you type in what you need, whatever script running the preview refreshes the preview to show you what you've typed.

Answer 2

Here is a simplified version (without magicpreview):

The html part:

<h1>Cufon Test</h1>
<input id="in" type="text">
<div id="out"><h1>Start typing ...</h1></div>

The javascript part:

Cufon.replace('h1');
$('#in').keyup(function(){
    $('#out').html('<h1>'+$(this).val()+'</h1>');
    Cufon.replace('#out h1');
});

​See live example here

EDIT: you can see two alternative versions here implemented as jQuery plugins.

• v1 updates @ 1000 ms after focus lost & only if dirty
• v2 updates @ 1000 ms after the last keyup

Answer 3

I want this comment to be to Dan Manastireau but its not letting me comment for some reason! What you suggested worked! The first suggestion worked, I was wondering why do the jQuery implementation? Is there a security or other reason why to do it the alternative jQuery way?