Select a specific character in a string and offset it (visually) with jQuery

Question

I am trying to use jQuery / Javascript to simulate a broken typewriter font (since I could not find it). But I want to make it random what letter breaks. I was able to split the identifier string I wanted and use some code that I found to get a random number between 0 and the total length of the string. I now have a problem with something with this particular character. I want to raise it or a little by a few pixels. I tried to give it a class, so I could add some stock or addition, but that will not work. So I'm stuck where I am now.

here is the page I am trying to do this with the word "O":
http://www.franciscog.com/bs/about.php

here is the 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: Updated to make sure the matching character is not a space character, and added a bit of the style suggested by @abelito .

How about this: 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);​ 

Update: If you want to apply it to several: http://jsfiddle.net/cgXa3/5/

Answer 2

I like Patrick's answer, but as an alternative, I would change the same letter in the text. And maybe rotate it a bit too (although this will not work in IE). I did a demonstration that I distributed with Patrick.

CSS

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

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

---

Update: this is the code that needs to be applied to multiple h1 tags ( 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('')); });