jQuery

Hiding the user presence icon

davecavins 2 Comments

When you are using a data view web part to display information including a person field SharePoint always shows the status icon beside thier name.

status icon
status icon

In some cases this is exactly what you want and can be very useful. But sometimes you just want to show a name and nothing else. With most fields you can just change the formatting options to change the display. If you choose to format the value as text SharePoint spits out this long html string.

<nobr><span><A HREF="/sites/site/_layouts/userdisp.aspx?ID=2">Cavins, David R</A><img border="0" height="1" width="3" src="/_layouts/images/blank.gif"/><a href='javascript:' onclick='IMNImageOnClick();return false;' class='ms-imnlink'><img name='imnmark' title='' border='0' height='12' width='12' src='/_layouts/images/blank.gif' alt='No presence information' sip='email@email.com' id='imn_8,type=sip'/></a></span></nobr>

Format as

Each of the other formatting options also provides un-desirable results.
Using some basic CSS we can get rid of the status icon and format the text so it does not look like a hyperlink. First wrap the field value in an element with a class. I used a span with a class of “person”

<span class=”person”>
<xsl:value-of select="@Author" />
</span>

Then just add this css to the page.

.person nobr span a {
text-decoration:none;
color:black;
cursor:default;
}

If you want to take it a step further you can use jQuery to remove the ‘href’ attribute. Using jQuery we can target the container with the link in it and then change the href value. 

$('span.person a').removeAttr('href');

Read More

CSS-Tricks AnythingSlider in SharePoint

davecavins 50 Comments

Chris Coyier from CSS-Tricks built this really cool jQuery plugin that creates a content slider that will support any regular HTML in the slides. This is cool because many sliders I have used had limitations on what could be on the slides and did not offer many of the featuers the AnythingSlider does.

AnythingSlider in SharePoint
AnythingSlider in SharePoint

Setup

To get this working in SharePoint you will need to make sure you have a reference to jQuery in the page somewhere as well as a list for the slider to read from. For my example I am using an out of the box annoucements list.  You will also need the files for the plugin download the anythingSlider plugin from css-tricks.com.

  • In SharePoint Designer add a dataview webpart to the page with any field from your annoucements list.
  • Switch to code view and find the first <xsl> tag. It should be right after the closing <DatasSources> tag.
  • Right click on the tag and choose “Select Tag”. Press delete, don’t worry we will be adding in our own xsl.

Select the auto generated xsl

  • Paste the following xsl into the page where you deleted the code.

(more…)

Read More

Updating the #SharePoint People Picker

davecavins 2 Comments

So I was working with a friend on a custom SharePoint list. When users create a new item certain fields needed to automatically populate with information from their profile. We ran into issues when trying to populate the people picker.

Scripts like SPFF can be used to accomplish this but we needed something else because we wanted to read in the current user’s information from the SharePoint web service. Additionally we wanted to avoid passing information using the query string because users would be able to access the form through multiple links.

People Picker
People Picker

(more…)

Read More

SharePoint Vertical News Ticker

davecavins 29 Comments

ticker1On a recent project I needed to create a simple vertical news ticker to display announcements from a SharePoint list. It was easy to do because I just used some of the code from the announcements slider I built a while back so I did not bother to write a post about it. Yesterday I saw a post on EndUserSharePoint.com about how to setup something similar so I figured I would share my (cheaper) solution.

A few features of the ticker:

  • The ticker pulls its contents from the default SharePoint Announcements list using jQuery.
  • The title of the announcement links to the display form for the item
  • Ticker pauses on mouseover
  • For each Announcement the first 500 characters are shown as an intro.

Here is the code it can just be pasted in a content editor web part. The only dependency is jQuery. The code for the ticker came from this post on Net Tuts Plus. I removed the comments but you can see the commented code and an explanation here.
(more…)

Read More

Resizable textareas in SharePoint edit forms

davecavins 6 Comments

So one of the things that I have had end users complain to me about is the size of the text boxes on the new and edit forms of lists like the contacts list and announcement list. On a recent non-SharePoint project I used a jQuery plugin to create a resizable text area so I tried to implement it in SharePoint. Here is what happened.

I downloaded the Textarea Resize JavaScript jQuery plugin, saved in a SharePoint library along with the latest version of jQuery.

Selecting the Element

In order for the jQuery code to work it has to know which elements on the page you want to work with.

Here is the code SharePoint renders for a text box:

<textarea name="ctl00$m$g_3fa2cde8_0ea8_4421_814f_6a6d292fbe54$ctl00
$ctl04$ctl0ctl00$TextField"
rows="15"
cols="20" id="ctl00_m_g_3fa2cde8_0ea8_4421_ctl00_TextField" title="Body"
class="ms-long" dir="none"></textarea>

There are two problems:

  1.  ASP.NET creates very long and hard to use IDs
  2. The class ms-long culd apply to other elements on the page that I dont want to use the effect on.

(more…)

Read More

Adding Suggestions to the Sharepoint search box : Part 2

davecavins Leave a comment

In Part 1 of this post we used a simple javascript to display suggestions on a custom search box. After I wrote that post I was thinking it would make more sense to read the suggestions from a list instead of a JavaScript file. This post will explain how to setup the list and edit the JavaScript to read the suggestions from a list. The idea is that an administrator could manage the list and help guide users toward specific information instead of getting numerous un-related results like in those commercials for bing.

Assuming you already have the search box setup as described in Part one of this post all you will need to do is change the javascript and add some code to the page. (more…)

Read More

A Faster jQuery Preview Pane

davecavins 1 Comment

A while back there was a post on EndUserSharePoint.com by Paul Grenier that described how to use jQuery and the CEWP to make a preview pane.  I thought it was a very nice solution and worked better than the out of the box preview pane SharePoint uses.  

Too Much Code

The only issue is the preview pane solution is that in environments with slow internet connections the preview pane will be almost as slow as if the user actually broswed to the display form for the item.

Although its done through AJAX jQuery is still having to load the whole DispForm.aspx and then only displaying the contents of  a specific element.  DispForm.aspx when rendered through the borwser (like most pages in SharePoint) is very code heavy with over 700 lines of code ( An Announcement List item). Reducing the amount of code jQuery has to load from the diplay form will decrease load times and make everyone happy.

Faster

Gabe Hilado and I decided to try to make it faster. The simple solution is to make your own diplay form in SharePoint Designer. First we tried creating a blank .aspx page and putting the list view webpart on it.  The reduced the amount of code on the page but I wanted it to be even faster.

(more…)

Read More