In SharePoint you can link the quick launch bar to a page or a control such as a calendar or a document library. Regardless of their type, all of these have a title element that helps you to identify where you currently are.
In this example I will show how to create a simple JavaScript that will alert the title for you. This is obviously not so useful by itself, but is a stepping stone to adding custom functions based on location. Also note that this is specific to SharePoint sites where you can see the tags I mention in the markup in SharePoint Designer.
A starting condition of this example is that the JavaScript alert should alert location (the title) anywhere in a SharePoint site. When controls such as document libraries or calendars are directly linked to, there’s no easy way to embed script. However all of these are encapsulated within the SharePoint site’s Master Page, so this is the best place to put the JavaScript.
To edit your site’s Master Page you’ll need to use SharePoint designer 2013. You can have a look at the step-by-step instructions for backing up and editing a Master Page template here: https://jwcooney.com/2017/06/30/customizing-the-top-bar-in-sharepoint-2016-on-premesis/
Once you are editing your Master Page code, it’s time to add your JavaScript. For this example, I’ve added the script right before the end Body HTML tag.
Finding Where SharePoint Holds the Title
SharePoint sets the page or control title as a hyperlink with no id attribute. It is embedded several levels deep inside of a parent span tag that goes by the id of ‘DeltaPlaceHolderPageTitleInTitleArea’
Here is an example of what the HTML looks like that holds the title if you were to view the source markup of a SharePoint page.
<span id="DeltaPlaceHolderPageTitleInTitleArea">
<span><span>
<a title="Control Title" href="/SiteURL/Lists/calendar.aspx">Control Title</a>
</span></span>
</span>The JavaScript to Embed
Here is the Javascript that you can embed in your SharePoint site’s Master Page Template. It will alert the page or control title every time you browse to a page in your SharePoint site.
<script type="text/javascript">
// We need a try - catch block because certain sections in SharePoint (like 'Site Contents' or 'Site Settings') do not have a title
try{
// Get the Parent Span Element of the page or control title
var spanTitleHolder = document.getElementById('DeltaPlaceHolderPageTitleInTitleArea');
// Now we search inside the parent span for the hyperlink that contains the title
var hrefTitleList = spanTitleHolder.getElementsByTagName("a")[0];
// Time to alert the page/control title
alert(hrefTitleList.innerHTML);
}catch(err){
alert('error');
}
</script>
Justin Cooney 