Cool Javascript Find on this Page...
Last updated on
((( spellific )))
Practice spelling while playing a fun word game!
Click here to play
Speech Recognition Anywhere
  • Type emails with your voice
  • Write documents with your voice
  • Control the Internet with your voice
  • Chrome Extension
Reconocimiento de voz en cualquier lugar
  • Escribe correos electrónicos con tu voz
  • Escribe documentos con tu voz
  • Controla la Internet con tu voz
  • Extensión de Chrome
Spracherkennung Allerorts
  • Geben Sie E-Mails mit Ihrer Stimme ein
  • Schreiben Sie Dokumente mit Ihrer Stimme
  • Steuern Sie das Internet mit Ihrer Stimme
  • Chrome-Erweiterung
Reconnaissance de la parole
  • Tapez des e-mails avec votre voix
  • Écrivez des documents avec votre voix
  • Contrôlez l'Inernet avec votre voix
  • Extension Chrome
Riconoscimento vocale ovunque
  • Digita e-mail con la tua voce
  • Scrivi documenti con la tua voce
  • Controlla Internet con la tua voce
  • Estensione Chrome
どこでも
音声認識
  • あなたの声で文書を書く
  • あなたの声でメールを入力してください
  • 音声でインターネットをコントロール
  • Chrome拡張機能
语音识别
无处不在
  • 用你的声音写文件
  • 用您的声音输入电子邮件
  • 用你的声音控制互联网
  • Chrome 扩展程序
語音識別
無處不在
  • 用你的聲音寫文件
  • 用您的聲音輸入電子郵件
  • 用你的聲音控制互聯網
  • Chrome 擴展程序
Subscribe to Internet Tips and Tools Feed
f Share
-
G+ Share
-
Tweet
-
in Share
-
P in it
-
Quick Jump
Features
Download
Comments
Links
Javascript Instant Dark Mode
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 of the occurrences of the search term.

New as of 5/30/2016!! I just finished writing a Fixed Position Edition of the Cool Javascript Find on this page script. It displays a button that stays locked to the bottom right corner of the screen. The button will have a magnifying glass on it or the word "Find" for older browsers.

New as of 7/16/2014!! This javascript has had an almost complete rewrite of the searching and highlighting functions. The script no longer uses WebKit's window.find() function or Internet Explorer's createTextRange() and findText() functions. Instead the script now traverses all elements in the document or in the variable find_root_node specified such as a div.
Example:
var find_root_node = 'mydiv'; // id of div to search

Now all occurrences of the search term in the document are highlighted and the user can jump to each highlight with the "Next" and "Prev" buttons or search for a new search term in which case the previous search phrases are unhighlighted first.

If you need the previous "Find on this page..." script then click here. The previous version worked in Internet Explorer, Firefox, Chrome, Netscape, Safari and Android but it did not work in iPhone or iPad iOS or in Opera. The old version of this script also did not highlight every occurrence of the search term in the document. Instead it would only highlight the next match when "Next" was pressed.

Features

  • Find on this page function for IE, Chrome, Opera, Android, iPhone, 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.
  • Now includes a radio button to choose site search or page search.
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:

All matches are currently highlighted in yellow and the current selection is highlighted in orange. You can change the highlighting by creating classes called .highlight and .find_selected as shown in the box below:

Notes:

Update 7/15/2024
Version 5.4j - Now automatically opens <details> tags if the current find is found within it.

Update 8/31/2022
Version 5.4i - Added new option called find_start_at_scroll. If set to true or 1 then it will start finding the search text at the current scroll position height instead of at the beginning of the document. Also the selection of the last highlighted find is now unselected when starting a new find search. Also the user can now scroll the find window even if it is position fixed with find_window_fixed = 1;

Update 8/23/2021
Version 5.4h - Improvements to how the find window is displayed including: Closing X is bigger. More elements on one line. Width of find window changed from 245 to 255.

