1,804 articles and 14,876 comments as of Saturday, May 14th, 2011

EndUserSharePoint has combined resources with NothingButSharePoint.com. You can now find End User (Mark Miller), Developer (Jeremy Thake) and IT Pro SharePoint content all in one place!

This site is a historical archive and is no longer being updated. Please update your favorites, bookmarks and RSS feeds.

Thursday, November 5, 2009

JQuery For Everyone: Live LoadTip

Comments: 39

This code is nothing new to the wonderful people who help support EndUserSharePoint by attending our online workshops. But if you haven’t had a chance to attend the online workshop, this example code replaces the AOP LoadTip example.

I mentioned in a previous post how event delegation, using jQuery’s live events, can create a listener waiting for an event no matter where it happens. By handling the event target, we can achieve the same results as the AOP version with more elegance.

<script type="text/javascript">
    if(typeof jQuery=="undefined"){
        var jQPath="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/";
        document.write("<script src='",jQPath,"jquery.min.js' type='text/javascript'><\/script>");
    }
</script>
<style type="text/css">
    #loadTip {
        background: #6F9DD9;
        color: #fff;
        border: 2px solid #6F9DD9;
        font-size: 10px;
        padding: 3px;
        width: 342px;
        display: none;
        position: absolute;
        text-align: right;
    }
    #tipContent {
        background: #fff;
        padding: 3px;
    }
</style>
<script type="text/javascript">
/*
 * Copyright (c) 2009 Paul Grenier (endusersharepoint.com)
 * Licensed under the MIT (MIT-LICENSE.txt)
 */
