Sélectionnez un caractère spécifique dans une chaîne et le décaler (visuellement) avec Jquery

Question

J'essaie d'utiliser Jquery/Javascript pour imiter une police de machine à écrire cassée (puisque je ne pouvais pas en trouver un). Mais je veux rendre aléatoire quelle lettre est brisée. J'ai été capable de diviser la chaîne de l'identifiant que je voulais et d'utiliser un peu de code que j'ai trouvé pour obtenir un nombre aléatoire entre 0 et la longueur totale de la chaîne. Ce que j'ai un problème avec maintenant, c'est de faire quelque chose avec ce personnage spécifique. Je veux le pousser vers le bas ou vers le haut de quelques pixels. J'essayais de lui donner une classe afin que je puisse ajouter une marge ou un rembourrage, mais ça ne marche pas. Donc je suis coincé là où je suis maintenant.

Voici la page, je suis en train de le faire au mot "sur":
http://www.franciscog.com/bs/about.php

est ici le script:

<script type="text/javascript"> 

     function randomXToY(minVal,maxVal,floatVal) 
      { 
       var randVal = minVal+(Math.random()*(maxVal-minVal)); 
       return typeof floatVal=='undefined'?Math.round(randVal):randVal.toFixed(floatVal); 
      } 


     var str = $('#typehead').text(); 
       var strcnt = str.length; 
     var exploded = str.split(''); 
     var rdmltr =randomXToY(0,strcnt); 
     var theLetter = exploded[rdmltr]; 
     theLetter.addClass("newClass"); 
     var toffset = $('.newClass').offset(); 
     alert(toffset.left + "," + toffset.top); 

    </script> 

Answer 1

EDIT: mis à jour pour que la correspondance caractère n'est pas un caractère espace, et a ajouté un petit style suggéré par @abelito.

Que diriez-vous ceci: http://jsfiddle.net/cgXa3/4/

function randomXToY(minVal,maxVal,floatVal){ 
    var randVal = minVal+(Math.random()*(maxVal-minVal)); 
    return typeof floatVal=='undefined'?Math.round(randVal):randVal.toFixed(floatVal); 
} 


var exploded = $('#typehead').text().split(''); 
var rdmltr = randomXToY(0,exploded.length); 

    // Make sure we don't get a space character 
while(exploded[rdmltr] == ' ') { 
    rdmltr = randomXToY(0,exploded.length); 
} 
    // Wrap the letter with a span that has the newClass 
    // and update it in the array 
exploded[rdmltr] = '<span class="newClass">' + exploded[rdmltr] + '</span>'; 

    // Update the content 
$('#typehead').html(exploded.join('')); 
var toffset = $('.newClass').offset(); 
alert(toffset.left + "," + toffset.top);​ 

Mise à jour: Si vous souhaitez appliquer à plusieurs: http://jsfiddle.net/cgXa3/5/

Answer 2

J'aime la réponse de Patrick, mais comme une alternative je modifier la même lettre tout au long le texte. Et peut-être tourner un peu aussi (même si cela ne fonctionnera pas dans IE). J'ai fait a demo que j'ai bifurqué de Patrick.

CSS

.newClass { 
left: 0px; 
top: -1px; 
color: red; 
position:relative; 
-webkit-transform: rotate(-5deg); 
-moz-transform: rotate(-5deg); 
} 

code

function randomLetter(cased){ 
// case = true for uppercase, false for lowercase 
var base = (cased) ? 65 : 97; 
// convert HTML escape code into a letter 
var rand = $('<span>&#' + parseInt(base+(Math.random()*25),10) + ';</span>'); 
return rand.text(); 
}; 

$(document).ready(function(){ 
var ltr = randomLetter(false); 
var reg = new RegExp(ltr, 'g'); 
$('#typehead').html(function(i,html){ 
    return html.replace(reg, '<span class="newClass">' + ltr + '</span>'); 
}); 
}); 

---

Mise à jour: Voici le code nécessaire pour appliquer à plusieurs balises h1 (updated demo):

function randomXToY(minVal,maxVal,floatVal){ 
var randVal = minVal+(Math.random()*(maxVal-minVal)); 
return typeof floatVal=='undefined'?Math.round(randVal):randVal.toFixed(floatVal); 
} 

$('.typehead').each(function() {     
//access the text and characters within the tag with the id typehead 
var exploded = $(this).text().split(''); 
var rdmltr = randomXToY(0,exploded.length); 

// Make sure we don't get a space character or undefined 
while(exploded[rdmltr] == ' ' || exploded[rdmltr] == undefined) { 
    rdmltr = randomXToY(0,exploded.length); 
} 

// Wrap the letter with a span that has the new class brokenType 
// and update it in the array 
exploded[rdmltr] = '<span class="brokenType">' + exploded[rdmltr] + '</span>'; 

// Update the content 
$(this).html(exploded.join('')); 
});