[xsl] Highlighting Title in TOC

Subject: [xsl] Highlighting Title in TOC
From: "Shailesh Shinde" <shailesh@xxxxxxxxxxxx>
Date: Tue, 29 Nov 2005 16:32:45 +0530
HI All,

I have to highlight the title which I have added in my toc.xml file.
I have xsl:

<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl";>
<xsl:template match="/">

<HTML>
<HEAD>	
<STYLE>
    A.clsTocHeading { color:blue; font-weight:bold;  text-decoration:none;}
    A.clsTocSubHeading { color:blue; font-weight:bold;  font-size:8pt;
text-decoration:none;}
    A.clsTocHeading:hover { color:blue; }
	A.clsTocItem { color: blue; text-decoration: none; }
	A.clsTocItem1 { color: red; text-decoration: none; }
    A.clsTocItem:hover 	{ color: blue; }
    A.clsTocItem:hover1 	{ color: red; }
    BODY { font-family:verdana, arial, helvetica, sans-serif;
font-size:10pt; color: #000000; }
    UL { margin-left:24px; margin-top:0px; margin-bottom:2px; }
    UL UL LI {list-style-image:url('../images/arrowstop.gif'); cursor: none;
}  
    LI.clsShowHide {list-style-image:url('../images/plus.gif'); cursor:
none; }
    LI.clsShowHideShowing { list-style-image:url('../images/minus.gif');
cursor: none; }
    UL.clsItemsShow { list-style-image:url('../images/minus.gif'); }
    UL.clsItemsHide { display:none; }
    h3.title { text-align: center; margin-top:0.5em; color: blue;
text-decoration: none; }
   
    BODY {
	FONT-SIZE: 12px; MARGIN: 0px 12px 12px; COLOR: #000000; FONT-FAMILY:
Arial,Helvetica,Verdana,Geneva,sans-serif; BACKGROUND-COLOR: #ffffff
}
TD {
	FONT-SIZE: 12px; COLOR: #000000; LINE-HEIGHT: 15px
}
A:link {
	COLOR: #0066cc; TEXT-DECORATION: none
}
A:visited {
	COLOR: #6699cc; TEXT-DECORATION: none
}
A:hover {
	COLOR: #0066cc; TEXT-DECORATION: underline
}
A:hover1 {
	COLOR: #00cccc; TEXT-DECORATION: none
}
P {
	MARGIN: 0px 0px 11px
}
P.toc {
	MARGIN: 0px 0px 0px 2em; TEXT-INDENT: -2em
}
UL {
	LIST-STYLE-IMAGE: url(images/minus.gif); MARGIN: 0px 0px 11px 27px;
LIST-STYLE-TYPE: square
}
OL {
	MARGIN: 0px 0px 11px 27px; LIST-STYLE-TYPE: decimal
}
.nolist {
	LIST-STYLE-TYPE: none
}
INPUT {
	FONT-SIZE: 12px; FONT-FAMILY:
Arial,Helvetica,Verdana,Geneva,sans-serif
}
SELECT {
	FONT-SIZE: 12px; FONT-FAMILY:
Arial,Helvetica,Verdana,Geneva,sans-serif
}
TEXTAREA {
	FONT-SIZE: 12px; FONT-FAMILY:
Arial,Helvetica,Verdana,Geneva,sans-serif
}
FORM {
	MARGIN: 0px 0px 11px
}
TD.gray-border {
	BORDER-RIGHT: #999999 1px solid
}
TD.gray-border2 {
	BORDER-RIGHT: #999999 1px solid; BORDER-BOTTOM: #999999 1px solid
}
TD.border-bottom {
	BORDER-BOTTOM: #999999 1px solid
}
TD.frame-border {
	BORDER-RIGHT: #999999 1px solid; BORDER-LEFT: #999999 1px solid;
BORDER-BOTTOM: #999999 1px solid
}
TD.border-top {
	BORDER-TOP: #cccccc 1px solid
}
TD.glnav {
	COLOR: #666666; TEXT-DECORATION: none
}
TD.countryid {
	FONT-SIZE: 10px; COLOR: #666666; TEXT-DECORATION: none
}
TD.ftnav {
	FONT-SIZE: 10px; COLOR: #666666; LINE-HEIGHT: 14px; HEIGHT: 26px;
TEXT-DECORATION: none
}
TD.section-header {
	PADDING-RIGHT: 11px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px;
PADDING-TOP: 0px; HEIGHT: 36px; TEXT-ALIGN: right
}
TD.lhsash {
	WIDTH: 180px; BACKGROUND-COLOR: #f4f4f4
}
TD.lhnav {
	PADDING-RIGHT: 0px; PADDING-LEFT: 1px; PADDING-BOTTOM: 0px;
LINE-HEIGHT: 11px; PADDING-TOP: 4px
}
TD.lhnavbld {
	PADDING-RIGHT: 0px; PADDING-LEFT: 1px; PADDING-BOTTOM: 0px;
LINE-HEIGHT: 11px; PADDING-TOP: 4px
}
TD.content-ww {
	PADDING-RIGHT: 0px; PADDING-LEFT: 1px; PADDING-BOTTOM: 0px;
PADDING-TOP: 0px
}
TD.content {
	PADDING-RIGHT: 11px; PADDING-LEFT: 10px; PADDING-BOTTOM: 28px;
VERTICAL-ALIGN: top; PADDING-TOP: 11px; HEIGHT: 402px
}
TD.center {
	PADDING-RIGHT: 0px; PADDING-LEFT: 1px; PADDING-BOTTOM: 0px;
VERTICAL-ALIGN: top; WIDTH: 345px; PADDING-TOP: 0px
}
TD.center-top {
	PADDING-RIGHT: 0px; PADDING-LEFT: 1px; PADDING-BOTTOM: 0px;
VERTICAL-ALIGN: top; WIDTH: 345px; PADDING-TOP: 25px
}
TD.center-title {
	PADDING-RIGHT: 0px; PADDING-LEFT: 1px; PADDING-BOTTOM: 0px;
VERTICAL-ALIGN: top; WIDTH: 345px; PADDING-TOP: 23px
}
TD.center518-title {
	PADDING-RIGHT: 0px; PADDING-LEFT: 1px; PADDING-BOTTOM: 0px;
VERTICAL-ALIGN: top; WIDTH: 518px; PADDING-TOP: 23px
}
TD.center720-title {
	PADDING-RIGHT: 0px; PADDING-LEFT: 1px; PADDING-BOTTOM: 0px;
VERTICAL-ALIGN: top; WIDTH: 720px; PADDING-TOP: 23px
}
TD.right {
	VERTICAL-ALIGN: top; WIDTH: 158px
}
TD.right-top {
	VERTICAL-ALIGN: top; WIDTH: 158px; PADDING-TOP: 16px
}
TD.column2-left {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px;
VERTICAL-ALIGN: top; WIDTH: 254px; PADDING-TOP: 0px
}
TD.column2-right {
	PADDING-RIGHT: 0px; PADDING-LEFT: 11px; PADDING-BOTTOM: 0px;
VERTICAL-ALIGN: top; WIDTH: 253px; PADDING-TOP: 0px
}
TD.space {
	PADDING-RIGHT: 0px; PADDING-LEFT: 4px; PADDING-BOTTOM: 0px;
VERTICAL-ALIGN: top; WIDTH: 12px; PADDING-TOP: 0px
}
TD.space11 {
	WIDTH: 11px
}
TD.tdw167 {
	WIDTH: 167px
}
TD.tdw70 {
	VERTICAL-ALIGN: top; WIDTH: 70px
}
TR.pad {
	PADDING-RIGHT: 11px; PADDING-LEFT: 0px; PADDING-BOTTOM: 7px;
PADDING-TOP: 4px
}
TABLE.header {
	MARGIN: 8px 11px 13px
}
TABLE.footer {
	MARGIN: 29px 11px 8px
}
TABLE.lhsash {
	MARGIN: 16px 11px 28px 10px; WIDTH: 159px
}
TABLE.subnav {
	MARGIN: 0px; WIDTH: 332px
}
TABLE.content {
	WIDTH: 519px
}
TABLE.logo {
	MARGIN: 11px 0px 0px 11px; WIDTH: 170px
}
TABLE.left {
	FLOAT: left; MARGIN: 0px 11px 0px 0px; WIDTH: 22px
}
TABLE.right {
	FLOAT: right; MARGIN: 0px 0px 0px 11px; WIDTH: 22px
}
TABLE.rightmargin {
	MARGIN: 0px 11px 0px 0px; WIDTH: 22px
}
DIV.clear {
	CLEAR: both
}
DIV.lh-blue {
	PADDING-RIGHT: 4px; PADDING-LEFT: 1px; FONT-SIZE: 11px;
PADDING-BOTTOM: 0px; COLOR: #0066cc; LINE-HEIGHT: 11px; PADDING-TOP: 4px
}
DIV.lh-drkblue {
	PADDING-RIGHT: 4px; PADDING-LEFT: 1px; FONT-SIZE: 11px;
PADDING-BOTTOM: 0px; COLOR: #666666; LINE-HEIGHT: 11px; PADDING-TOP: 4px
}
DIV.lh-black {
	PADDING-RIGHT: 4px; PADDING-LEFT: 1px; FONT-SIZE: 11px;
PADDING-BOTTOM: 0px; COLOR: #000000; LINE-HEIGHT: 11px; PADDING-TOP: 4px
}
DIV.intro {
	FONT-WEIGHT: bold
}
.glnav {
	FONT-SIZE: 11px; COLOR: #0066cc; TEXT-DECORATION: none
}
A.glnav {
	FONT-SIZE: 11px; COLOR: #0066cc; TEXT-DECORATION: none
}
A.glnav:visited {
	FONT-SIZE: 11px; COLOR: #0066cc; TEXT-DECORATION: none
}
A.glnav:hover {
	TEXT-DECORATION: underline
}
.lhnav {
	FONT-SIZE: 11px; COLOR: #000000; TEXT-DECORATION: none
}
A.lhnav {
	COLOR: #0066cc; TEXT-DECORATION: none
}
A.lhnav:visited {
	COLOR: #0066cc; TEXT-DECORATION: none
}
A.lhnav:hover {
	COLOR: #0066cc; TEXT-DECORATION: underline
}
A.lhnav-active {
	FONT-SIZE: 11px; COLOR: #666666; TEXT-DECORATION: none
}
A.lhnav-active:visited {
	FONT-SIZE: 11px; COLOR: #666666; TEXT-DECORATION: none
}
A.lhnav-active:hover {
	COLOR: #666666; TEXT-DECORATION: underline
}
.lhnavbld {
	FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #000000; TEXT-DECORATION:
none
}
A.lhnavbld {
	COLOR: #0066cc; TEXT-DECORATION: none
}
A.lhnavbld:visited {
	COLOR: #0066cc; TEXT-DECORATION: none
}
A.lhnavbld:hover {
	COLOR: #0066cc; TEXT-DECORATION: underline
}
.ftnav {
	FONT-SIZE: 10px; COLOR: #0066cc; TEXT-DECORATION: none
}
A.ftnav {
	FONT-SIZE: 10px; COLOR: #0066cc; TEXT-DECORATION: none
}
A.ftnav:visited {
	FONT-SIZE: 10px; COLOR: #0066cc; TEXT-DECORATION: none
}
A.ftnav:hover {
	TEXT-DECORATION: underline
}
.title {
	FONT-WEIGHT: bold; FONT-SIZE: 14px; COLOR: #000000; LINE-HEIGHT:
17px
}
.subtitle {
	FONT-STYLE: italic
}
.pdf {
	FONT-SIZE: 8pt; COLOR: #666666; FONT-STYLE: italic; TEXT-DECORATION:
none
}
.disclamer {
	FONT-SIZE: 9px; LINE-HEIGHT: 12px; TEXT-DECORATION: none
}
.summary {
	FONT-SIZE: 9px; COLOR: #000000; LINE-HEIGHT: 12px
}
.summary P {
	MARGIN: 0px 0px 7px
}
.gray {
	COLOR: #666666; TEXT-DECORATION: none
}
.ltgray {
	COLOR: #999999; TEXT-DECORATION: none
}
.black {
	COLOR: #000000; TEXT-DECORATION: none
}

HR {
	MARGIN: 0px 0px 5px; COLOR: #cccccc; HEIGHT: 1px
}
HR.tick {
	MARGIN: 4px 0px 0px 1px; WIDTH: 36px; COLOR: #999999; HEIGHT: 1px;
TEXT-ALIGN: left
}
HR.ltick {
	MARGIN: 4px 0px 0px; WIDTH: 36px; COLOR: #999999; HEIGHT: 1px;
TEXT-ALIGN: left
}
HR.rtick {
	MARGIN: 4px 0px 4px 122px; WIDTH: 36px; COLOR: #999999; HEIGHT: 1px;
TEXT-ALIGN: right
}
IMG {
	BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH:
0px; BORDER-RIGHT-WIDTH: 0px
}
.promo {
	MARGIN-BOTTOM: 5px
}
.icon {
	MARGIN: 0px 5px 0px 0px; VERTICAL-ALIGN: middle
}
.img-rightpadding {
	MARGIN: 4px 11px 7px 0px
}
.img-leftpadding {
	MARGIN: 4px 0px 7px 11px
}
.img-left {
	FLOAT: left; MARGIN: 4px 11px 7px 0px
}
.img-top {
	FLOAT: left; MARGIN: 4px 11px 7px 0px
}
.img-texttop {
	FLOAT: left; MARGIN: 4px 11px 7px 0px
}
.img-right {
	FLOAT: right; MARGIN: 4px 0px 7px 11px
}
.img-bottom {
	MARGIN: 4px 5px 0px
}
.img-absbottom {
	MARGIN: 4px 5px 0px
}
.img-baseline {
	MARGIN: 4px 5px 0px
}
.img-middle {
	MARGIN: 4px 5px 7px; VERTICAL-ALIGN: middle
}
.img-absmiddle {
	MARGIN: 4px 5px 7px; VERTICAL-ALIGN: middle
}
.img-view {
	MARGIN: 4px 0px 5px
}
TABLE.bannercell {
	MARGIN: 11px
}
TABLE.gray {
	PADDING-RIGHT: 7px; PADDING-LEFT: 7px; PADDING-BOTTOM: 11px; WIDTH:
157px; PADDING-TOP: 7px; HEIGHT: 106px; BACKGROUND-COLOR: #777777
}
TABLE.blue {
	BACKGROUND-COLOR: #003366
}
TABLE.ltblue {
	PADDING-RIGHT: 7px; PADDING-LEFT: 7px; PADDING-BOTTOM: 11px; WIDTH:
457px; PADDING-TOP: 7px; HEIGHT: 60px; BACKGROUND-COLOR: #ddeeff
}
TD.home360 {
	PADDING-RIGHT: 11px; VERTICAL-ALIGN: top; WIDTH: 349px; PADDING-TOP:
27px
}
.home-nav {
	PADDING-LEFT: 1px; COLOR: #ffffff; TEXT-DECORATION: none
}
A.home-nav {
	PADDING-LEFT: 1px; COLOR: #ffffff; TEXT-DECORATION: none
}
A.home-nav:visited {
	PADDING-LEFT: 1px; COLOR: #ffffff; TEXT-DECORATION: none
}
A.home-nav:hover {
	COLOR: #ffffff; TEXT-DECORATION: underline
}
HR.htick {
	MARGIN: 4px 0px 4px 1px; WIDTH: 36px; COLOR: #999999; HEIGHT: 1px;
TEXT-ALIGN: left
}
BODY.popup {
	FONT-SIZE: 12px; MARGIN: 0px; COLOR: #000000; FONT-FAMILY:
Arial,Helvetica,Verdana,Geneva,sans-serif; BACKGROUND-COLOR: #ffffff
}
TABLE.popup {
	MARGIN: 11px 22px 11px 10px; WIDTH: 387px; HEIGHT: 425px
}
TABLE.logo-popup {
	MARGIN: 8px 0px 17px 11px; WIDTH: 139px
}
TABLE.popup-footer {
	MARGIN: 11px; WIDTH: 398px
}
TD.popup-footer {
	PADDING-RIGHT: 10px; PADDING-LEFT: 0px; PADDING-BOTTOM: 10px;
LINE-HEIGHT: 11px; PADDING-TOP: 10px
}
body {
scrollbar-face-color:#6699CC;
scrollbar-arrow-color:#cccc33;
scrollbar-track-color:#CCCCCC;
scrollbar-shadow-color:#99CCFF;
scrollbar-highlight-color:#cccc33;
scrollbar-3dlight-color:#cccc33;
scrollbar-darkshadow-Color:#cccc33;
}


</STYLE>
</HEAD>
<SCRIPT>
//<xsl:comment><![CDATA[
function Toggle()
{
    var e = event.srcElement.nextSibling;
    if (e.className == "clsItemsHide")
    {
        e.className = "clsItemsShow";
        e.parentNode.className = "clsShowHideShowing";
    } else {
        e.parentNode.className = "clsShowHide";
        e.className = "clsItemsHide";
    }
}

function updatedItem(sStampDate) {
      dExpireDate = 9
      if (sStampDate < dExpireDate)	{
         document.write("<IMG SRC='../images/updated.gif' width='60'
height='12' border='0' ALT='Updated'>");
      }
   }
function newItem(sStampDate) {
      dExpireDate = 9
      if (sStampDate > dExpireDate)	{
         document.write("<IMG SRC='../images/new.gif' WIDTH='29' HEIGHT='12'
BORDER='0' ALT='New'>");
      }
    }
//]]></xsl:comment>

</SCRIPT>
<BODY LEFTMARGIN="0" TOPMARGIN="0">
<!--<h3 class="title">Contents</h3>-->
<img src="../images/content.gif" border="0"></img>



<p></p>
    <UL>
        <xsl:apply-templates select="toc/item"/>
    </UL>





<p align="left">


<APPLET CODE="Search.class" WIDTH="227" HEIGHT="175" >
<param name="labeltext" value="Search the documentation kit"></param>
<param name="appletbg" value="6699CC"></param>
<param name="checkboxbg" value="6699CC"></param>
<param name="labelbg" value="6699CC"></param>
<param name="firstpage" value="index.txt"></param>
<param name="targetname" value="main"></param>
<param name="maxhits" value="30"></param>
<param name="completedtext" value="done!"></param>
<param name="labelfontsize" value="11"></param>
<param name="appletfontsize" value="9"></param>
<param name="txtfieldwidth" value="150"></param>
<param name="textfieldbg" value="ffFFFF"></param>
<param name="listbg" value="ffFFFF"></param>
<param name="buttonx" value="170"></param>
<param name="listwidth" value="215"></param>

</APPLET>

</p>
<p align="center">
</BODY>
</HTML>

</xsl:template>

//This is the first level in the TOC
<xsl:template match="item">    
  <LI><A TARGET="main">
    <xsl:attribute name="CLASS">clsTocItem</xsl:attribute>
    <xsl:attribute name="TITLE"><xsl:value-of
select="@title"/></xsl:attribute>
    <xsl:attribute name="HREF"><xsl:value-of
select="@href"/></xsl:attribute>
    <xsl:value-of select="@title"/>

ADDED:
    <xsl:if test="/item/item[@title='Whats New in this test (*New*)']">
    <xsl:attribute name="CLASS">clsTocItem1</xsl:attribute>
    <xsl:attribute name="TITLE"><xsl:value-of
select="@title"/></xsl:attribute>
    <xsl:attribute name="HREF"><xsl:value-of
select="@href"/></xsl:attribute>
    <xsl:value-of select="@title"/>
    </xsl:if> END ADDED
	</A>
  </LI>
</xsl:template>

//This is the second level in the TOC

<xsl:template match="item[item]">    
  <LI CLASS="clsShowHide">
    <A ONCLICK="Toggle()" HREF="javascript:">
    <xsl:attribute name="CLASS">clsTocHeading</xsl:attribute>
    <xsl:attribute name="TITLE"><xsl:value-of
select="@title"/></xsl:attribute>
    <xsl:value-of select="@title"/>
    </A><UL CLASS="clsItemsHide"><xsl:apply-templates
select="UPDATED"/><xsl:apply-templates select="item"/>
    </UL>
  </LI>

</xsl:template>

<xsl:template match="UPDATED">
   <SCRIPT LANGUAGE="javascript">//<xsl:comment><![CDATA[
   updatedItem("]]><xsl:value-of /><![CDATA[")
   //]]></xsl:comment></SCRIPT>
</xsl:template>

<xsl:template match="NEW">
   <SCRIPT LANGUAGE="javascript">//<xsl:comment><![CDATA[
   newItem("]]><xsl:value-of /><![CDATA[")
   //]]></xsl:comment></SCRIPT>
</xsl:template>
</xsl:stylesheet>

And my toc.xml contains:

<?xml version="1.0"?>
<?xml-stylesheet href="../styles/toc.xsl" type="text/xsl"?>
<toc>
<item title="Project Specific"> 
	<item href="test1.htm" title="Scope"/> 
	<item href="test2.htm" title="Output "/> 
	<item href="test3.htm" title=" Sheet"/> 
	<item href="test4.htm" title="project"/>
	<item href="testNEW.htm" title="New test"/>
</item>
</toc>

I can't able to highlight "New test" How to do this?

Thanks,
Shailesh

Current Thread