Wednesday, February 1, 2006

Finding Styles

When editing the CSS for a site, I've found the "Style Under Cursor" by Todd Bleeker to be very helpful. You simply paste this code into a content editor webpart, and it will show you the styles applied to an item as you hover over it.
http://mindsharpblogs.com/todd/archive/2005/10/25/798.aspx


Below is the code:


<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" width="100%" height="220">
<tr>
<td valign="top">
<a href="http://MindsharpBlogs.com/Todd"
target="_blank" Title="Todd's Blog">
<img src="/_layouts/images/pagelogo.gif"
border="0"></img></a>
</td>
<td valign="top" width="100%">
<table>
<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>
</table>
</td>
</tr>
</table>