Update 8/17/2021
Version 5.4g - Mobile device improvements: Added font-size:16px to search text box to try and prevent smaller phones from zooming in on text box focus. It works sometimes but still zooms in a little bit on some smaller iPhones. Added code to prevent mobile devices from scrolling the page when the user is trying to move the find window with their finger. Also added title attributes of "Find Previous" and "Find Next" to the buttons for accessibility.

Update 8/16/2021
Version 5.4f - Fixed a bug where Chrome for Android was not scrolling to first find because the keyboard was apparently closing too slowly. So added a delay before scrolling to the found text. Also added option to keep find window fixed at top of screen instead of letting the user move it with the mouse and having it bounce back on the screen when the user scrolls. Also now the search can start by using the previous button and not just the next button or the enter key. Also changed the buttons from Find Prev and Find Next to < and > .

Updated 12/15/2020
Version 5.4e - Increased z-index and added branding. Fixed styles for closing X

Update 8/5/2019
Version 5.4d - Changed scrollIntoView() code to be able to scroll to the next found match better if the scrolling element in your document is not the body element. Also will use smooth scrolling and put found match in middle of screen if your browser supports it and the found match is not already on the screen. (isOnScreen() and scrollToPosition())

Update 8/5/2019
Version 5.4c - Bug Fix in Firefox 68. Firefox was sometimes having the error: "InvalidAccessError: A parameter or an operation is not supported by the underlying object" on line 703 where the script is checking for highlight rules in the styleSheets. This is an old Firefox bug that they fixed at one time but it looks like they have it again in Version 68. It happens when Firefox sometimes starts processing JavaScript before all the styleSheets are loaded. If there is a styleSheet in the HTML code after the JavaScript file being processed then it breaks the operation of the code. I believe the bug is fixed by using a try and catch statement so that the code does not break.

Update 7/2/2019
Verison 5.4b - Bug fix - Changed searching in input elements to only work with type textarea|text|number|search|email|url|tel so that imput types like "image" will still display the image and not be erased with a pre tag.

Update 7/20/2018
Version 5.4 - Now a simple site search can be enabled for the Javascript Find on this page window. Edit find5.js and change: var enable_site_search = 1; to enable it. It uses Google's site search and your domain name to open a new window with a url like this example: https://www.google.com/search?q=site%3Awww.seabreezecomputers.com+superhero

Update 7/20/2018
Version 5.3f - No longer using find_window_height because it really isn't needed and was messing up the display of the find window adding a scrollbar at times. Also Bug Fix: In Firefox and IE 10 and above input elements and textareas were not copying the cssText of the original element when converting it to a pre because of a bug in these browsers not supporting cssText properly. This has been fixed.

Update 3/24/2018
Version 5.3e - find5.js now finds text in input elements by copying the content of the input element into a pre element and displaying the pre element instead of the input elment. Then if the user clicks on the pre element it displays the input element again. Just like the script is already doing with textarea elements.

Update 2/22/2018
Version 5.3d - Bug Fix: Changed line 458 to if (String(fobj.className).match(/dragme/i)) (adding the String() to the line) to prevent an error message in Developer tools console: "fobj.className.match is not a function".

