jQuery implementation of align=char


/ Published in: jQuery
Save to your folder(s)

This is probably buggy and certainly not the most efficient way to do it.


Copy this code and paste it in your HTML
  1. $('table').ready(function(){
  2.  
  3.  
  4. $(this).find('col').each(function(){
  5.  
  6. if(!$(this).attr('align')=='char')
  7. return false;
  8.  
  9. align_by = $(this).attr('char');
  10.  
  11. before_width = 0;
  12. after_width = 0;
  13. char_width = 0;
  14.  
  15. eq = $(this).index();
  16.  
  17. table = $(this).closest('table');
  18. table.find('tr').each(function(){
  19. $(this).find('td').eq(eq).each(function(){
  20.  
  21. $(this).css('position','relative');
  22. $(this).css('white-space','nowrap');
  23.  
  24. html = $(this).html();
  25. html = html.split(align_by);
  26. if(html.length>1){
  27. $(this).html('<span class="before_char">'+html[0]+'</span><span class="char">.</span><span class="after_char">'+html[1]+'</span>')
  28. char = $(this).find('.char');
  29. left = char.position().left;
  30. width = char.width();
  31. right = $(this).width() - left - width;
  32.  
  33.  
  34. before_width = Math.max(left, before_width);
  35. after_width = Math.max(right,after_width);
  36. char_width = Math.max(char_width, width);
  37. }
  38.  
  39. })
  40.  
  41. $(this).find('td').eq(eq).each(function(){
  42. align = $(this).css('text-align');
  43. if(align=='left'){
  44.  
  45. $(this).find('.before_char').css('width',before_width+'px').css('display','inline-block').css('text-align','right');
  46.  
  47. }else if(align=='right') {
  48.  
  49. $(this).find('.after_char').css('width',after_width+'px').css('display','inline-block').css('text-align','left');
  50.  
  51. } else {
  52.  
  53.  
  54. if(before_width > after_width){
  55. $(this).find('.before_char').css('width',before_width+'px').css('display','inline-block').css('text-align','right');
  56. $(this).css('text-align','left');
  57. } else {
  58.  
  59. $(this).find('.after_char').css('width',after_width+'px').css('display','inline-block').css('text-align','left');
  60. $(this).css('text-align','right');
  61. }
  62. }
  63.  
  64. })
  65. })
  66.  
  67. })
  68.  
  69. })

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.