Shorten text and add hovereffect to view full text

Shorten text and add hovereffect to view full text

limit the number of characters in the multi line column  to show less characters: preferably one line of text or text up until some splitting character?

We had a small issue today i.e. in a document library i have all items with multiple columns. One of these columns is of the multi lines of text. When i started editing items, my multiline column cell starts growing in size, in fact I can only see one item at a time. I need to scroll down lo look for other items. Now imagine if we are having lot of items, then it would be difficult to find out the exact item. then i started doing some research and have made some change to document library and then i got the result. I want to see

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

 initially i’ve created a new document library

and then i need to download the jQuery-library, which i have done it from www.jquery.com

jQuery is a new kind of JavaScript Library which is fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

we need to save the below code in note pad and save it as .js extension, the code is

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

02     * Created by SharePointPlanetTeam

03     * Sharepointplanet@gmail.com

04     * http://sharepointplanet.blogspot.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, and now the check the result when we move our pointer on to the document library we can see the complete content

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.