Update 7/15/2016
Version 5.3c - Bug Fix (Thanks to dev for finding it): Could not search for * or ( without getting error in developer console Uncaught SyntaxError: Invalid regular expression. Fixed by commenting out line 71. //var re = new RegExp(word, "i"); // regular expression of the search term. This was left over from when the script was searching for the term using regular expressions.

Update 2/11/2016
Version 5.3b - Bug Fix (Thanks to George for finding it): Could not search for $ or ^ without freezing the browser in Chrome, Firefox and Internet Explorer. This is because find5.js was using regular expression search(). So special reguar expression variables could not be searched for. This has been fixed by using toLowerCase().indexOf() now instead of regular expression search(). Hopefully no one needs to use regular expressions in the search, but if they do then they could uncomment line 83 and comment line 84.

Update 5/15/2015
Version 5.3 - Bug Fix (Thanks to Jay for finding it): Previously if you clicked "Find Next" the button would remain focused so that if you pressed the Enter key there would be a double search and one of the finds would be skipped. Fixed by adding this.blur(); to line 676. Also iOS was not selecting the text in the find window if the user reopened the window. Apparently textbox.select() does not work in iOS. But added textbox.setSelectionRange(0, 9999); to line 341 and now iOS Safari selects the text. Also in this version changed the find window width to 245px because in iOS the number of finds was being cut off.

Update 3/10/2015
Version 5.2 - Bug fix in IE: Previously if you searched for part of a word such as "Java" in "Javascript" then IE would find the matches. But if you then searched for the whole word such as "Javascript" then IE would not find the matches. This is because IE does not use the normalize() method on text nodes the way other browsers do. Other browsers join adjacent text nodes and remove empty ones. Apparently IE does not remove empty text nodes with normalize(). So I added a normalize(node) function to find5.js to fix this bug in IE.

Update 12/2/2014
Version 5.1a - Minor change: Changed default width of find window to 225px instead of 235px so that it displayed better on iPhone screens. It was difficult to press the closing x when it was wider.

Update 10/17/2014
Version 5.1 - A number of features and bug fixes:

  • When closing the find window the previous finds are unhighlighted and the current find is selected.
  • Changed the formatting to text window to be more appealing. It can also be customized.
  • Added placeholder="Enter text to find" in text input field.
  • After pressing Search the text input box is blurred so that the keyboard closes on iOS and Android devices.
  • Escape key closes find window.
  • On reopening the find window the last search text is selected so user can search again or start typing a new search.
  • The find window no longer drags when clicking in the text input field so that text can be selected with the mouse
  • Removed zIndex in mouseDown function because it may have caused "Invalid Argument" in IE 8.

Update 10/5/2014
Version 5.0d - Bug Fix - Versions of IE versions 9 and earlier were having an error with the mouse functions. Line 418 "target is null or not an object". Fixed by putting if (!event) event = window.event; on lines 417 and 486.

Update 8/25/2014
Version 5.0c - Bug Fix - I accidentally introduced a bug in version 5.0b that caused the close button and "prev" and "next" buttons to not work on iPhone or Android devices. Fixed the bug by changing line 475 to return true;

Update 7/30/2014
Version 5.0b - Bug Fix - If the doctype was set to an xhtml doctype then the find window could not be dragged with the mouse. This is because coordinates for the screen have to be followed by "px" in xhtml. So added + "px" to the end of lines 514 and 515.

Update 7/18/2014
Version 5.0a - Bug Fix - At first I was changing the find_root_node to search with var find_root_node = document.getElementById('mydiv'); However, this did not work because the div did not exist until the page was loaded. Instead now the user specifies just the id of the div. For example: var find_root_node = 'mydiv'; and the findit() function will create the reference to the div before it calls the highlight() function.

Update 7/16/2014
Version 5.0 - Complete rewrite of the searching and highlighting functions. Now all text nodes in the document or the specified div are searched through. All matches are highlighted. The script checks for elements with visibility set to hidden or display set to none and does not search for the term in those elements. HTML textarea's are highlighted with a trick because I can't find a way to highlight multiple search terms in a textarea with a span. So the script copies the value of the textarea to a pre tag and highlights the matches in the pre tag while turning the textarea invisible. If the pre tag is clicked on then the textarea becomes visible again.

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

Last updated on July 16, 2024
Created on September 10, 2007

((( spellific )))
Practice spelling while playing a fun word game!
Click here to play
Speech Recognition Anywhere
  • Type emails with your voice
  • Write documents with your voice
  • Control the Internet with your voice
  • Chrome Extension
Reconocimiento de voz en cualquier lugar
  • Escribe correos electrónicos con tu voz
  • Escribe documentos con tu voz
  • Controla la Internet con tu voz
  • Extensión de Chrome
Spracherkennung Allerorts
  • Geben Sie E-Mails mit Ihrer Stimme ein
  • Schreiben Sie Dokumente mit Ihrer Stimme
  • Steuern Sie das Internet mit Ihrer Stimme
  • Chrome-Erweiterung
Reconnaissance de la parole
  • Tapez des e-mails avec votre voix
  • Écrivez des documents avec votre voix
  • Contrôlez l'Inernet avec votre voix
  • Extension Chrome
Riconoscimento vocale ovunque
  • Digita e-mail con la tua voce
  • Scrivi documenti con la tua voce
  • Controlla Internet con la tua voce
  • Estensione Chrome
どこでも
音声認識
  • あなたの声で文書を書く
  • あなたの声でメールを入力してください
  • 音声でインターネットをコントロール
  • Chrome拡張機能
语音识别
无处不在
  • 用你的声音写文件
  • 用您的声音输入电子邮件
  • 用你的声音控制互联网
  • Chrome 扩展程序
語音識別
無處不在
  • 用你的聲音寫文件
  • 用您的聲音輸入電子郵件
  • 用你的聲音控制互聯網
  • Chrome 擴展程序
Back to www.seabreezecomputers.com
Subscribe to Internet Tips and Tools Feed        
f Share
-
G+ Share
-
Tweet
-
in Share
-
P in it
-

Speech Recognition Anywhere
  • Type emails with your voice
  • Write documents with your voice
  • Control the Internet with your voice
  • Chrome Extension
Reconocimiento de voz en cualquier lugar
  • Escribe correos electrónicos con tu voz
  • Escribe documentos con tu voz
  • Controla la Internet con tu voz
  • Extensión de Chrome
Spracherkennung Allerorts
  • Geben Sie E-Mails mit Ihrer Stimme ein
  • Schreiben Sie Dokumente mit Ihrer Stimme
  • Steuern Sie das Internet mit Ihrer Stimme
  • Chrome-Erweiterung
Reconnaissance de la parole
  • Tapez des e-mails avec votre voix
  • Écrivez des documents avec votre voix
  • Contrôlez l'Inernet avec votre voix
  • Extension Chrome
Riconoscimento vocale ovunque
  • Digita e-mail con la tua voce
  • Scrivi documenti con la tua voce
  • Controlla Internet con la tua voce
  • Estensione Chrome
どこでも
音声認識
  • あなたの声で文書を書く
  • あなたの声でメールを入力してください
  • 音声でインターネットをコントロール
  • Chrome拡張機能
语音识别
无处不在
  • 用你的声音写文件
  • 用您的声音输入电子邮件
  • 用你的声音控制互联网
  • Chrome 扩展程序
語音識別
無處不在
  • 用你的聲音寫文件
  • 用您的聲音輸入電子郵件
  • 用你的聲音控制互聯網
  • Chrome 擴展程序

User Comments

There are 281 comments.

Displaying first 50 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
9. Posted By: annie - - May 23, 2008, 1:49 am
Hi Jeff,,the script is very good. But when you click the next or previous button without a text to search (this is only in firefox), the built in window.find appears. Then if you typed any text that is not in the content(in firefox only),it still displays TRUE instead of FALSE. Is it because of the built in window.find in firefox?How can this be fixed?anyway,,your script is very good!
10. Posted By: annie - - June 4, 2008, 9:35 pm
hi jeff,,this is me again..I have a suggestion with the problem in firefox,where the built in find window appears everytime we press the next and previous button with the textbox empty.Why don't use the alert command to alert users to type a text to find first?This is only in firefox because in ie, the window works okay.

Can we call the javascript function(find window)without using the button?It appears onload?

Thank you very much for the prompt reply last may 24!
11. Posted By: annie - - June 5, 2008, 10:30 pm
Hi Jeff, it still doesn't work in firefox. I've checked the 'new' code, but it wasn't changed. Anyway, I decided to use the alert command, and I've also found a way to display the box onload. Thanks for the information! The script is cool indeed!
12. Posted By: annie - - June 6, 2008, 10:59 pm
Thanks Jeff! It worked...
13. Posted By: piznigley - - July 12, 2008, 1:48 am
Thanks Jeff I used every "find on page" code there was until i stumbled on your script. excellant.
please email me on updates.
14. Posted By: Woolyss - - October 25, 2008, 11:13 am
Thank you Jeff for your script. It's really interesting. I experimented it.

I've made another one. It use the famous searchhi. I modified it. Now, there is auto-scroll on the first word found.

Find on this page... NEW VERSION
15. Posted By: amul - - November 19, 2008, 5:59 am
Thanks a lot for the script...
Its working fine...
16. Posted By: kostas - - January 1, 2009, 10:00 am
hi I have noticed in firefox when using tables I have to click on the table to focus the search or else it wont find anything.
Also on firefox if I do not click the table to focus, I have to click find next (it does not find anything) and then when I click find prev, it finds the keyword without clicking on the table. a bit strange, so I used the build in function for the firefox.
But I like the div window so could you please fix this?
Thanks
17. Posted By: kanjo - - January 7, 2009, 10:37 am
Has anyone modified this script to enable it to search for text in an embedded frame ?
18. Posted By: juan - jgstper@suddenlink.net - March 31, 2009, 7:56 am
when i use the script the div flickers, similar to what kika was experiencing any one have the solution ?
19. Posted By: Jeff - - April 1, 2009, 12:02 am
Do you have a link to your page? I can try to look at it and see what the problem is. The only time I had it flicker (that I can remember) is when I accidently put two "Find on this page" buttons on the page by adding the javascript statement twice. This shouldn't be done. The find.js file explains that if you want two find buttons on one page then you need to add it a different way.

Jeff
www.seabreezecomputers.com
20. Posted By: Rick - - April 2, 2009, 12:49 am
Jeff,

I love the way that the script works on your site, but alas I am not very familiar with javascrpit. I would love to incorporate your script into my website www.trailershowroom.com ( more specifically on this page: http://www.trailershowroom.com/master_enclosed_options.htm )

I already have a page search function there, but it isn't very good. I have downloaded find.js but now I don't know what to do with it. Should I open it with wordpad and paste it's contents into the html of the specific webpage that I want to use it on? Should I upload the find.js file to my webserver? Could you please provide a little more detailed information as to how to incorporate your script into my webpage?

Thank you very much!

Rick
21. Posted By: Rick - - April 3, 2009, 10:59 pm
Jeff,

Never mind..........Got it.

I have tested it in IE, Firefox, and Chrome. It seems to work well in all three.

Thanks,

Rick
22. Posted By: T - - May 8, 2009, 5:58 pm
Can it find the string within iframe?
23. Posted By: Bomber - - July 2, 2009, 3:18 am
Very Very useful thanks a lot !!! working perfect in each Browser..Exactly what I need !!!!
24. Posted By: andy - - September 2, 2009, 2:12 pm
Hi. Has any one been able to make this script search a page automatically forward and back from a select list selection? I also need to have the find, search a page back and forth without a "find previous" button AND have the jump-to selection work.

Thanks for your help.
25. Posted By: Jeff - - September 8, 2009, 10:22 am
Hi Andy. If you or anyone else needs the script to search again back at the beginning of the document then you can download it here: find_custom2.js

Jeff
www.seabreezecomputers.com/
26. Posted By: M - - September 23, 2009, 8:02 am
Hi Jeff,

I would like to highlight all the occurence of the text at the same time. Do you have a suggestion ?

Thx

27. Posted By: Augusto - - October 14, 2009, 11:26 am
Excelent work!
Thanks o Gracias! ;-)
28. Posted By: finduser - - December 20, 2009, 4:42 am
you should not return in find previous when finds < 2!
Set finds to 2 instead.

if (finds < 2) finds = 2;


29. Posted By: finduser - - December 20, 2009, 4:47 am
the complete modifications:
if (ie)
{
// if they found only 0 or 1 occurance then don't do anything
// because they haven't found enough to go backwards
if (finds < 2) finds = 2;
// Make finds variable go back to previous find
finds = finds - 2; // I don't know why I have to go back 2 : because you're doing a new find :-) which in fact is the equivalent to finds + 1

// move back to previously bookmarked position
try
{
txt.moveToBookmark(bookmark[finds]);
// select it
}
catch(e)
{

}
findit();
}

30. Posted By: finduser - - December 20, 2009, 4:59 am
Another big problem:
If you have a lot of elements with display:none or hidden IE crashes when you try to select the found object. That's a known bug. To solve this problem you have to use a try catch... Moreover: finds++ should only be called when we really can select!!! Here is my solution for this problem:

if (txt.findText(string)) // if found
{
// select() not only highlights the string but
// it also moves the view to that location
// prevent ie bug if selection is not on display
try
{
txt.select();
test.innerHTML=document.selection.createRange().parentElement().outerHTML;

// we don't realy need it.
txt.scrollIntoView();
// moveStart('character') moves the position in the
// text one character forward so that
}

31. Posted By: chacha - - August 4, 2010, 8:42 am
I'm trying out your in page search and it's working well so far. Is there a way I can make it case sensitive? I have State abbreviations on my site along with regular text. To look up California (CA) links for instance would take forever unless case sensitive. Thanks.
32. Posted By: Jeff - - August 7, 2010, 11:40 am
chacha,

There are two functions you would have to change to make it a case-sensitive search:
findText for IE and window.find for mozilla/firefox

Change line 97 of find.js from:

if (txt.findText(string)) // if found

to:

if (txt.findText(string, 0, 4)) // if found

Then for firefox change line 133 from:

test.innerHTML = window.find(string, false, false);

to:

test.innerHTML = window.find(string, true, false);

and for previous searches firefox needs line 182 changed from:

test.innerHTML = window.find(string, false, true);

to:

test.innerHTML = window.find(string, true, true);

Here is a link to more information on IE's findText: Microsoft findText
and here is a link for more information on Mozilla's window.find: mozilla window.find

Jeff

33. Posted By: Emerygjr - - August 22, 2010, 11:54 am
Can this be modified to highlight all occurrences of the search term, duplicating the Netscape option?
34. Posted By: pcg - - August 31, 2010, 11:52 pm
The script isn't working with Safari. Open this page with Safari, then try the sample find button in upper left of this page, enter a word to find, then click "Find Next" and the whole search box disappears. It only works with Safari if you use the Enter key, not the "Find Next" button. Any ideas anyone?
35. Posted By: Rob - - September 2, 2010, 7:16 pm
Hi Jeff,

Is there a way to implement this so that I can enter the search term(s) (with or without the popup window) that will then navigate to a specific (or next) page and perform the text search? Maybe open the target page in a new window and find the text there?

My page: http://www.oasections.com/ has a search bar, but it only works by redirecting to a specified page with anchor text, but I have a scrollable table that doesn't work with anchors.

Your version seems it would work much better.

Thanks.

-Rob

36. Posted By: Rob - - September 4, 2010, 10:02 am
actually, all I would need help with is:

1) embed the search into the page, instead of a floating div

2) pass the search variable to a new page and do the search there

