Selezionare un carattere specifico in una stringa e l'offset è (visivamente) con Jquery

Question

Sto cercando di utilizzare jQuery/Javascript per simulare un font macchina da scrivere rotta (dato che non riuscivo a trovare uno). Ma voglio rendere casuale quale lettera viene infranta. Sono stato in grado di dividere la stringa dell'ID che volevo e utilizzare un po 'di codice che ho trovato per ottenere un numero casuale compreso tra 0 e la lunghezza totale della stringa. Quello a cui sto avendo problemi ora sta facendo qualcosa con quel personaggio specifico. Voglio spingerlo verso il basso o su alcuni pixel. Stavo cercando di dargli una lezione in modo da poter aggiungere margine o riempimento, ma non funziona. Quindi sono bloccato dove sono ora.

Ecco la pagina, sto cercando di farlo per la parola "INFO":
http://www.franciscog.com/bs/about.php

Ecco lo 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: aggiornato per garantire che il abbinato carattere non è un carattere di spazio, e ha aggiunto un po 'di stile suggerito da @abelito.

ne dite di questo: 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);​ 

Aggiornamento: Se si desidera applicare a diverse: http://jsfiddle.net/cgXa3/5/

Answer 2

mi piace la risposta di Patrick, ma in alternativa avrei alterare la stessa lettera tutto il testo. E magari ruotarlo un pochino (anche se questo non funzionerà in IE). Ho fatto a demo che ho biforcato fuori di Patrick.

CSS

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

Codice

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>'); 
}); 
}); 

---

Update: Questo è il codice necessario per applicare a più tag 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('')); 
});