Cool Javascript Find On This Page...

This javascript adds a button called "Find on This Page..." to your HTML document. When the button is pressed a pop-up window (DIV) comes on the HTML document and asks for the text to search for and then the user can press "Next" or "Prev" to search for all the occurrences of the search term.

This is similar to asking your users to press CTRL+F. But lets face it, it is much nicer to have a button for finding on the page. In Netscape and Mozilla Firefox there is a built-in find function with it's own search window. So this Javascript just calls the function window.find() when the user presses the "Find on This Page..." button, if it detects Netscape or Firefox.

In Internet Explorer we do not have the window.find() function so we have to create floating DIV for a search window. Then we use Internet Explorer's built-in functions for creating text ranges ( createTextRange() ) and for finding search terms in those ranges ( findText(string) ). The script also uses the getBookmark() function to save positions in the text range so the user can search forwards and backwards.

Features

• Find on this page function for IE, Netscape and Firefox.
• Can search forwards and backwards on the page.
• Jumps to and highlights the found search term.
• The pop-up is a DIV instead of an actual window so that unintelligent pop-up blockers will not block it.
• The pop-up DIV always stays in view even if the page scrolls.
• Added mouse functions to be able to move the DIV around the screen with the mouse.
• Added keyboard functions so the user can press ENTER to search for the next occurrence of the word or term.

To use the script just right click on the file name and then click on "Save target as...". find.js

Then in your HTML document paste the following code where you want the "Find on this Page..." button to appear:
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript" SRC="find.js"> </SCRIPT>

Notes:

Update: 9/18/07
This script now uses the same DIV in Firefox and Netscape. I figured out how to use the window.find(string, caseSensitive, searchBackwards) function in Firefox and Netscape. It works great in Netscape and we just have to use these two functions to search forwards and backwards:
window.find(string, false, false); // Search Forwards
window.find(string, false, true); // Search Backwards

You can still choose to use the built-in search window with this script by changing the variable mozilla_opt to 0. However certain versions of Netscape don't seem to find the search terms when you call the built-in search window with window.find().

For Firefox I had to add a few functions because Firefox looses focus on the selection when you press the Next or Prev buttons. So it could only find the first occurrence of the search term over and over. So for firefox I had to add the following functions to record the highlighted selection:
sel = window.getSelection(); // get selection
range = sel.getRangeAt(0); // get object

Then I had to use the following functions to highlight the recorded search term again after a button was pressed:
sel = window.getSelection(); // get selection
if(sel.rangeCount > 0) sel.removeAllRanges(); // remove all ranges
sel.addRange(range); // add last highlighted range

There does not seem to be a find function for Safari, so this button does not work in Safari. If you know of a find function for Safari then please let me know.