(function () {
    jQuery.fn.calcHTML = function () {
        var arrayList = $(this);
        arrayList = $.grep(arrayList, function (e, i) {
            return ($(e).text().match(/&lt\;.+?&gt\;|<.+?>/));
        });
        return $(arrayList).each(function (i, e) {
            $(e).html($(e).text().replace(/&lt;(.+?)&gt;/g, '<$1>'));
        });
    };
    var handleError = function () {
        return true;
    },
    createLoadTip = function () {
        var html = "<span>click to close </span>" +
            "<img style='vertical-align:text-top;' " +
            "src='/_layouts/images/menudark.gif' alt=''/>";
        $(document.createElement("div")).attr("id", "loadTip").html(html).appendTo("body");
        $(document.createElement("div")).attr("id", "tipContent").appendTo("#loadTip");
        $("#loadTip").click(function (e) {
            $("#loadTip").hide();
        });
    },
    defaults = {
        links:  "a[href*='DispForm.aspx']",	//tags that trigger a preview
        type:   "link",				//descriptive name sometimes used in cleanupCSS()
        key:    "a",                            //find the target url by this key element's attribute
        target: "",                             //specify the target
        suffix: "",				//appended to the target url
        delay:  500,				//delay in ms
        selector:   "table.ms-formtable:first",	//selector used on target page
        remove: "",				//selector(s) of removed elements from target page
        source: "",				//source parameter appended to urls in preview
        html:   "td[id='SPFieldCalculated']"	//fields needing re-rendering
    },
    cleanupCSS = function (p, o) {
        switch (o.type) {
        case "discussion":
            //nothing to do
            break;
        default:
            $("h3.ms-standardheader", p).css({"font-size": "1em"});
            $("td", p).removeAttr("width");
            $("td.ms-formbody[cellIndex='1']", p).css({width: "100%"});
        }
    },
    callback = function (event, p, o) {
        if (p.contents().length === 0) {
            return setTimeout(callback(event, p, o), 100);
        }
        $("#loadTip").show();
        var r = o.remove,
            h = o.html,
            a = event.target.href,
            x = event.pageX,
            winx = $(window).width(),
            y = event.pageY,
            winy = $(window).height(),
            ly = p.height(),
            lx = p.width();
        if (ly + y + 22 > winy) {
            y = y - ly - 22;
        }
        if (lx + x + 9 > winx) {
            x = x - lx - 9;
        }
        if (y < 0) {
            y = 0;
        }
        if (ly > winy) {
            $("#loadTip").css({"overflow-y": "auto", "height": winy});
        }
        if (r && r.length > 0) {
            $(r, p).remove();
        }
        if (h && h.length > 0) {
            $(h, p).calcHTML();
        }
        $("#loadTip").css({"top": y, "left": x});
    },
    fire_preview = function (e, p, o) {
        p.empty();
        p.load(o.target + o.suffix + " " + o.selector, function () {
            p.data("loadTip", o.target);
            cleanupCSS(p, o);
            callback(e, p, o);
        });
    },
    bind = function (p, options) {
        window.onerror = handleError;
        var o = $.extend({}, defaults, options);
        $(o.links).live("mouseover", function (event) {
            var elm = $(event.target);
            switch (o.key) {
            case "a":
				if (elm[0].tagName == "A") {
					o.target = elm.attr("href");
				} else {
					o.target = elm.parents("a:first").attr("href");
				}
                break;
            case "table":
                elm = elm.parents("table[ctxname]");
                o.target = "/" + elm.attr("dref").replace(/\s/g, "%20") +
                "/Forms/DispForm.aspx?ID=" + elm.attr("id");
                break;
            case "img":
                elm = elm.parents("a");
                o.target = elm.attr("href");
                break;
            default:
            //fall through to pass target override
            }
            $("#loadTip").css({"top": -1000, "left": -1000, "height": ""});
            if (loadTip.timer) {
                clearTimeout(loadTip.timer);
            }
            if (p.data("loadTip") === o.target) {
                return callback(event, p, o);
            }
            loadTip.timer = setTimeout(function () {
                fire_preview(event, p, o);
            }, o.delay);
            event.stopImmediatePropagation();
        });
        $(o.links).live("mouseout", function (event) {
            clearTimeout(loadTip.timer);
            event.stopImmediatePropagation();
        });
    };
    loadTip = function (options) {
        if ($("#loadTip").length === 0) {
            createLoadTip();
        }
        bind($("#tipContent"), options);
    };
}());
$(function(){
    loadTip();
    //loadTip({type: "wiki", links: "a[href*='.aspx']:has(img.ms-hidden)", key: "table"});
    //loadTip({type: "thumbnail", links: "a[href*='Forms/DispForm.aspx']", key: "img"});
    //loadTip({type: "person", links: "a[href*='userdisp.aspx']", suffix: "&Force=1"});
    //loadTip({type: "discussion", links: "a[href*='Flat.aspx']", selector: "table.ms-disc", remove: "[id^='ToggleQuotedText'], tr.ms-viewheadertr"});
    //loadTip({type: "excel document", links: "a[href$='.xls']:has(img.ms-hidden)", key: "table"});
    //loadTip({type: "excel document", links: "a[href$='.xlsx']:has(img.ms-hidden)", key: "table"});
    //loadTip({type: "word document", links: "a[href$='.doc']:has(img.ms-hidden)", key: "table"});
    //loadTip({type: "word document", links: "a[href$='.docx']:has(img.ms-hidden)", key: "table"});
    //loadTip({type: "powerpoint document", links: "a[href$='.ppt']:has(img.ms-hidden)", key: "table"});
    //loadTip({type: "powerpoint document", links: "a[href$='.pptx']:has(img.ms-hidden)", key: "table"});
});
</script>

I commented out several examples of “loatTip-able” links. By default, only the items pointing to a dispform.aspx page will be displayed. Keeping with the traditions of jQuery plugins, there are lots of options which can change the behavior of tip box.

View all entries in this series: PaulGrenier-JQuery for Everyone»

Entries in this series:

I recommend SharePoint resources daily on my twitter account here.

Posted by AutoSponge on Thursday, November 5, 2009 at 9:38 am
Filed under jquery · Tagged with grenier, jquery, live online, load tip, seminar, workshop

Please Join the Discussion

39 Responses to “JQuery For Everyone: Live LoadTip”

Robin says:

November 9, 2009 at 8:46 am

Paul,

The old version allowed one to popup a users details when the cursor was placed over a user name in the “assigned to” column. This made it convenient to view the “assigned to” users phone number, email and other details. This new version seems to be missing this function. Is that by design?

Reply
AutoSponge says:

November 9, 2009 at 12:53 pm

Robin,

