SharePoint

This article the third in The Power of Content Editor WebPart series. Other parts:

Armed with knowledge about locating and getting to the object we can start some more serious DOM manipulation. In this article we’ll be expanding the SharePoint’s working area by hiding the Quick Launch bar. There are already JavaScripts available for showing or hiding Quick Launch, let’s do this example anyway to show how to do it yourself and additional we’ll be "injecting" some HTML to certain DOM element.

Our objective is as follows:

So let’s insert the webpart. If we’ll be doing this on the homepage or a WebPart page, it may be useful to set the Chrome Style to none, because in HomePage WebPart Chromes are displayed by default.

After inserting the Content Editor WebPart into page, let’s make this in two steps.

Showing / Hiding Quick Launch

We can show or hide Quick Launch (as well as any other DOM element in the page) by using CSS property display. Now let’s identify the element that we’ll wish to hide. Yes – it’s quick launch, but we need to discover which table cell, div, span or any other DOM element we have to hide. For this, let’s start our developer tools and select any element in our Quick Launch.

You will see the selected element with a blue border. Next we need to find the topmost element in the nested hierarchy that we can hide. We can do this, by selecting element one level higher in the DOM tree. A corresponding element will be highlighted with blue border.

In the case above we can still select a node higher in the nested hierarchy. Just continue clicking, until the entire row will be highlighted.

 

When we’ve selected the table row, we’ve gone too far up. Hiding the row will hide entire content. Now we have the element:

Perfect. This cell has an ID. So referencing it will be easy. We will use the following code:

document.getElementById('LeftNavigationAreaCell')

 

To hide the element we need to set its display CSS property to none. We could do it using the following JavaScript:

And it would do the trick. So if you need only to hide Quick Launch on the HomePage and don’t need to toggle it (and you’re using IE8+), you can stop here.

But there are certain limitations to this approach:

1. This will not work in IE7

Why? Because the cell that we tried to hide, doesn’t have the style attribute and in IE7 you can’t change something that doesn’t exist – especially the style attribute.

2. This will work only on homepage

Why? Because on other pages this happens:

There is another cell in this table that needs to be hidden.

3. You can’t toggle Quick Launch

What if you’ll need your Quick Launch back just for a click or two?

Let’s deal with these issues one at the time:

1. Instead of setting the style attribute to display:none, we’ll be using a CSS class:

Before the JavaScript Block – so at the beginning of your code (or at the end, it’s the same), insert the following:

Now let’s add the CSS class to the element:

That ought to fix the IE7 issue.

2. If you examine the cell with IE Developer tools, you’ll see, that this cell also has an ID. 🙂

 
So let’s do the same for both cells: Just before closing the JavaScript block, add the following line:

document.mentById('getElementById('TitleAreaImageCell').className += " hit-hidden"

And now the left side is hidden as it should be.

3. To deal with toggling the Quick Launch we’ll have to wrap an entire thing into a JavaScript function and extend its functionality. What we’ll be doing is checking those two cells’ CSS class names. If they’ll contain the hit-hidden class, we’ll remove it and if not we’ll add it. The entire JavaScript function – actually the entire code so far is as follows:

How to test this? Right now we have no link or button to call this JavaScript function (toggleQuickLaunch). We can either add HTML with link for this JavaScript, or we can test it directly in the browser using its address bar. To test the toggleQuickLaunch() function, in the page where this function is loaded, simply type the following in the URL:

javascript:toggleQuickLaunch()

And the function will be triggered.

Select the "url address" ("javascript:…") and press enter again and the Quick Launch reappears.

Now that we have JavaScript function prepared, let’s put a link for toggling Quick Launch somewhere extra, not just in a WebPart.

 

Adding toggle link to the top of the page

Using the IE developer toolbar I’ve found one potential good spot to place the link. At the top of the page, just to the left of where it says "Welcome " and your display name, there is one empty cell.

Let’s populate this. By examining the object, we can see that it has no unique ID. It has an "ms-globallinks" CSS class that we could use (in combination with getElementsByCssClass function that we can find in previous article of this series. So copy this function into our JavaScript block, because we’ll need it.

function getElementsByCssClass(sTagName, sClassName) {
    var results = new Array();
    var allTagElements = document.getElementsByTagName(sTagName);
    for (i = 0; i < allTagElements.length; i++) {
        if(allTagElements[i].className == sClassName) results.push(allTagElements[i]);
    }
    return results;
}

But there are multiple DOM elements with "ms-globallinks" CSS class. We can discover this by typing the following in our browser's address bar after we've coppied the code to our JavaScript block:

javascript:alert(getElementsByCssClass('td','ms-globallinks').length)

Too many. Too risky to be selecting one from them.  There is another way. One of its parent elements has a CSS class that is unique:

The table that contains the cell we wish to "write" into has a CSS class "ms-globalright". A quick check with javascript:alert(getElementsByCssClass('table','ms-globalright').length) reveals that there is only one table element with this CSS class.

What we can do is select the table and then traverse through HTML DOM to its first cell.

Traversing the DOM?!?

A very good tutorial about DOM tree and nodes and traversing through it can be found here. Just a Lightning quick course:

We saw the DOM tree / hierarchy in the Developer toolbar where we were selecting elements. If an element has a parent it can be selected by using the parentNode property. If an element has child nodes nested in it, it has an array of child nodes in childNodes property. childNodes property is always an array even if there is only one child node. There are some more specific items concerning different browsers and number of child nodes, but we'll cover this in one of later articles. So let's begin selecting our element.

getElementsByCssClass('table','ms-globalright')[0] selects our table containing target cell.

getElementsByCssClass('table','ms-globalright')[0].childNodes[0] selects the tbody node of the table (note: tbody is alway present even if you don't put it in your HTML code)

getElementsByCssClass('table','ms-globalright')[0].childNodes[0].childNodes[0] selects the first row (tr node) of the table

getElementsByCssClass('table','ms-globalright')[0].childNodes[0].childNodes[0].childNodes[0] selects the first cell (td node) of the first row (tr node) of the first (and only) table with CSS class "ms-globalright". That's our target cell.

Now we need to change the content of this cell. We can write the HTML of this element by using the innerHTML property. Particular to our case:

getElementsByCssClass('table','ms-globalright')[0].childNodes[0].childNodes[0].childNodes[0].innerHTML = "Hello World";

would result (if you didn't forget to copy the function getElementsByCssClass) in following:

Now let's replace the "Hello world" with a propper HTML code

"Toggle Quick Launch"

and we have a final result

If you wish to have the initial state of Quick Launch hidden, just add a toggle code at the end of your code.

toggleQuickLaunch();

Below is the complete code used in this article:

---

Orher articles from this series: