Advanced Search

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.

Expand | Embed | Plain Text

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.