Here is something cool I have recently made. It's an add on to SharePoint, that allows a user to temporarily collapse (or minimize) Web Parts, and restore them, by clicking on their titles.
Just click on the Web Part's title to collapse, and click again to restore.
- Your users doesn't need any special permissions to use this (works with anonymous as well).
- No SharePoint personalization involved.
- Collapsing occurs instantly (no postback).
- Everything is temporary, when the user returns to that page again, it is in it's original state.
- No dll's or custom code.
The solution is implemented as a single hidden Content Editor Web Part, that adds JavaScript to the page it is at, and modifies the other web parts on that page to allow collapsing.
I have developed and tested this on IE, WSS 3.0, don't know how it will work with other browsers or WSS versions.
Download: http://blogs.microsoft.co.il/files/folders/itaysk/entry130087.aspx
Installation:
- Extract Itaysk_CollapsibleWebParts.zip, and run setup.exe.
- Follow the installation wizard to add the solution and deploy it in you farm.
- Activate the 'Itaysk - Collapsible Web Parts' feature at the site collection level.
- Go to a page you want to have this capability, and add the 'Collapsible Web Parts' web part somewhere on a page.
If you want to apply this to all of you pages, you can put this script in you master page file.
Here is the script: (the downloaded file won't include these comments)
<script type="text/javascript">
//Make the registeration function invoked after page load
_spBodyOnLoadFunctionNames.push("registerTitleEvents");
//This function registers an event handler to every web part title in the page
function registerTitleEvents()
{
//In order to get all the web parts in the page, we search for all the H3 tags in the page, and check their parent's id
//We search for H3 tags becaue every web part has one in it's title, inside the TD tag.
//We don't search for TD tags because there are much more of them in the page than H3 tags.
var webPartTitles = document.getElementsByTagName('h3');
//Go through all the H3 tags we found
for(i=0;i<=webPartTitles.length-1;i++)
{
//Since the H3 tag itself doesn't have any id, we check it's parent TD tag.
var title = webPartTitles[i].parentElement;
//If an H3 tag's parent TD tag is begining with "WebPartTitleWPQ", we can tell it's a web part's title H3 tag and not just another H3 tag
if (title.id.indexOf("WebPartTitleWPQ") > -1)
{
//Make the titleClicked function invoke on every click on the H3 tag
//The H3 tag spans the entire TD, so we won't get dead spots
//We don't attach the event to the parent TD tag (title variable), because it would attach the H3 anyway..
webPartTitles[i].attachEvent('onmousedown',titleClicked);
//Change the cursor to hand when the mouse is iver the title to give the user a clickable fill
webPartTitles[i].style.cursor = "hand";
}
}
}
//This function is handling click events for the web part's title, and hides\displays the body of the web part
function titleClicked()
{
//This function is triggerred from the id less H3 tag. So again, we are ckecking it's parent TD id.
var titleId = event.srcElement.parentNode.id;
//This hack is to keep clicking on the title text itself working as before
if (!titleId)
{ return; }
//Get the clicked web part id from the id of the TD tag
var wpq = titleId.substring((titleId.lastIndexOf('WPQ')+3),titleId.length);
//Get the container of the body of the web part, so we can hide it later
var body = document.getElementById("WebPartWPQ"+wpq );
//Declare a flag that will help us know is the web part was hidden when the click occured.
//We use the style attribute "display" to deak with visibility
var fVisible = true;
if (body.style.display == "none")
{
fVisible = false;
}
//Check what was the web part's visibility state when the clicked occured
if (fVisible)
//The web part was visible
{
//Hide the web part
body.style.display = "none";
}
else
//The web part was hidden
{
//Show the web part
body.style.display = "block";
}
}
</script>