Thanks!
37. Posted By: Jeff - - September 21, 2010, 12:42 pm
test
38. Posted By: Bob - - October 21, 2010, 10:49 am
This works in IE, but doesn't when loaded in chrome. The DIV box appears but after pressing the find next button the DIV disappears and nothing happens! any thoughts?
39. Posted By: Jack - - January 6, 2011, 6:41 am
Great script, thank you.
Tried it out on various popular browsers works well.

One question: How can I get it to work in Chrome (Google).
When the "next" button is pressed the search box disappears.
If the "previous" button is pressed it will search up to two occurrences from the bottom of the document, then it disappears.

Regards
Jack
40. Posted By: Alan - - January 25, 2011, 12:46 pm
John,

I love your "Find on this page" javascript but I am having a problem with it. I have it implemented inside a 'position:fixed' div.

As you scroll down the page, the div scrolls down even "faster" and soon disappears off the bottom, never to be seen again (unless you refresh the page)! If you scroll up (before it disappears), the div does not follow suit. If you are already scrolled down on the page and then click on the Find button, the div briefly appears and then disappears (I suspect it auto-scrolls below the bottom of the window).

Right now I have it on a development site and can't go "live" until I resolve this issue. The page on my dev site that uses this feature is:
http://schaevitzdev.org/content/squads/oursquads.html
where you can see the behavior I am describing. I would love any assistance you can provide in resolving it.

