Wednesday, January 28, 2009

SharePoint CSS Viewer

Just add the following to a editor web part thingy:

<script language="JavaScript">
function elementInfo()
{
//Output CSS Class Hierarchy
var currElement = window.event.srcElement;
var classTree = "";
var n = 50;

//Show first n characters of tagName in TAG cell
if(currElement.tagName != null)
{
ststag.innerText = "<" + currElement.tagName + ">";
if(ststag.innerText.length > n)
ststag.innerText = ststag.innerText.substring(1,n) + "...";
}
else
ststag.innerText = "";

//Show first n characters of id in ID cell
if(currElement.id != null)
{
stsid.innerText = currElement.id;
if(stsid.innerText.length > n)
stsid.innerText = stsid.innerText.substring(0,n) + "...";
}
else
stsid.innerText = "";

//Show first n characters of name in NAME cell
if(currElement.name != null)
{
stsname.innerText = currElement.name;
if(stsname.innerText.length > n)
stsname.innerText =
stsname.innerText.substring(0,n) + "...";
}
else
stsname.innerText = "";

//Show entire class parentage in the CLASS cell
if(currElement != null)
{
do
{
if(currElement.className != null &&
currElement.className != "")
{
if(classTree != "")
classTree = currElement.className + "\n" + classTree;
else
classTree = currElement.className;
}
currElement = currElement.parentElement;
} while (currElement != null);
stsclass.innerText = classTree;
}
else
{
stsclass.innerText = "";
}
}

//Run code on all mouse over events
window.document.body.onmouseover = elementInfo;
</script>

<table border="1" height="220" width="100%">
<tbody><tr>
<td valign="top">
TEST
</td>
<td valign="top" width="100%">
<table>
<tbody><tr>
<td>TAG:</td>
<td id="ststag" width="100%">
</td>
</tr>
<tr>
<td>ID:</td>
<td id="stsid">
</td>
</tr>
<tr>
<td>NAME:</td>
<td id="stsname">
</td>
</tr>
<tr>
<td valign="top">CLASS:</td>
<td id="stsclass">
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>