Javascript/jQuery function yields undefined in <IE8 -

a short while asked question here how calculate when heading longer 1 line within given container, , subsequently wrap each of these lines in <span>:

use javascript/jquery determine heading breaks next line?

i chose answer worked great me, @ least until checked in ie7 , ie6, in headings handled script rendered

"undefinedundefinedundefinedundefinedundefinedundefined[...]"

on page. i'm not javascript person (that's why asked such question in first place), it's tough me figure out problem is. assumed undefined variable or something, can't seem grasp it.

can help?

i'll repeat code here, please refer link above context:

$(function(){   $h = $('.fixed').find('h3');   $h.each(function(i,e){     var txt = $(e).text();     $th = $('<h3 />').prependto($(e).parent());     var lh = $(e).text('x').height();     $(e).text('');     while (txt.length > 0) {         $th.text($th.text() + txt[0]);         txt = txt.slice(1);         if (($th.height() > lh) || (txt.length <= 0)) {             var shc = $th.text().split(' ');             var ph = shc.slice(0,-1).join(' ')+' ';             if (txt.length <= 0) { ph += shc.pop(); }             $('<span />').text(ph).appendto($(e));             $th.text(shc.pop());         }     }     $th.remove();   }) }); 

you need change

$th.text($th.text() + txt[0]); 

to

$th.text($th.text() + txt.charat(0)); 

ie<8 doesn't accept string positions through array indexes ;)

the styling doesn't work, that'll css issue couldn't fix before leaving. wrapped in spans :)