Thanks, Alan
41. Posted By: Alan - - January 25, 2011, 12:49 pm
Jeff,

My apologies. In my previous submission, I incorrectly addressed you as "John".

Regards,
Alan
42. Posted By: Jeff - - March 29, 2011, 12:36 pm
Alan, I think I can fix your problem. I changed the javascript to now dynamically create the DIV and attach it to the body of the DOM. This should work better than the way it was doing it before and creating the div inside of where you placed the call to the javascript file.


Jeff
www.seabreezecomputers.com
43. Posted By: Titou - - April 3, 2011, 6:43 am
Bonjour,

Votre script est tout fait ce que je recherchais, deux dtails prs ...

1) Est il possible de le faire fonctionner avec Opra?
2) Est il possible de faire en sorte que la div popup soit centre sur la page malgr le rsultat de la recherche?
Merci
-------------------------------------

Your script is exactly what I was looking for, with two exceptions ...

1) Is it possible to make it work with Opera?
2) Is it possible to ensure that the popup div is centered on the page despite the outcome of research?
Thanks
44. Posted By: Shaun - - July 22, 2011, 9:58 pm
Hi Jeff

Your script is very cool!

I can get it to work in all browser except for Safari. In Safari, hitting Find Next after entering a search term closes the search window, and it won't highlight or scroll to the term even when it's definitely there on the page. However, the Find Previous button works.