Remove the comment (”//”) from the third commented example. It has type: person.

Reply
domdom says:

November 9, 2009 at 12:43 pm

I tried this script on a link list and it didn’t work. Apparently the column linked to the DisplayForm is shown as an image which sits above the A itself. I had to add the following if code to the binding fucntion:
```
case "a":
  o.target = elm.attr("href");
  if (o.target == ""){
    elm = elm.parents("a");
    o.target = elm.attr("href");
  }
  break;
```
Otherwise it works beautifully.
Thanks again for all the good work!
Dominique

Reply
Paul says:

November 9, 2009 at 3:43 pm

Hello Paul,

This is great. I’m getting strange behavior on the Month view for events that span multiple days as they are not popping up when hovering over. On single day view and weekly view the multiple day events work fine.

Single day events work fine on any view.

Can you duplicate this? Any ideas?

Reply
Ravi says:

November 11, 2009 at 6:23 pm

Hi,
I have a sharepoint page in which i have added the calendar view to a webpart. I also have CEWP below that contains this script. I am able to see only the url in the popup. It is not showing Title, location, start time etc. What i am missing. Correct me please…..

Reply
AutoSponge says:

November 12, 2009 at 10:00 am

@Paul,

I made a slight change to the code that should now work with multi-day events. You’ll need to copy/paste the new version.

@Ravi,

This sounds like a custom page. CSS changes, or customized DispForm.aspx can cause things not to to work. I’ve only tested this with default pages and theme.

Reply
Paul says:

November 13, 2009 at 2:29 pm

Thank you – works perfectly!

Reply
Ravi says:

November 13, 2009 at 3:18 pm

I found the problem in webpart page. The actual jquery works based on [[ if(!group)group="#MSO_ContentTable"; ]] MSO_ContentTable as main content. If you put this in webpart[custom] page, it will not work. Get the view source of your page and find out the main content id[in my case it is “ctl00_MSO_ContentDiv”. It is working perfectly.

Thank you very much.

Reply
Timmy says:

November 19, 2009 at 1:12 pm

I have tried inserting the above code in CEWP on the page with my list items, and it is not working (no pop-up box). Do I need to add this code to the “last version” of LoadTip to make this work?

Reply
Alex says:

November 19, 2009 at 2:52 pm

Paul, you have amazing work! Thanks so much!
I have implemented the tooltip in a CEWP to show list items in several webparts on my “dashboard” page and it works flawlessly, except for 2 scenarios:

1. The tooltip pops up BEHIND some javascript or flash components. I have tried to add in the z-index in the css with no luck.

2. I have two columns I would like to show: title and message. Sometimes the messsage has long links in it and a lot of text and people usually copy and paste the text from an email which results in weird text. The pop-up in this case become huge (literally takes up the whole window) and due to issue 1, can barely be seen at times.

Your help is greatly appreciated!
Thanks again!
Alex

Reply
SteveC says:

November 24, 2009 at 4:04 pm

I have a puzzle on the “remove” option
I have a document library with 3 columns, “Title, Name, and URL” – which is a hyperlink.

remove: “td[id!='SPFieldURL']” does what I want — it just shows a URL in the hover form. (It oddly doesn’t show the field name though).

However, remove: “td[id='SPFieldTitle'],td[id='SPFieldName']” does not behanve as expected. It shows ALL fields, and including all 3 titles, and just “whites out” the content od the removed items.

Have you tried this?

Reply
SteveC says:

November 24, 2009 at 4:11 pm

Actaully, now that I read the above post I’m starting to understand how this works — the behavior makes sense.

So the question becomes: Is there any way to select entire Fields from the DispForm and choose not to show them?

Reply
SteveC says:

November 24, 2009 at 6:51 pm

This syntax will remove specific unwanted rows : I’m sure there is a more elegant way of doing this as this is a manual process.

remove: “tr:eq(0),tr:eq(1),tr:eq(2),tr:eq(3),tr:eq(4),tr:eq(5),tr:eq(6),tr:eq(7)”

The above removes numbered occurences of a – entire row from the DispForm.aspx file. Only useful if you use this in a specific document library that you know which columns you don’t want to display.

Reply
Jason says:

November 25, 2009 at 8:36 am

Requote:
I have tried inserting the above code in CEWP on the page with my list items, and it is not working (no pop-up box). Do I need to add this code to the “last version” of LoadTip to make this work?

Am I missing something here (obviously). How dod I get this to work?

Reply
SteveC says:

November 25, 2009 at 10:14 am

To get it to work I had to enable (uncomment) the lines at the bottom of the code. There was no “default” tooltip. So, if you want it to work on a Microsoft Word .doc or .docx, uncomment those lines.

Reply
David Phillips says:

November 27, 2009 at 7:12 am

(For ‘Field’ read ‘Column’)Great piece of coding and I love the enhancement in this version that gives the ability to remove field data from the display which I’ve used to hide around 8 data fields. However the ToolTip height is not being adjusted to take account of the hidden data and there is a lot of blue space at the bottom. Is it possible to set the height to adjust dynamically based on the fields displayed?

Reply
David Phillips says:

November 27, 2009 at 7:15 am

Ignore my last email about ‘removing’ data displayed and height adjustment, must have been a quirk when viewing still in Edit mode. Once saved and published it works perfectly, thanks again.

David

Reply
Timmy says:

December 1, 2009 at 10:49 am

Does this work on a List? I am unable to get this to work by entering in CEWP.

Reply
AutoSponge says:

December 1, 2009 at 1:10 pm

@Timmy,

Yes, it was primarily designed for a list. Make sure your list items have links to the default DispForm.aspx page. If you use something else, you’ll need to adjust the script/configuration as needed.

Reply
Mylene says:

December 10, 2009 at 1:02 pm

I’m using Internet Explorer 7 to view this site but cannot view the code due to page errors. Can you email me the code please. It is exactly what I’m looking for to use to preview data in a calendar event.
Thank You :-)

Reply
- EndUserSharePoint says:
  
  December 10, 2009 at 1:05 pm
  
  Mylene – This is not a page error. We have just migrated the site to a new server and have not finished updating the code content. Give me five minutes and the code in this article will be available. — Mark
  
  Reply
Ron says:

December 28, 2009 at 11:03 am

Hi Paul,
I have one question which is not related to above post but i don’t know how to contact you so i am going to ask here

How can i traverse HTML Comments in DOM using Jquery ?do you have any idea on this

Thanks

Reply
AutoSponge says:

December 28, 2009 at 11:58 am

Ron,

Normally comments are not parsed, so the only method I can think of involves using jQuery’s AJAX methods to call the page as a text file then use regex filters to find the comments in the text.

Reply
Ron says:

December 28, 2009 at 12:30 pm

Thanks Paul,
I thought there should be method like in JavaScript we can use get ElementbyTagName(”!”) .

Thanks for Reply

Reply

AutoSponge

says:

December 28, 2009 at 2:17 pm

I don’t know if this is the most efficient method but it works and seems to do the job quickly (should work in all browsers):

function findComments(node){
	var node = node ? node : this.document,
		arr = node.childNodes,
		i = arr.length,
		output = [], input = [], k;

	while (i--) {
		if (arr[i].nodeType === 8) {
			output.push(arr[i]);
		} else if (arr[i].hasChildNodes()) {
			input = findComments(arr[i]);
			k = input.length;
			while(k--){
				output.push(input[k]);
			}
		}
	}

	return output;
}

findComments();

Ron says:

December 28, 2009 at 2:40 pm

Thanks Paul

Reply
Ron says:

January 7, 2010 at 3:27 pm

Hi Paul;
I was Trying to Set Value in People Picker Control with Current Logged in User in sharepoint.
So far I have done following Jquery which give me Current logged in User but i cant set it to People Picker.

Here is Jquery
```
$(document).ready(function() {
     var CurrentUser = $("a:contains('Welcome')").text();
     var User = CurrentUser.substr(8,CurrentUser.length);
     $("textarea[title='People Picker']").text(User);
});
```
I know i doing something silly here thats why its not working can you please suggest me

Thanks

Reply
AutoSponge says:

January 8, 2010 at 8:45 am

@Ron,

See my examples of using the people picker field http://www.endusersharepoint.com/2009/04/20/jquery-for-everyone-pre-populate-form-fields/ (line 53) and http://spff.codeplex.com/. There are really two fields, a textarea and a div.
```
$("textarea[title='People Picker']")
$("div[title='People Picker']")
```
For the textarea you want to update the val() or .value. For the div, you want to update the text() or html().

Reply
Gus says:

February 9, 2010 at 7:10 am

Hi, I originally asked this question in the wrong post so I’ll reiterate here. We’re using the above script but need to set its target to a different support file, lets say DispForm2.aspx. Changing or hardcoding the target doesnt appear to be working, it still fetches the value of the old DispForm file. I’ve checked the target attribute in the fire_preview function and it does point to the new file we specified, however it doesnt work.

Any clue as to why? I did take your suggestion in your reply, but it did not work sadly.

Reply
AutoSponge says:

February 9, 2010 at 7:23 am

@Gus,

In the bind function (line 117), target is selected from the DOM based on the target type (SharePoint puts the link in different places). You want this to be dynamic so it gets the right ID value. The target option you can pass is an override, it will not pick the link up dynamically but always use the hardcoded override (think static page).

You probably just need to change links option to a[href*='DispForm2.aspx'] and if you customized that form, you’ll need to change the selector as well (targets the area of the page to be previewed).

Reply
Gus says:

February 10, 2010 at 7:29 am

Thanks for your reply, I’ve managed to solve the problem. It was a combination of issues, illegal characters in the URL string combined with the fact that overriding the target attribute using the function paramater doesn’t work, because a link is always issued a value in your if clause, no matter what the value sent in was or what the default target was.

Anyway, keep up your good work.

Reply
Jim says:

March 9, 2010 at 6:14 am

Is there a way to get the popup window to close without clicking on it? maybe a timer

Reply
- Tom says:
  
  February 14, 2011 at 12:21 pm
  
  Do you ever find out how to do this?
  
  Reply
Joel says:

April 23, 2010 at 8:46 am

1st of all thank you for this script.

I have a problem with this one, I have document library with folder, it works perfectly when you put a file at the root folder of the document library but if you put the file in another level the script doesn’t work…
There’s a solution with that ?

Thank you very much.

Reply
Marc S says:

May 12, 2010 at 4:50 pm

Hi AutoSponge,

Thanks for providing this useful script.

I’m attempting to use it to display the attached items on a list item and I’m getting some odd behaviour. When I define parameters to remove rows from the DispForm like SteveC in a previous post ( “tr:eq(0),tr:eq(2)”) the first time the LoadTip is displayed correctly. If I then close the tip and hover over the link again the LoadTip displays incorrectly.
(IE the list has five columns and I am displaying column2, column4, and column5 in the LoadTip, on the second display of LoadTip only column4 is displayed, after that nothing is displayed).

Is there a better way to define the selectors of removed rows from the target page?

Cheers,
Marc S

Reply
Christy says:

June 15, 2010 at 5:32 pm

Is it possible to point the tip to come up on a “name” not “title?

Reply
Tony Parker says:

August 10, 2010 at 8:35 am

Hi, love the solution but am struggling with one problem.

If I hover over my loadtip url at the top of the page it appears as it should at the top of the page but the further down the page I go it starts to appear next to my mouse icon where as I need it to start at the top of the page. Is there a way to control this behaviour?

Reply
- Michael says:
  
  September 6, 2010 at 3:25 am
  
  Hello Paul, hello all,
  run into the same problem like Mark C. does. Repetetive hovering over the same list element decreases the number of shown informations, ends up in an empty box.
  
  Refresh of webpage (F5) fix this for the next view, then again rows are reduced.
  
  I am only interested to display one row, so I can get the informations about attachments (mainly name/title of attachment). This is the last row in my view.
  
  So iI would aks for two tipps, if possible:
  
  a) Can you show me how I can only address the Attachment part of my list?
  b) Or can can show me to touch only some elements out of the list (remove all, add #1,#5,#x)?
  
  Finally: Thanks for the script as is, I always have learned from this (and sometimes I understand more of the code behind as with this example)
  
  Thanks a lot for your work!
  
  Kind regards
  Michael
  
  Reply
Ben says:

September 21, 2010 at 1:07 pm

Hi there,
Great bit of code that I can really see being useful on my current project.

A question for the people here — has anyone got this working once a regular list has been converted to a Data View Web Part in SPD?

I have found that the tooltips do not appear and that a “Stack overflow at line 30″ error is intermittently thrown.

Anyone else discovered a workaround for this?

Many thanks
Ben

Reply