SharePoint and jQuery - Get the Authenticated User's Name and Modify Content Client-Side

Getting the user's name from a SharePoint page and handing off to some client-side code proved messier than I had hoped for.  Part of the problem is that our farm runs on SSL and IE likes to throw the error message when some resources are secure and others are not and the common solution to this (using jquery.SPServices) was falling prone to that error.  Instead I worked around it so we could serve up a custom control on the intranet for someone's 50th birthday and manage it without audiencing controls.

It requires jQuery and the control that contains the username was not always assigned the same ID though it has the same AccessKey attribute so we made do with what we had.

Since this elegant method did not work:

$(document).ready(function() {
	alert($().SPServices.SPGetCurrentUser());
});

we instead went with the following (note that this includes the resulting action). If you are not in an HTTPS environment go with the SPServices option...

<script type="text/javascript">
	$(document).ready(function() {
		var str = '';
		var strContainer = '';
		
		// find the container that contains the user's name (not always the same...)
		if($('#zz14_Menu').attr("accesskey") == 'W') {strContainer = 'zz14_Menu';}
		if($('#zz15_Menu').attr("accesskey") == 'W') {strContainer = 'zz15_Menu';}
		if($('#zz16_Menu').attr("accesskey") == 'W') {strContainer = 'zz16_Menu';}
		if($('#zz17_Menu').attr("accesskey") == 'W') {strContainer = 'zz17_Menu';}
		
		var str = $('#' + strContainer).find("span").text();

		// date driven
		var d = new Date();
		var n = d.getDate();
		if(n==26) // only show on the 26th...
		{
			if(str == 'Jane User')
			{
				$('#mycontrol').attr('src', 'https://server/Rotator/alternative.htm');
			}
		}
	});
</script>

SharePoint Popup Contextual Images

Also known as the 'hover over for screenshot' functionality.  This is a nice jquery driven code snippet that will take any link on your SharePoint page that has an image as its url and allow the user to simply hover over the link to see the image.

This has come in handy for providing contextual help in the form of screenshots right in with content.  A dead simple implementation might look like the following with a hyperlink column in your list and that being the only element in the view.

Yielding this type of thing when you hover over a link on your page:

Otherwise this just requires a reference to your local jquery file (or maybe not local, do what you want cowboy).

<script type="text/javascript" src="jquery.min.js"></script></span></div>
<script type="text/javascript"></span></div>
<br /></span></div>
function imagePreview(){</span></div>
arrOfImageTypes = ['jpg','jpeg','gif','png'];</span></div>
 $("table.ms-listviewtable td.ms-vb2 a").hover(function(e){</span></div>
 var href = this.href;</span></div>
 var img = href.substring(href.lastIndexOf('.')+1).toLowerCase();</span></div>
 if(href.indexOf('http')==0 && $.inArray(img,arrOfImageTypes)>-1){</span></div>
    $("body").append("<img id='preview' src='"+ this.href +"' alt='Image preview' />");</span></div>
 }</span></div>
 var obj = $("#preview");</span></div>
 var offset = $(this).offset();</span></div>
 var winHeight = $(window).height();</span></div>
 var winWidth = $(window).width();</span></div>
 var scrollLeft = $(window).scrollLeft();</span></div>
 var scrollTop = $(window).scrollTop();</span></div>
 var objHeight = obj.outerHeight();</span></div>
 var objWidth = obj.width()+15;</span></div>
 if(((winWidth+scrollLeft)-offset.left)<objWidth){</span></div>
 offset.left=((winWidth+scrollLeft)-objWidth);</span></div>
 }</span></div>
 var maxHeight = (winHeight+scrollTop)-offset.top;</span></div>
 if(objHeight>maxHeight){</span></div>
 if(offset.top-scrollTop>objHeight){</span></div>
 offset.top=offset.top-objHeight-20;</span></div>
 }</span></div>
 height = (objHeight<winHeight)?objHeight:winHeight;</span></div>
 }</span></div>
 obj.css({"position":"absolute","top":(offset.top+20)+"px","left":(offset.left+20),"border":"1px solid black"})</span></div>
 .fadeIn("fast");</span></div>
 },</span></div>
 function(){</span></div>
 $("#preview").remove();</span></div>
 });</span></div>
};</span></div>
<br /></span></div>
// Call the script on page load</span></div>
$(document).ready(function(){</span></div>
 imagePreview();</span></div>
});</span></div>
</script></span></div>

Google Stock Ticker for SharePoint

We looked at a number of controls to add a stock ticker to our intranet after it was requested that we do so. We looked at a few paid versions, considered building our own and in the end settled for using Google's phenomonal API for stock data.  Sure it is 15 minutes delayed so day trades should go find a version that you pay for.

Sample yerself some XML results here: http://www.google.com/ig/api?stock=.INX  You'll see in line 275 of the attached web part where the call to Google's API lives and can me modified.

SharePoint comes with a great data view web part that we just fed the Google output into, did a little visual tweaking to meet the space constraits we had and we were done.  Elegant, reliable, cheap.   Win.

I attached the exported web part that we used that you can import as a starting point if you'd like or if you want a little more control you can just build your own and not spend much more time in the process.

stock_ticker.webpart