I was once asked to implement a version of this script that would turn off the
highlighting when a web browser refreshed the page, and so I added some code to the script
to make that possible. The current script has the option of toggling the highlighting on
and off every time the browser is refreshed as long as the browser supports session
cookies. See Methods for Detecting Page Refreshes with JavaScript for details on the mechanism
that detects the page refreshes.
To turn on this feature, replace every SearchHighlight(); below with a
SmartHighlight(); and add an onLoad="JavaScript:SmartHLUnload();" to the
<body> tags below. Examples are given below.
Add to your <head>...</head> section the following
script and style lines. Be sure to change searchhi.js
so it points to wherever the script is located on your web page. Again, if you have no place
to host this JavaScript, link to copy that I make available at the URL given above.
Also change the style background color to be whatever you want the color of your
"highlighter" to be.
<style><!--
SPAN.searchword { background-color:yellow; }
// -->
</style>
<script src="searchhi.js" type="text/javascript" language="JavaScript"></script>
To get the script to run, an onLoad needs to be added to the opening
<body> tag that runs the JavaScript SearchHighlight()
function. For example:
<body onLoad="JavaScript:SearchHighlight();">
or, if you want to toggle highlighting on every refresh, use
<body onLoad="JavaScript:SmartHighlight();" onUnload="JavaScript:SmartHLUnload();">
This should be sufficient to make the web page highlight search terms when linked
from search results.
It may be a good idea to put a text input on your page that allows users to select
words to highlight. Below is an example. Type a word in the textbox and submit. The result
will be a copy of this page with that word highlighted.
Notice that this textbox also keeps track of all the current words being
highlighted.
To make this possible, the script must be added to the web page in a
slightly different way. DO NOT DO THE PREVIOUS INSTRUCTIONS.
Instead, follow the instructions below, which have been broken into
an Option 1 and an Option 2 which
are nearly identical. Option 1 is the configuration
that does not do the "refresh detection" described above.
Option 2 enables this detection.
Option 1: With No Refresh Detection
Add the following lines to the <head>...</head> section. Note that
the searchhi document name is suggested,
but it can be changed. It just needs to be changed here and in the form in
the main body (see below).
<style><!--
SPAN.searchword { background-color:yellow; }
// -->
</style>
<script src="searchhi.js" type="text/javascript" language="JavaScript"></script>
<script language="JavaScript"><!--
function loadSearchHighlight()
{
SearchHighlight();
document.searchhi.h.value = searchhi_string;
if( location.hash.length > 1 ) location.hash = location.hash;
}
// -->
</script>
Additionally, add this DIFFERENT onLoad to the
<body> opening tag:
<body onLoad="JavaScript:loadSearchHighlight();">
Now add a simple form like this one to your main content. This particular form will
produce a text box and a submit button identical to the example give above.
<form method="get" name="searchhi">
<input type="text" name="h" />
<input type="submit" value="Go!" />
</form>
And those are all the changes that are needed.
Option 2: With Refresh Detection
The following instructions are nearly identical to the ones in Option 1.
However, take special notice that all references to
SearchHighlight() were changed to SmartHighlight(). Additionally, notice the introduction of
SmartHLUnload() into the
<body> tag and the introduction of NotRefreshHL() into the
<form> tag.
Add the following lines to the <head>...</head> section. Note that
the searchhi document name is suggested,
but it can be changed. It just needs to be changed here and in the form in
the main body (see below).
<style><!--
SPAN.searchword { background-color:yellow; }
// -->
</style>
<script src="searchhi.js" type="text/javascript" language="JavaScript"></script>
<script language="JavaScript"><!--
function loadSearchHighlight()
{
SmartHighlight();
document.searchhi.h.value = searchhi_string;
if( location.hash.length > 1 ) location.hash = location.hash;
}
// -->
</script>
Additionally, add this DIFFERENT onLoad to the
<body> opening tag:
<body onLoad="JavaScript:loadSearchHighlight();" onUnload="JavaScript:SmartHLUnload();">
Now add a simple form like this one to your main content. This particular form will
produce a text box and a submit button identical to the example give above.
<form method="get" name="searchhi" onSubmit="JavaScript:NotRefreshHL();">
<input type="text" name="h" />
<input type="submit" value="Go!" />
</form>
And those are all the changes that are needed.