Multi line text field in list view: Shorten text and add hovereffect to view full text

As always we start like this:
Create a document library to hold your scripts (or a folder on the root created in SharePoint Designer). In this example i have made a document library with a relative URL of “/test/English/Javascript” (a sub site named “test” with a sub site named “English” with a document library named “Javascript”):

The jQuery-library is found here. The pictures and the sourcecode refers to jquery-1.3.2.min. If you download another version, be sure to update the script reference in the sourcecode.
The code for the file “LimitMultilineTextInView.js” is found below.
This will work in standard views and in grouped views, but has not been adapted to work with “Boxed” views.
Add a CEWP below the list view and add this code:

1	<script type="text/javascript" src="/test/English/Javascript/jquery-1.3.2.min.js"></script>

2	<script type="text/javascript" src="/test/English/Javascript/LimitMultilineTextInView.js"></script>

3	<script type="text/javascript">

4	// Shows the first 100 characters in the text

5	limitMultiLineText('MultilineText',100);

6	// Shows the text 'Hover to see content' in stead of the actual text

7	//limitMultiLineText('MultilineText','','Hover to see content');

8

</script>

Parameters explained:

• FieldInternalName: The “FieldInternalName” of the field containing the multi line text. Use DisplayName if the multiline field is of type rich or enhanced rich text. (how to find the FieldInternalName)
• initialLength: Limit the initial displayed text to this number of characters. This argument is overridden by the next, if supplied.
• inPlaceHoverText: If set, this argument will override the previous, and add a “inPlace” text that can be hovered to view the full text.

When hovered there are a delay for 650 milliseconds to prevent flickering when you move the mouse rapidly over multiple cells.
The code for the file “LimitMultilineTextInView.js” looks like this:

01	/* Limit the length of the text in a multi line text field in a list view

02	* Created by Alexander Bautz

03	* alexander.bautz@gmail.com

04	* http://sharepointjavascript.wordpress.com

05

* v1.0

06	* LastMod: 21.02.2010

07	* ---------------------------------------------

08	* Requirements:

09	Include reference to jquery - http://jquery.com

10	* ---------------------------------------------

11

*

12	Call from a CEWP below list view like this:

13	<script type="text/javascript" src="/test/English/Javascript/jquery-1.3.2.min.js"></script>

14	<script type="text/javascript" src="/test/English/Javascript/LimitMultilineTextInView.js"></script>

15	<script type="text/javascript">

16	// Shows the first 100 characters in the text

17	limitMultiLineText('MultilineText',100);

18	// Shows the text 'Hover to see content' in stead of the actual text

19	//limitMultiLineText('MultilineText','','Hover to see content');

20

</script>

21

*/

22

23	function limitMultiLineText(FieldInternalName,initialLength,inPlaceHoverText){

24	if(typeof(FieldInternalName)!='undefined'){

25	intName = FieldInternalName;

26	initLength = initialLength;

27	inPlaceText = inPlaceHoverText;

28	$(".ms-viewheadertr th.ms-vh2-nograd").each(function(){

29	if($(this).text()==intName){

30	colIndex = $(this).attr('cellIndex');

31

}

32

});

33

}

34

35	$("table.ms-listviewtable tbody:not([id^='aggr']) tr:has(td.ms-vb2) >td[cellIndex=" + colIndex + "][beenthere!=1]").each(function(){

36	$(this).attr('beenthere',1);

37	var thisTd = $(this);

38	if(inPlaceText!='' && inPlaceText!=undefined){

39	var teaserText = inPlaceText;

40

}else{

41	var teaserText = thisTd.text().substring(0,initLength);

42

}

43	thisTd.wrapInner("<div style='background-color:white;border:thin silver ridge;padding:4px;display:none'></div>")

44	.prepend("<span style='cursor:default'>"+teaserText+"...</span>")

45	.hover(function(){

46	thisTd.addClass('dummyHoverClass ms-dialogSelectedRow');

47	setTimeout(function(){

48	if(thisTd.hasClass('dummyHoverClass')){

49	var offset = thisTd.offset();

50	var tdWidth = thisTd.width();

51	thisTd.find('div:first')

52	.css({'position':'absolute',

53	'top':offset.top,

54	'left':offset.left,

55	'width':tdWidth})

56	.fadeIn(250)

57

.prev()

58

.hide();

59

}

60

},650);

61	},function(){

62	if(thisTd.hasClass('dummyHoverClass')){

63	thisTd.removeClass('dummyHoverClass ms-dialogSelectedRow');

64	thisTd.find('div:first').stop(true, true).fadeOut(100).prev().show();

65

}

66

});

67

});

68

}

69

70	// Attaches a call to the function "limitMultiLineText()" to the "expand grouped elements function" for it to function in grouped listview's

71	function ExpGroupRenderData(htmlToRender, groupName, isLoaded){

72	var tbody=document.getElementById("tbod"+groupName+"_");

73	var wrapDiv=document.createElement("DIV");

74	wrapDiv.innerHTML="<TABLE><TBODY id=\"tbod"+groupName+"_\" isLoaded=\""+isLoaded+"\">"+htmlToRender+"</TBODY></TABLE>";

75	tbody.parentNode.replaceChild(wrapDiv.firstChild.firstChild,tbody);

76	limitMultiLineText();

77

}

Save the file as “LimitMultilineTextInView.js”, mind the file extension, and upload to the scriptlibrary as shown above.