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

Question

I'm trying to use Jquery/Javascript to mimic a broken typewriter font (since I could not find one). But I want to make it random which letter gets broken. I was able to split the string of the id that I wanted and use a bit of code I found to get a random number between 0 and the total length of the string. What I'm having problem with now is doing something with that specific character. I want to push it down or up a few pixels. I was trying to give it a class so I could add some margin or padding, but it doesn't work. So I'm stuck where I am now.

here's the page, I'm trying to do it to the word "ABOUT":
http://www.franciscog.com/bs/about.php

here's 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 ensure that the matched character is not a space character, and added a little 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/