Cool Javascript Find On This Page...

v. 1.2

Subscribe to Internet Tips and Tools Feed
Links
Javascript Progress Bar
Javascript Play MP3 Song
Home 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:

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.

Back to www.seabreezecomputers.com
Subscribe to Internet Tips Feed

View Comments

User Comments

There are 8 comments.

Displaying first 25 comments.

1. Posted By: John - - December 3, 2007, 8:55 pm
I love the script but I'm no fan of the floating DIV. I've been using a similar find-in-page script that has fewer features (no "Find Previous," for example) but works well in frames, which is what I use. The search text is entered in one frame, and the text to be searched lives in another frame.

Is there any chance that this script could be adapted for a frames environment?

2. Posted By: Jeff - - December 4, 2007, 10:38 am
John,

I'm sure this script could be changed to use frames. You would just have to turn off the floating DIV functions and put it in a frames instead.

3. Posted By: John - - December 5, 2007, 9:56 am
Hi Jeff,

Well, I gave it a try and I'm getting all sorts of errors. I think the problem is that the script doesn't know where to find the text to be searched (the other script that I mentioned required me to change a variable to include the frame name where the text to be searched was located). Is there something that you could add to the script so that a frame name could be added that would eliminate these errors? Thanks so much for whatever help you can offer.

4. Posted By: Will - - December 5, 2007, 2:25 pm
Hi, great bit of javascript!

I like how the DIV opens at the top of the page but it would be so much better if it dropped down to stay in view when found text is lower down the page. (does that make sense?)

Basically when searching for text the page scrolls down to display the found text, at this point the DIV needs to be re-positioned automatically (to the top of what is now in view).

That way when what you can quickly search for another term without scrolling right back up to the top of the page, (lots of users will not know to press home pgup etc.

Let me know what you think.

Will.

5. Posted By: junji - - December 27, 2007, 1:15 pm
you mean something like this:

greenhotels.com/members_beta1.html

just use arizona to see the CSS works

6. Posted By: Salvatore Bancheri - - January 5, 2008, 4:54 pm
I like the find script but it does not work in my page. The pop-up window is to big... and it does not move when I scroll down the rest of the page.

Any idea what I need to do?

7. Posted By: Stewart O'Marah - - January 10, 2008, 9:37 am
The Script works well enough until I put in a search keyword that is in my expandable horizontal javascript navigation menu, then it throws an 800a025e error and does not continue searching after that. Is there a way to omit the javascript from the search?

example of menu option that causes issue:
createMenu("Resources", "Resources");
addMenuItem("Resources", "HP Legal Web", "http://legalweb.corp.hp.com/legal/");
addMenuItem("Resources", "Ethics and Compliance Office", "http://ca.corp.hp.com/cser/obp/");

8. Posted By: Kika - - January 31, 2008, 11:26 am
Hi All,

This script is great! Thanks a lot. I am currently using it and it is flicking in my browser...Anybody has the same issue? If so, How did fixed it?

Thanks,
Kika