]> granicus.if.org Git - docbook-dsssl/commitdiff
Added search highlighting feature.
authorKasun Gajasinghe <kasunbg@gmail.com>
Sun, 18 Jul 2010 14:34:15 +0000 (14:34 +0000)
committerKasun Gajasinghe <kasunbg@gmail.com>
Sun, 18 Jul 2010 14:34:15 +0000 (14:34 +0000)
xsl/webhelp/template/common/css/positioning.css
xsl/webhelp/template/common/jquery/jquery-ui-1.8.2.custom.min.js
xsl/webhelp/template/common/main.js
xsl/webhelp/template/content/search/nwSearchFnt.js
xsl/webhelp/xsl/webhelp.xsl

index 9721da741cf43aa70429056fef381dcc4f0e7f9e..c161162199a836742ff245230b96ba800d819d7d 100755 (executable)
@@ -44,11 +44,11 @@ h2 { font: bold 14pt Arial, Helvetica, geneva; }
 }
 
 #content h1, #content h2 { color: #cc0000; }
-
 .navfooter { bottom: 2%; }
+.highlight { background-color: #FFFF88; }
+.highlightButton{ font-size: 0; }
 
 /*  Show Hide TOC tree */
-
 .pointLeft {
     background: url("../images/showHideTreeIcons.png") 0 0 no-repeat;
     height: 28px;
@@ -57,7 +57,6 @@ h2 { font: bold 14pt Arial, Helvetica, geneva; }
     font-size: 0;
     cursor: pointer;
 }
-
 .pointRight {
     background: url("../images/showHideTreeIcons.png") -15px 0 no-repeat;
     height: 28px;
@@ -67,18 +66,15 @@ h2 { font: bold 14pt Arial, Helvetica, geneva; }
 } 
 
 /* Search results Styling */
-
 .searchExpression {
     color: #0050A0;
     background-color: #EBEFF8;
     font-size: 12pt;
 }
-
 .searchresult li a {
     text-decoration: none;
     color: #0050A0;
 }
-
 .searchresult li {
     color: #0050A0;
 }
index 3420f6e40e1551ae69e93392f0dcf8a72bb79e7f..fec53e8e08a1e57e37623175a707f29f8b236466 100755 (executable)
@@ -122,260 +122,15 @@ e.height+a}else{b.size.width=e.width+h;b.size.height=e.height+a;b.position.top=g
  *     jquery.ui.mouse.js
  *     jquery.ui.widget.js
  */
-(function($) {
-
-$.widget("ui.selectable", $.ui.mouse, {
-       options: {
-               appendTo: 'body',
-               autoRefresh: true,
-               distance: 0,
-               filter: '*',
-               tolerance: 'touch'
-       },
-       _create: function() {
-               var self = this;
-
-               this.element.addClass("ui-selectable");
-
-               this.dragged = false;
-
-               // cache selectee children based on filter
-               var selectees;
-               this.refresh = function() {
-                       selectees = $(self.options.filter, self.element[0]);
-                       selectees.each(function() {
-                               var $this = $(this);
-                               var pos = $this.offset();
-                               $.data(this, "selectable-item", {
-                                       element: this,
-                                       $element: $this,
-                                       left: pos.left,
-                                       top: pos.top,
-                                       right: pos.left + $this.outerWidth(),
-                                       bottom: pos.top + $this.outerHeight(),
-                                       startselected: false,
-                                       selected: $this.hasClass('ui-selected'),
-                                       selecting: $this.hasClass('ui-selecting'),
-                                       unselecting: $this.hasClass('ui-unselecting')
-                               });
-                       });
-               };
-               this.refresh();
-
-               this.selectees = selectees.addClass("ui-selectee");
-
-               this._mouseInit();
-
-               this.helper = $("<div class='ui-selectable-helper'></div>");
-       },
-
-       destroy: function() {
-               this.selectees
-                       .removeClass("ui-selectee")
-                       .removeData("selectable-item");
-               this.element
-                       .removeClass("ui-selectable ui-selectable-disabled")
-                       .removeData("selectable")
-                       .unbind(".selectable");
-               this._mouseDestroy();
-
-               return this;
-       },
-
-       _mouseStart: function(event) {
-               var self = this;
-
-               this.opos = [event.pageX, event.pageY];
-
-               if (this.options.disabled)
-                       return;
-
-               var options = this.options;
-
-               this.selectees = $(options.filter, this.element[0]);
-
-               this._trigger("start", event);
-
-               $(options.appendTo).append(this.helper);
-               // position helper (lasso)
-               this.helper.css({
-                       "z-index": 100,
-                       "position": "absolute",
-                       "left": event.clientX,
-                       "top": event.clientY,
-                       "width": 0,
-                       "height": 0
-               });
-
-               if (options.autoRefresh) {
-                       this.refresh();
-               }
-
-               this.selectees.filter('.ui-selected').each(function() {
-                       var selectee = $.data(this, "selectable-item");
-                       selectee.startselected = true;
-                       if (!event.metaKey) {
-                               selectee.$element.removeClass('ui-selected');
-                               selectee.selected = false;
-                               selectee.$element.addClass('ui-unselecting');
-                               selectee.unselecting = true;
-                               // selectable UNSELECTING callback
-                               self._trigger("unselecting", event, {
-                                       unselecting: selectee.element
-                               });
-                       }
-               });
-
-               $(event.target).parents().andSelf().each(function() {
-                       var selectee = $.data(this, "selectable-item");
-                       if (selectee) {
-                               var doSelect = !event.metaKey || !selectee.$element.hasClass('ui-selected');
-                               selectee.$element
-                                       .removeClass(doSelect ? "ui-unselecting" : "ui-selected")
-                                       .addClass(doSelect ? "ui-selecting" : "ui-unselecting");
-                               selectee.unselecting = !doSelect;
-                               selectee.selecting = doSelect;
-                               selectee.selected = doSelect;
-                               // selectable (UN)SELECTING callback
-                               if (doSelect) {
-                                       self._trigger("selecting", event, {
-                                               selecting: selectee.element
-                                       });
-                               } else {
-                                       self._trigger("unselecting", event, {
-                                               unselecting: selectee.element
-                                       });
-                               }
-                               return false;
-                       }
-               });
-
-       },
-
-       _mouseDrag: function(event) {
-               var self = this;
-               this.dragged = true;
-
-               if (this.options.disabled)
-                       return;
-
-               var options = this.options;
-
-               var x1 = this.opos[0], y1 = this.opos[1], x2 = event.pageX, y2 = event.pageY;
-               if (x1 > x2) { var tmp = x2; x2 = x1; x1 = tmp; }
-               if (y1 > y2) { var tmp = y2; y2 = y1; y1 = tmp; }
-               this.helper.css({left: x1, top: y1, width: x2-x1, height: y2-y1});
-
-               this.selectees.each(function() {
-                       var selectee = $.data(this, "selectable-item");
-                       //prevent helper from being selected if appendTo: selectable
-                       if (!selectee || selectee.element == self.element[0])
-                               return;
-                       var hit = false;
-                       if (options.tolerance == 'touch') {
-                               hit = ( !(selectee.left > x2 || selectee.right < x1 || selectee.top > y2 || selectee.bottom < y1) );
-                       } else if (options.tolerance == 'fit') {
-                               hit = (selectee.left > x1 && selectee.right < x2 && selectee.top > y1 && selectee.bottom < y2);
-                       }
-
-                       if (hit) {
-                               // SELECT
-                               if (selectee.selected) {
-                                       selectee.$element.removeClass('ui-selected');
-                                       selectee.selected = false;
-                               }
-                               if (selectee.unselecting) {
-                                       selectee.$element.removeClass('ui-unselecting');
-                                       selectee.unselecting = false;
-                               }
-                               if (!selectee.selecting) {
-                                       selectee.$element.addClass('ui-selecting');
-                                       selectee.selecting = true;
-                                       // selectable SELECTING callback
-                                       self._trigger("selecting", event, {
-                                               selecting: selectee.element
-                                       });
-                               }
-                       } else {
-                               // UNSELECT
-                               if (selectee.selecting) {
-                                       if (event.metaKey && selectee.startselected) {
-                                               selectee.$element.removeClass('ui-selecting');
-                                               selectee.selecting = false;
-                                               selectee.$element.addClass('ui-selected');
-                                               selectee.selected = true;
-                                       } else {
-                                               selectee.$element.removeClass('ui-selecting');
-                                               selectee.selecting = false;
-                                               if (selectee.startselected) {
-                                                       selectee.$element.addClass('ui-unselecting');
-                                                       selectee.unselecting = true;
-                                               }
-                                               // selectable UNSELECTING callback
-                                               self._trigger("unselecting", event, {
-                                                       unselecting: selectee.element
-                                               });
-                                       }
-                               }
-                               if (selectee.selected) {
-                                       if (!event.metaKey && !selectee.startselected) {
-                                               selectee.$element.removeClass('ui-selected');
-                                               selectee.selected = false;
-
-                                               selectee.$element.addClass('ui-unselecting');
-                                               selectee.unselecting = true;
-                                               // selectable UNSELECTING callback
-                                               self._trigger("unselecting", event, {
-                                                       unselecting: selectee.element
-                                               });
-                                       }
-                               }
-                       }
-               });
-
-               return false;
-       },
-
-       _mouseStop: function(event) {
-               var self = this;
-
-               this.dragged = false;
-
-               var options = this.options;
-
-               $('.ui-unselecting', this.element[0]).each(function() {
-                       var selectee = $.data(this, "selectable-item");
-                       selectee.$element.removeClass('ui-unselecting');
-                       selectee.unselecting = false;
-                       selectee.startselected = false;
-                       self._trigger("unselected", event, {
-                               unselected: selectee.element
-                       });
-               });
-               $('.ui-selecting', this.element[0]).each(function() {
-                       var selectee = $.data(this, "selectable-item");
-                       selectee.$element.removeClass('ui-selecting').addClass('ui-selected');
-                       selectee.selecting = false;
-                       selectee.selected = true;
-                       selectee.startselected = true;
-                       self._trigger("selected", event, {
-                               selected: selectee.element
-                       });
-               });
-               this._trigger("stop", event);
-
-               this.helper.remove();
-
-               return false;
-       }
-
-});
-
-$.extend($.ui.selectable, {
-       version: "1.8.2"
-});
-
-})(jQuery);
+(function(e){e.widget("ui.selectable",e.ui.mouse,{options:{appendTo:"body",autoRefresh:true,distance:0,filter:"*",tolerance:"touch"},_create:function(){var c=this;this.element.addClass("ui-selectable");this.dragged=false;var f;this.refresh=function(){f=e(c.options.filter,c.element[0]);f.each(function(){var d=e(this),b=d.offset();e.data(this,"selectable-item",{element:this,$element:d,left:b.left,top:b.top,right:b.left+d.outerWidth(),bottom:b.top+d.outerHeight(),startselected:false,selected:d.hasClass("ui-selected"),
+selecting:d.hasClass("ui-selecting"),unselecting:d.hasClass("ui-unselecting")})})};this.refresh();this.selectees=f.addClass("ui-selectee");this._mouseInit();this.helper=e("<div class='ui-selectable-helper'></div>")},destroy:function(){this.selectees.removeClass("ui-selectee").removeData("selectable-item");this.element.removeClass("ui-selectable ui-selectable-disabled").removeData("selectable").unbind(".selectable");this._mouseDestroy();return this},_mouseStart:function(c){var f=this;this.opos=[c.pageX,
+c.pageY];if(!this.options.disabled){var d=this.options;this.selectees=e(d.filter,this.element[0]);this._trigger("start",c);e(d.appendTo).append(this.helper);this.helper.css({"z-index":100,position:"absolute",left:c.clientX,top:c.clientY,width:0,height:0});d.autoRefresh&&this.refresh();this.selectees.filter(".ui-selected").each(function(){var b=e.data(this,"selectable-item");b.startselected=true;if(!c.metaKey){b.$element.removeClass("ui-selected");b.selected=false;b.$element.addClass("ui-unselecting");
+b.unselecting=true;f._trigger("unselecting",c,{unselecting:b.element})}});e(c.target).parents().andSelf().each(function(){var b=e.data(this,"selectable-item");if(b){var g=!c.metaKey||!b.$element.hasClass("ui-selected");b.$element.removeClass(g?"ui-unselecting":"ui-selected").addClass(g?"ui-selecting":"ui-unselecting");b.unselecting=!g;b.selecting=g;(b.selected=g)?f._trigger("selecting",c,{selecting:b.element}):f._trigger("unselecting",c,{unselecting:b.element});return false}})}},_mouseDrag:function(c){var f=
+this;this.dragged=true;if(!this.options.disabled){var d=this.options,b=this.opos[0],g=this.opos[1],h=c.pageX,i=c.pageY;if(b>h){var j=h;h=b;b=j}if(g>i){j=i;i=g;g=j}this.helper.css({left:b,top:g,width:h-b,height:i-g});this.selectees.each(function(){var a=e.data(this,"selectable-item");if(!(!a||a.element==f.element[0])){var k=false;if(d.tolerance=="touch")k=!(a.left>h||a.right<b||a.top>i||a.bottom<g);else if(d.tolerance=="fit")k=a.left>b&&a.right<h&&a.top>g&&a.bottom<i;if(k){if(a.selected){a.$element.removeClass("ui-selected");
+a.selected=false}if(a.unselecting){a.$element.removeClass("ui-unselecting");a.unselecting=false}if(!a.selecting){a.$element.addClass("ui-selecting");a.selecting=true;f._trigger("selecting",c,{selecting:a.element})}}else{if(a.selecting)if(c.metaKey&&a.startselected){a.$element.removeClass("ui-selecting");a.selecting=false;a.$element.addClass("ui-selected");a.selected=true}else{a.$element.removeClass("ui-selecting");a.selecting=false;if(a.startselected){a.$element.addClass("ui-unselecting");a.unselecting=
+true}f._trigger("unselecting",c,{unselecting:a.element})}if(a.selected)if(!c.metaKey&&!a.startselected){a.$element.removeClass("ui-selected");a.selected=false;a.$element.addClass("ui-unselecting");a.unselecting=true;f._trigger("unselecting",c,{unselecting:a.element})}}}});return false}},_mouseStop:function(c){var f=this;this.dragged=false;e(".ui-unselecting",this.element[0]).each(function(){var d=e.data(this,"selectable-item");d.$element.removeClass("ui-unselecting");d.unselecting=false;d.startselected=
+false;f._trigger("unselected",c,{unselected:d.element})});e(".ui-selecting",this.element[0]).each(function(){var d=e.data(this,"selectable-item");d.$element.removeClass("ui-selecting").addClass("ui-selected");d.selecting=false;d.selected=true;d.startselected=true;f._trigger("selected",c,{selected:d.element})});this._trigger("stop",c);this.helper.remove();return false}});e.extend(e.ui.selectable,{version:"1.8.2"})})(jQuery);
 (function(e){e.widget("ui.selectable",e.ui.mouse,{options:{appendTo:"body",autoRefresh:true,distance:0,filter:"*",tolerance:"touch"},_create:function(){var c=this;this.element.addClass("ui-selectable");this.dragged=false;var f;this.refresh=function(){f=e(c.options.filter,c.element[0]);f.each(function(){var d=e(this),b=d.offset();e.data(this,"selectable-item",{element:this,$element:d,left:b.left,top:b.top,right:b.left+d.outerWidth(),bottom:b.top+d.outerHeight(),startselected:false,selected:d.hasClass("ui-selected"),
 selecting:d.hasClass("ui-selecting"),unselecting:d.hasClass("ui-unselecting")})})};this.refresh();this.selectees=f.addClass("ui-selectee");this._mouseInit();this.helper=e("<div class='ui-selectable-helper'></div>")},destroy:function(){this.selectees.removeClass("ui-selectee").removeData("selectable-item");this.element.removeClass("ui-selectable ui-selectable-disabled").removeData("selectable").unbind(".selectable");this._mouseDestroy();return this},_mouseStart:function(c){var f=this;this.opos=[c.pageX,
 c.pageY];if(!this.options.disabled){var d=this.options;this.selectees=e(d.filter,this.element[0]);this._trigger("start",c);e(d.appendTo).append(this.helper);this.helper.css({"z-index":100,position:"absolute",left:c.clientX,top:c.clientY,width:0,height:0});d.autoRefresh&&this.refresh();this.selectees.filter(".ui-selected").each(function(){var b=e.data(this,"selectable-item");b.startselected=true;if(!c.metaKey){b.$element.removeClass("ui-selected");b.selected=false;b.$element.addClass("ui-unselecting");
@@ -555,17 +310,12 @@ d,e)*0.5+b;return f.easing.easeOutBounce(c,a*2-e,0,d,e)*0.5+d*0.5+b}})}(jQuery);
 (function(c){c.effects.fold=function(a){return this.queue(function(){var b=c(this),j=["position","top","left"],d=c.effects.setMode(b,a.options.mode||"hide"),g=a.options.size||15,h=!!a.options.horizFirst,k=a.duration?a.duration/2:c.fx.speeds._default/2;c.effects.save(b,j);b.show();var e=c.effects.createWrapper(b).css({overflow:"hidden"}),f=d=="show"!=h,l=f?["width","height"]:["height","width"];f=f?[e.width(),e.height()]:[e.height(),e.width()];var i=/([0-9]+)%/.exec(g);if(i)g=parseInt(i[1],10)/100*
 f[d=="hide"?0:1];if(d=="show")e.css(h?{height:0,width:g}:{height:g,width:0});h={};i={};h[l[0]]=d=="show"?f[0]:g;i[l[1]]=d=="show"?f[1]:0;e.animate(h,k,a.options.easing).animate(i,k,a.options.easing,function(){d=="hide"&&b.hide();c.effects.restore(b,j);c.effects.removeWrapper(b);a.callback&&a.callback.apply(b[0],arguments);b.dequeue()})})}})(jQuery);
 ;/*
- * jQuery UI Effects Highlight 1.8.2
- *
- * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
- * Dual licensed under the MIT (MIT-LICENSE.txt)
- * and GPL (GPL-LICENSE.txt) licenses.
- *
- * http://docs.jquery.com/UI/Effects/Highlight
- *
- * Depends:
- *     jquery.effects.core.js
+ * jQuery Highlight plugin
+ * Based on highlight v3 by Johann Burkard
+ * http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
+ * Copyright (c) 2009 Bartek Szopka http://bartaz.github.com/sandbox.js/jquery.highlight.html
+ * Licensed under MIT license. 
  */
-(function(b){b.effects.highlight=function(c){return this.queue(function(){var a=b(this),e=["backgroundImage","backgroundColor","opacity"],d=b.effects.setMode(a,c.options.mode||"show"),f={backgroundColor:a.css("backgroundColor")};if(d=="hide")f.opacity=0;b.effects.save(a,e);a.show().css({backgroundImage:"none",backgroundColor:c.options.color||"#ffff99"}).animate(f,{queue:false,duration:c.duration,easing:c.options.easing,complete:function(){d=="hide"&&a.hide();b.effects.restore(a,e);d=="show"&&!b.support.opacity&&
-this.style.removeAttribute("filter");c.callback&&c.callback.apply(this,arguments);a.dequeue()}})})}})(jQuery);
-;
\ No newline at end of file
+jQuery.extend({highlight:function(a,c,b,e){if(a.nodeType===3){if(c=a.data.match(c)){b=document.createElement(b||"span");b.className=e||"highlight";a=a.splitText(c.index);a.splitText(c[0].length);e=a.cloneNode(true);b.appendChild(e);a.parentNode.replaceChild(b,a);return 1}}else if(a.nodeType===1&&a.childNodes&&!/(script|style)/i.test(a.tagName)&&!(a.tagName===b.toUpperCase()&&a.className===e))for(var d=0;d<a.childNodes.length;d++)d+=jQuery.highlight(a.childNodes[d],c,b,e);return 0}});
+jQuery.fn.unhighlight=function(a){var c={className:"highlight",element:"span"};jQuery.extend(c,a);return this.find(c.element+"."+c.className).each(function(){var b=this.parentNode;b.replaceChild(this.firstChild,this);b.normalize()}).end()};
+jQuery.fn.highlight=function(a,c){var b={className:"highlight",element:"span",caseSensitive:false,wordsOnly:false};jQuery.extend(b,c);if(a.constructor===String)a=[a];a=jQuery.grep(a,function(f){return f!=""});if(a.length==0)return this;var e=b.caseSensitive?"":"i",d="("+a.join("|")+")";if(b.wordsOnly)d="\\b"+d+"\\b";var g=RegExp(d,e);return this.each(function(){jQuery.highlight(this,g,b.element,b.className)})};
\ No newline at end of file
index a23976ec14fb8f3e0eec37bb51a363a2246bc131..34cd2cc8d88ea3551a427752a08494ac053576e0 100755 (executable)
@@ -5,8 +5,8 @@
  *
  */
 
-$(document).ready(function() {
-
+$(document).ready(function() {  
+    $("#showHideHighlight").button(); //add jquery button styling to 'Go' button
     //Generate tabs in nav-pane with JQuery
     $(function() {
             $("#tabs").tabs({
@@ -37,12 +37,14 @@ $(document).ready(function() {
        });
 
     //'ui-tabs-1' is the cookie name which is used for the persistence of the tabs.(Content/Search tab)
-    if ($.cookie('ui-tabs-1') === '1') { 
+    if ($.cookie('ui-tabs-1') === '1') {    //search tab is visible 
         if ($.cookie('textToSearch') != undefined && $.cookie('textToSearch').length > 0) {
             document.getElementById('textToSearch').value = $.cookie('textToSearch');
             Verifie('diaSearch_Form');
+            searchHighlight($.cookie('textToSearch'));
+            $("#showHideHighlight").css("display","block");
         }
-    } 
+    }
 
     syncToc(); //Synchronize the toc tree with the content pane, when loading the page.
     $("#doSearch").button(); //add jquery button styling to 'Go' button
@@ -110,4 +112,45 @@ function showHideToc() {
         leftNavigation.css("display","block");
         showHideButton.attr("title", "Show the TOC Tree");
     }
+}
+
+/**
+ * Code for searh highlighting
+ */
+var highlightOn = true;
+function searchHighlight(searchText) {
+    highlightOn = true;
+    if (searchText != undefined) {
+        var wList;
+        var sList = new Array();    //stem list 
+        //Highlight the search terms
+        searchText = searchText.toLowerCase().replace(/<\//g, "_st_").replace(/\$_/g, "_di_").replace(/\.|%2C|%3B|%21|%3A|@|\/|\*/g, " ").replace(/(%20)+/g, " ").replace(/_st_/g, "</").replace(/_di_/g, "%24_")
+        searchText = searchText.replace(/  +/g, " ");
+        searchText = searchText.replace(/ $/, "").replace(/^ /, "");
+
+        wList = searchText.split(" ");
+        $("#content").highlight(wList); //Highlight the search input
+
+        //Highlight the stems
+        for (var i = 0; i < wList.length; i++) {
+            var stemW = stemmer(wList[i]);
+            sList.push(stemW);
+        }
+        $("#content").highlight(sList); //Highlight the search input's all stems
+    } 
+}
+
+function searchUnhighlight(){
+    highlightOn = false;
+     //unhighlight the search input's all stems
+    $("#content").unhighlight();
+    $("#content").unhighlight();
+}
+
+function toggleHighlight(){
+    if(highlightOn) {
+        searchUnhighlight();
+    } else {
+        searchHighlight($.cookie('textToSearch'));
+    }
 }
\ No newline at end of file
index b456f894cc4c1a914df8bb330c9457010baea55c..ebcb53cb361d26c52b9e0d676cef83bb0f422c68 100755 (executable)
@@ -56,7 +56,7 @@ function Effectuer_recherche(expressionInput) {
     //DisplayWaitingMessage();\r
 \r
     /*data initialisation*/\r
-    searchFor = ""       // expression en lowercase et sans les caracteres speciaux\r
+    searchFor = "";       // expression en lowercase et sans les caracteres speciaux\r
     //w = new Object();  // hashtable, key=word, value = list of the index of the html files\r
     scriptLetterTab = new scriptfirstchar(); // Array containing the first letter of each word to look for\r
     var scriptsarray = new Array(); // Array with the name of the scripts to load\r
index 91d3b586909ab9a09ac29b6ca76d1396a238f260..4a0ff3f9bce1aee809e141387afb3913fad100db 100755 (executable)
     </xsl:template>
 
     <xsl:template name="user.header.content">
-            <a id="showHideButton" onclick="showHideToc();"
-               class="pointLeft" title="Hide TOC tree" style="padding-top:3px; padding-bottom:3px;">.</a>
+        <table>
+            <tr>
+                <td>
+                    <a id="showHideButton" onclick="showHideToc();"
+                       class="pointLeft" title="Hide TOC tree" style="padding-top:3px; padding-bottom:3px;">.
+                    </a>
+                </td>
+                <td>
+                    <input type="button" id="showHideHighlight"
+                           style="display:none;padding-top:3px; padding-bottom:3px;"
+                           class="highlightButton" value="H" onclick="toggleHighlight();"/>
+                </td>
+            </tr>
+        </table>
     </xsl:template>
 
     <xsl:template name="user.footer.navigation">