Question

I want to keep the element the same size AND alternate text within the element. The text and alternate text can be any length. I currently truncate the alternate text by guessing at the length the text will be in the element (but don’t account for the original text possibly having multiple rows). It sorta works ok if everything is a single line and the user doesn’t resize the window. $(window).resize(findCELLSIZE); fires too often (everytime I replace the element), so I’m not using that to recalculate the width and height.

I have HTML (simlified) as:

<table id='main'>
   <thead>
     <th width='100'>first</th>
     <th>second</th>
     <th width='100'>third</th>
   </thead>
   <tbody>
     <tr>
       <td>Blah</td>
       <td class='special' data-text="<span class='highlight'>different BLAH1</span>,.,<span class='highlight2'>short BLAH2</span>">Blah Blah</td>
       <td>Blah</td>
   </tbody>
</table>

with simplified jQuery/javascript as:

var DESCRIPTIONheight = [];
var DESCRIPTIONwidth = 0;
function findCELLSIZE () {
   $("#main tbody tr").each(function() { 
       var thatwidth = $(this).find('td:nth-child(2)').width();
       if (thatwidth >= DESCRIPTIONwidth) { DESCRIPTIONwidth = thatwidth+1; }
   });
   $(".special").each(function () {
       $(this).closest('tr').height('');
       DESCRIPTIONheight.push($(this).height()+1);
   });
}
findCELLSIZE();
//$(window).resize(findCELLSIZE);
function flashEXPRESS() {
    $(".special").each(function (index) {
      var next = $(this).data('text').split(/,\.,/)[0];
      var temp = '';
      if (next != $(this).data('text')) {
         temp = $(this).data('text').split(/^(.+?),\.,/)[0] +',.,';
      }
      temp = temp + $(this).html();
      var mytextlength = next.match(/>(.*?)<\/span>$/i);
      if(mytextlength) {
         if (mytextlength[1].length*7 > DESCRIPTIONwidth) { 
           mytextlength[1] = mytextlength[1].substring(0,Math.floor(DESCRIPTIONwidth/7));
           next = next.replace(/>(.*?)<\/span>$/i,'>'+mytextlength[1]+'</span>');
         }
      }
      $(this).html(next);
      $(this).width(DESCRIPTIONwidth);
      $(this).data('text', temp);
      $(this).closest('tr').height(DESCRIPTIONheight[index]);
   });
}
var flashEXPRESSid = 0;
flashEXPRESSid = setInterval(flashEXPRESS,1000);

Here’s a fiddle My code runs in IE8, but not Firefox 15 (there must be an issue with jQuery writting html5 data attributes)

Answer 1

None of the CSS suggestions worked completely (the actual table is more complicated: it could be the table, IE8, or both). The solution is to not change the element and instead make a element with the same size, position with a greater z-index. Updated Fiddle… To be browser neutral, I’m going to have to figure out why jQuery position and size are not normalized across different browsers…