Here is a test page I have set up:
www.billygoatkaraoke.com.au/searcher/test.html

Are you able to find a Safari quirk in there?

Cheers

Shaun
45. Posted By: Joe Batty - - September 20, 2011, 2:12 am
Hi Jess, i seem to be getting an error when i use your script on my page. Even though there are instances of the string i'm searching for i get the following error:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; .NET4.0C; Zune 4.7)
Timestamp: Tue, 20 Sep 2011 09:11:42 UTC


Message: Syntax error
Line: 185
Char: 3
Code: 0
URI: http://#################/data-page.asp?PID=99


Message: Could not complete the operation due to error 800a025e.
Line: 107
Char: 4
Code: 0
URI: http://#################/JS/find_custom2.js

Any Ideas?


46. Posted By: Jeff - - September 21, 2011, 10:08 am
@Joe Batty,

Unfortunately the programmers for Internet Explorer keep leaving bugs with text selection functions that are supposed to be built-in to Internet Explorer. This error seems to happen at different times with different versions of Internet Explorer. I have IE 8.0 but I do not have this bug at present. Some people have found that if they update Internet Explorer or if the update their .NET Framework then this error goes away.

Jeff
www.seabreezecomputers.com
47. Posted By: Peter - - October 4, 2011, 3:42 am
Hi Jeff -

very nice script! Thanks -

Is there a way to hide the top "find button" and only display the on within the HTML page ?

48. Posted By: Peter - - October 4, 2011, 3:53 am
Hi Jeff - I guess I found a solution e.g.

document.write('');

49. Posted By: Jim - - November 11, 2011, 2:05 pm
Nice script! Any idea why the find pop up box disapears when you click find next when using Safari?
50. Posted By: Anastasios - - November 15, 2011, 2:34 am
Hi, this script is really cool, can you please tell me if I can restrict the search only to a specific div of the page?