HTML Title Tag Manipulation in SharePoint with Jquery

By: colorado dreamer on 11:39 PM

Suppose you have a dynamic page that is displaying records from a SharePoint list. The HTML <title> tag will only be able to display the single title of the page for every record.

You can use Jquery to read a unique title from the list record and display it as the HTML <title> tag.

The following is accomplished with the SharePoint HTML Form webpart and SharePoint Designer.

First, look at your page in the browser with a developer tool such as Firebug. The list column “title” is what we want to use as the HTML title tag. We need to wrap the table row tag with a class.

Switch to SharePoint Designer, open your page, and find the table detail that contains the Title value.

Create a span tag with a class and a meaningful name.  In my case, this is what I used:
<span class="resourcetitle">Title…..</span>

With a class created around your title tag, you can now use the following script in a webpart on your page.

Edit your SharePoint page in the browser and insert an HTML form webpart.

Open the source editor of the Webpart and replace the default text with this script:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery....</script>
<script>
$(document).ready(function () {
var strTitle = $('.resourcetitle').text();
$(document).attr('title', strTitle);
});
</script>

Remember to set your webpart chrome to none and click ok.

Preview your page and you should now have the list item title in the browser tab and the html title tag.