Ted's Home Page Get Firefox! Get Thunderbird! Tuesday, October 23, 2018, 11:42 pm GMT
    Home :: Contact :: Blog :: Updates (Thu, Sep 29) :: Search :: Highlight Linux :: Apache HTTPD :: PHP :: VIM :: OCS
          email me email me
 
[Ted and a baby giraffe]
 
Contact Me
Résumé/CV
More Information
 
Faculty Job Search
Industry Job Search
Publication Directory
Research/Graduate
Work
My Teaching Sites
 
General Posts
(including
LaTeX
templates)
 
Utilities
 
Public hg repos
Public git repos
 
Links
The Blog
 
Guestbook
 
 
 
 
   
 
 
  email me
email me
email me
email me


Simple In-page Highlighting :: Using JavaScript on Client-Side



Introduction

Both

show examples of the JavaScript in searchhi.js that highlight words on a page. In both cases the script can be used to highlight words selected by a text field in a form on the page. However, because the script was originally intended for more advanced purposes, the configuration also has the script doing other things in the background that may not be needed by some people.

Here I show how to use searchhi.js in a much slimmer way to do vanilla client-side in-page word highlighting. However, some people may be more comfortable with something even slimmer, so here I also introduce searchhi_slim.js and the way to use it for very slim and very simple client-side JavaScript highlighting.

The end goal
The goal is to setup a form like the one below that searches through a document for some words and highlights them with some special background color. Note that if you refresh your webpage, the highlighting will disappear just as if you had selected "Remove Highlight."

Highlight words:

Using searchhi.js in a slim way
First, setup your highlighting color and include the script. Add the following lines to your <head>...</head> section. If you download the script yourself, change the <script> line to point to wherever you put the script.
<style><!-- 
    SPAN.searchword { background-color:yellow; }
    // -->
</style>
<script src="http://links.tedpavlic.com/js/searchhi.js" type="text/javascript" language="JavaScript"></script>

Then, somewhere in the <body>...</body> of your document, place a search form similar to the following. (note that you can leave out any of these buttons and change any of the text)

<form name="searchhi" action="" onSubmit="localSearchHighlight('?h=' + document.searchhi.h.value); return false;">
    <p>Highlight words: <input name="h" value="" /></p>
    <input type="button" value="Highlight" onclick="localSearchHighlight('?h=' + document.searchhi.h.value);" />
    <input type="button" value="Remove Highlight" onclick="unhighlight(document.getElementsByTagName('body')[0])" />
</form>

This should achieve the goal.

Using the always slim searchhi_slim.js
First, setup your highlighting color and include the script. Add the following lines to your <head>...</head> section. If you download the script yourself, change the <script> line to point to wherever you put the script.
<style><!-- 
    SPAN.searchword { background-color:yellow; }
    // -->
</style>
<script src="http://links.tedpavlic.com/js/searchhi_slim.js" type="text/javascript" language="JavaScript"></script>

Then, somewhere in the <body>...</body> of your document, place a search form similar to the following. (note that you can leave out any of these buttons and change any of the text) (note that the syntax here is slightly different from the syntax above. A number of '?h=' have been left out in this slim version.

<form name="searchhi" action="" onSubmit="localSearchHighlight(document.searchhi.h.value); return false;">
    <p>Highlight words: <input name="h" value="" /></p>
    <input type="button" value="Highlight" onclick="localSearchHighlight(document.searchhi.h.value);" />
    <input type="button" value="Remove Highlight" onclick="unhighlight(document.getElementsByTagName('body')[0])" />
</form>

This should achieve the goal.

Additional Concern: Microsoft Incompetence and Microsoft Internet Explorer

There is an additional note that might be important to some but will most likely not have any affect on the average user of this script. Due to incompetence by Microsoft engineers, in some versions of Microsoft Internet Explorer, sometimes the dynamic generation of the highlighting backgrounds will take anchors out of focus. That is, if you have a webpage that has "anchors" or "bookmarks" on it so that on entry to the webpage position the reader at a particular spot on the page, the highlighting process can move them away from that spot. If you are experiencing this trouble, all you have to do is refresh location.hash with itself after the highlighting is complete. To do this, add the line

if( location.hash.length > 1 ) location.hash = location.hash;

to the end of each of the three JavaScript events shown in the examples above (however, put it before the return false; in the onSubmit events). For example

<form name="searchhi" action="" onSubmit="localSearchHighlight('?h=' + document.searchhi.h.value); 
                                          if( location.hash.length > 1) location.hash = location.hash; return false;">
Additional improvements
Feel free to add your own customizations. For example, you may want to add a document.searchhi.reset(); document.searchhi.h.focus(); to the end of some of the handlers. Take the form below as an example. Its slim source:
<form name="searchhi" action="" onSubmit="localSearchHighlight(document.searchhi.h.value); 
	                                                  document.searchhi.reset(); document.searchhi.h.focus(); return false;">
    <p>Highlight words: <input name="h" value="" /></p>
    <input type="button" value="Highlight" onclick="localSearchHighlight(document.searchhi.h.value); 
                                                       document.searchhi.reset(); document.searchhi.h.focus();" />
    <input type="button" value="Remove Highlight" onclick="unhighlight(document.getElementsByTagName('body')[0]); 
                                                              document.searchhi.reset(); document.searchhi.h.focus();" />
</form>
The new form:

Highlight words:

You may also want to try things like writing some JavaScript to execute the unhighlight if the text field is empty and the highlight button was clicked (or the form was submitted).

 


appalling appalling
appalling appalling
email me email me
 
1045807 hits
(437 today)
 
Terms of Use
Ted Pavlic <ted@tedpavlic.com>   appalling appalling appalling appalling email me email me GPG Public Key: D/L, View, Ubuntu, MIT, PGP (verified) (ID: E1E66F7C) This Page Last Updated on Wednesday, June 04, 2008, 3:34 pm GMT