Note: This is an old version of this script. The new version
has support for more browsers and devices including iPhone and Android.
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 can just call 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 Firefox and Safari.
- 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...".
dlc_b
Download
Downloaded 0 times.
Please make a donation to reveal the download link.
Then in your HTML document paste the following code where you
want the "Find on this Page..." button to appear:
Notes:
Update 6/16/2014
Version 2.3e - Bug Fix - The below bug fix for IE 11 was not working. Since
IE 11 no longer supports detecting IE with document.all the code has been
changed by detecting if the browser supports window.find starting on
line 51. So far no versions of IE support window.find, but Chrome and Firefox do.
Update 11/4/2013
Version 2.3d - Bug Fix - Internet Explorer 11 was not working with find2.js.
Updated lines around line 43 to fix detection of IE 11 because IE 11 removed
support for detection of document.all.
Thanks to Warren Yates for the fix.
Update 9/14/2013
Version 2.3c - Bug Fix - An HTML 5 doctype of <!DOCTYPE html> was causing
current_bottom to be set incorrectly in the move_window() function. So the
window was constantly jumping up and down. Fixed by replacing current_bottom and
current_right declarations with var current_bottom = (window.innerHeight ||
document.documentElement.clientHeight || document.body.clientHeight) + current_top;
Hopefully this does not cause a problem with certain browsers and/or doctypes.
Update 8/22/2013
Version 2.3b - Bug Fix - The "next" button was displaying "Found" and "Not Found",
but the "Previous" button was displaying "true". Changed "Previous" to display
"Found" and "Not Found".
Update 7/23/2013
Version 2.3 - Bug Fix - Update for Internet Explorer. If the webpage has a menu
system with display:none elements and IE's findText function finds text in this
menu system then when we try to highlight the text with txt.select(); IE throws an error:
Could not complete the operation due to error 800a025e. Fixed the error by adding
try and catch around line 103.
Update 10/16/2012
Version 2.2 - Bug Fix - Update for Firefox. No longer tries to get a selection
of the text if the search term was not found. This might be able to avoid a bug
in Firefox with getRangeAt(0);
Update 3/29/11
version 2.1 - Bug fix - In firefox the window.find function was not searching
at the beginning of the document, but where the "find on this page" button was
initially called with the find2.js file. This has been fixed by changing line
477 of the script to use document.body.insertBefore(findwindow, document.body.firstChild);
instead of document.body.appendChild(findwindow);
Update 1/28/2011
version 2.0 - Major revision. Now the findwindow DIV is created dynamically
in javascript and attached to the body of the DOM. This eliminates a problem
of the find window not being able to determine its location if the find button
and div is nested in many other divs.
Update 8/9/2010
Fixed a bug where the text search would find the text in
the findwindow div. Fixed by making the div hidden while searching
and then making it visible afterward. This also fixed a bug in
Firefox: uncaught exception: [Exception... "Component returned
failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsISelection.getRangeAt]"
which happens when the range is selected with getRangeAt on
an <input type='text' element or a <textarea element. So this
exception may still appear in Firefox's error console if a search is made
on your page and the text is found in one of those html elements. (v. 1.3c)
Update 9/7/2009
Now there is a version of the find script that searches
back at the beginning of the document if the search term
is not found at the end. This loop searching version can
be downloaded here:
dlc_b
Download
Downloaded 0 times.
Please make a donation to reveal the download link.
Update 6/5/2009
This script seems to work in Safari now. But the find button
does not even show up in Opera browser.
There was a bug in Firefox where if the find box was
blank and the user pressed "Next" then the default Firefox
find box would come up. I believe I have solved this problem
by adding a check to see if the find box is empty. I
added this line to findit() and findprev() functions
as follows:
if (string != "")
test.innerHTML = window.find(string, false, false);
Update 5/30/2008
version 1.3b - Changed all html code to lowercase to work with a more
strict doctype and xhtml. Also changed <br> tags to
<br /> .
Update: 9/18/2007
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
loses 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
|