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:

?

1 2 3

$(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...

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<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).

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

<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>

Code – Disabling the Enter Key on Web-Forms

An old entry from a few years back, it had a number of hits so it may be useful, qualified for migration...

I got burned a while back by not having this in place when the submit button in a web-app only appeared under certain circumstances. Place this in the top of a web page to squelch the ENTER key in an INPUT=TEXT in your form. Then they gotta use the button when you say that the time is right =)

?

1 2 3 4 5 6 7 8 9 10 11

<script type="text/javascript">   function stopRKey(keyp) {   var keyp = (keyp) ? keyp : ((event) ? event : null);   var node = (keyp.target) ? keyp.target : ((keyp.srcElement) ? keyp.srcElement : null);   if ((keyp.keyCode == 13) && (node.type=="text"))  {return false;} }   document.onkeypress = stopRKey;   </script>