Cool Javascript Find on this Page...

We apologize for the interruption. However, seabreezecomputers.com has been offering free tools and downloads for many years. Unfortunately, server expenses are now starting to exceed revenue earned. If you appreciate the free tools and downloads at seabreezcomputers.com please consider making a donation.

★★★★★★★★★★Cool Javascript Find on this Page 4.2 out of 5 stars based on 13 ratings.

5 stars		9 votes
4 stars		2 votes
1 stars		2 votes

Your Rating: ☆☆☆☆☆★★★★★

This is a new edition of the old Cool Javascript Find on this Page....

This is the Cool Javascript Find on this Page - Fixed Position Edition.

Look at the bottom right corner of the screen and you will see a button with a magnifying glass in it for newer browsers or the word "Find" in it for older browsers. This button always stays fixed at the bottom of the screen. Click on the button and you can do a search for any word on the page.

Features

Fixed position or inline "Find" button.
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.
Keyboard functions so the user can press ENTER to search for the next occurrence of the word or term and the user can press ESC to close the search box.
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. Or if you specify lock_button: 1 in the script then the button will stay fixed at the bottom right corner:
<script type="text/javascript" id="cool_find_script" src="find6.js"> </script>

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:
<style> .highlight { background-color: blue; } .find_selected { background-color: green; } </style>

History

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

Updated 10/26/2022
Version 6.2b - 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.

Updated 8/31/2022
Version 6.2a - 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.

Updated 8/26/2022
Version 6.2 - Now waits for DOMContentLoaded before adding find element. If lock_button == 1 then it adds element as first element in body. Otherwise find element is added at the location of the <script>> tag.

Updated 12/15/2020
Version 6.1e - Increased z-index and added branding.

Update 8/5/2019
Version 6.1d - 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 6.1c - 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/20/2018
Version 6.1 - Now a simple site search can be enabled for the Javascript Find on this page button. Edit find6.js and change: 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 6.0e - 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 6.0d - find6.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.

7/15/2016
Version 6.0c - 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 170. //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.

6/28/2016
Version 6.0b - Made changes for accessibility reasons. Changed all buttons to be actual button elements instead of span elements so can be tabbed to with keyboard. Changed keyboard functions so that the buttons would act like normal buttons with the keyboard spacebar and enter key. Also changed input style to max-width: 55% for better styling.

5/29/2016
Version 6.0 - Created Cool Javascript Find on this Page - Fixed Position Edition.

Last updated on July 16, 2024
Created on May 20, 2016

((( 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

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 86 comments.

Displaying first 50 comments.

1. Posted By: dev - - July 14, 2016, 6:22 pm

Hi there,
First of all, thanks for this great script.
I was trying to use this on chrome modal window pop up which doesn't have all controls and this may help getting search function.
BUT looks like there are many bugs or restrictions as it doesn't handle special characters in the text string and it breaks the whole search and hides the search box ...
For example, if we put "*" character or any other chars like "($!" etc....it doesn't work.
If a string on the page is like "Other *" then it doesn't search this at all and just hides the text box itself. Am i missing something. could you please direct me ..Thanks in advance...

2. Posted By: Jeff - - July 15, 2016, 6:29 pm

Hello dev,

I duplicated your problem by doing a search for "*" and then for "(". I noticed that in Developer Console there was this error:

Uncaught SyntaxError: Invalid regular expression:

That is a left over from when the script was allowing regular expression searches. You can fix the error by commenting out line 71 of find5.js or line 170 of find6.js by putting // in front of it so it looks like:

//var re=new RegExp(word, "i"); // regular expression of the search term

Or download the script again from the website with the bug fix.
Thank you for pointing out the error!

Jeff
www.seabreezecomputers.com/

3. Posted By: Mike - - August 2, 2016, 5:32 am

Great little procedure.

How would I make the magnifying glass icon appear at right side of screen? Mine currently appears extreme left.

4. Posted By: Mike - - August 2, 2016, 5:45 am

Forget my query - I had been altering the code a bit - problem vanished when I reverted to clean original!!

5. Posted By: dev - - August 17, 2016, 11:24 am

Hi Jeff,
Thanks so much for your reply.
I fixed the issue after debugging, forgot to update the comment on your website. What u mentioned is what was causing the issue .
Appreciate ur reply.

Thanks,

6. Posted By: courantelectro - - December 15, 2016, 4:32 am

Hi Jeff,

Super find5.js but i've a problems.
How to reveal the result in the middle of the page and not at the top because I have a header?
Thanks

7. Posted By: Jeff - - December 16, 2016, 8:50 am

Hello courantelectro,

If you are using find5.js you can have the find window go lower from the top by changing line 415 of the script to:

findwindow.style.top=current_top + 230 +'px';

And change line 642 of the script to:

findwindow.style.top='230px';

Change the 230 to whatever number of pixels down you need

Jeff
www.seabreezecomputers.com/

8. Posted By: courantelectro - - December 19, 2016, 1:17 pm

Hi Jeff,

Thank you but I have another problem.
How to reveal the search "result" in the middle of the page and not at the top.

Thanks

9. Posted By: Jeff - - December 19, 2016, 10:45 pm

Hi courantelectro,

I don't think the search result can display at the middle of the page, but you can have it display at the bottom if you change line 591 to:

field.scrollIntoView(false);

Jeff
www.seabreezecomputers.com/

10. Posted By: courantelectro - - December 21, 2016, 10:00 am

Hi,

Thank you very much Jeff!
It is nice! ;)

Guy

11. Posted By: Melissa - - January 21, 2017, 9:50 pm

Hello! Loving this script so far. On mobile though, it only provides half of the search results, but on desktop it displays all of them. Any suggestions on how to fix this?

12. Posted By: Melissa - - January 21, 2017, 9:55 pm

Sorry, I think figured out the issue about the mobile! Thanks!

13. Posted By: Fred - - February 8, 2017, 2:05 pm

Jeff, Very nice program!

With find6.js is it possible to place the button and text entry at the top left instead of the bottom right?

Thanks.

14. Posted By: Jeff - - February 9, 2017, 12:43 pm

Hello Fred,

To move the find button to the top left change lines 78 and 79 of find6.js from:

find_div.style.bottom="3em";
find_div.style.right="1em";

to this:

find_div.style.top="3em";
find_div.style.left="1em";

Jeff
www.seabreezecomputers.com/

15. Posted By: Alexander Orlik - - March 3, 2017, 7:24 am

Thanks a lot! A great script, very usefull!

16. Posted By: Cha - - March 29, 2017, 1:33 pm

HI Jeff,

Enjoying Find6 and when I get it to work the way I want will definitely donate! Here's my dilemma: Using Find6 with google chrome, and when I do multiple searches without closing with the X it leaves one of the old finds highlighted in blue (even after I click the X)....MSIE and Firefox don't do that. Is there a way I can eliminate that in Chrome? When I redo a find, don't want one of the old ones still showing. Thanks.

17. Posted By: Jeff - - March 29, 2017, 3:54 pm

Hi Cha,

The code that selects the last find in blue is on line 238 of find6.js and it looks like this:

if (i==coolfind.find_pointer) coolfind.selectElementContents(the_text_node); // ver 5.1 - 10/17/2014 - select current find

Comment the line out by putting // in front of the line and it should stop doing it.

Jeff
www.seabreezecomputers.com/

18. Posted By: Cha - - March 29, 2017, 4:52 pm

Worked like a charm! Thanks so much Jeff.

19. Posted By: Cha - - March 30, 2017, 5:35 am

Hi Jeff,

I'm using Find6 at top of a large table of hundreds of cells. It's not at bottom right as didn't want that. The search is for states, locations and there are many in the find result. Having someone test the feature they were confused with the up/down arrows and actually all I want is for viewers to hit the enter key to see cells from their chosen location. I notice if I click on one of the many hyperlinks (cell all have) and then return to my original page, the find results disappear.....not sure that can be changed but just mentioning. I did manage to rid an arrow but not smart in js and would like you to tell me where to put the //. Much thanks.

20. Posted By: Cha - - March 30, 2017, 5:40 am

Hi again Jeff,

If the arrows are removed will the overall button be made smaller? or the text window made longer? Thanks.

21. Posted By: Jeff - - March 30, 2017, 11:30 am

Hi Cha,

Sorry, unfortunately it does not save the find results when switching between pages. But you can remove the up and down buttons. You might have more people test it though, because what confuses one person often does not confuse others.

To remove the up and down buttons comment out lines 89 to 94 of find6.js.

If you want to make the text input wider then you can adjust the max-width on line 51 of find6.js. You might try something like 60% or 65%.

Jeff
www.seabreezecomputers.com/

22. Posted By: Tony - - April 18, 2017, 1:51 pm

Hey Jeff,

Great tool! I've searched for hours looking for something like this to use on a mockup website I'm working on.

I am trying to use this with a fixed position in a div.

I'm not super familiar with JS so is there a way I can have the input field always visible and functional?

I was able to modify the JS some so that the input field was always visible, but it wouldn't search unless I clicked the magnifying glass and then searched.

I guess what I'm looking for is how can I use this as a static "find on this page" bar with the input field always present?

Thanks!

23. Posted By: Jeff - - April 18, 2017, 11:25 pm

Hi Tony,

I think I know what you are asking, but I may need you to show me a test page if this doesn't work. Try this to always have the input field showing and also have the enter key work. First comment out lines 123 and 124 of find6.js by putting // in front of the lines so they look like this:

//that.innerHTML="X";
//that.title="Close";

That will make the magnifying icon always stay a magnifying glass. Then to make sure the input field never closes change line 135 to this:

else if (that.nextElementSibling.style.display=="na")

Then to have the input window open when the page loads, put this at the very bottom of find6.js around line 565:

coolfind.find_menu(document.getElementById('cool_find_btn'));

Jeff
www.seabreezecomputers.com/

24. Posted By: Kylian - - June 2, 2017, 12:12 pm

Hello Jeff Baker,

Is it possible to make the find6 when showing the first result after the scroll put this first result on the second line instead of the first.

I use it to search a table with song titles and request buttons and these show up on the top of the touch screen so they are difficult to touch-click.

Kind regards, Kylian

25. Posted By: Jeff - - June 3, 2017, 12:24 pm

Hi Kylian,

Try changing line 470 of find6.js to this:

field.scrollIntoView(); window.scrollBy(0, -50);

Let me know if that works for you.

Jeff
www.seabreezecomputers.com/

26. Posted By: Kylian - - June 5, 2017, 2:26 am

Hello Jeff,

It seems to work for the top results only on a large list the last one will get out off the displayed list.

Kind regards,

27. Posted By: Kylian - - June 5, 2017, 5:03 am

Hello Jeff,

I found the next solution so it always shows in the middle of the screen:



var half=window.innerHeight/2

scrollBottom=50

field.scrollIntoView(); window.scrollBy(0, - half);}}

I also see that when you hit X after a search and then re open the search nothing is highlighted and it still says 3 off 60 results.

28. Posted By: Kylian - - June 5, 2017, 5:17 am

Sorry i also fixed this last question.



that.innerHTML="X";

that.title="Close";

cool_find_msg.innerHTML=" ";

29. Posted By: Jeff - - June 5, 2017, 12:34 pm

Hi Kylian,

Looks good. I'm glad you got it working well!

Jeff
www.seabreezecomputers.com/

30. Posted By: Jody - - October 16, 2017, 8:25 am

I am trying to search for barcodes in read only fields on forms and this script does not do that. In fact it won't find any text that is being displayed in forms.

31. Posted By: Jeff - - October 16, 2017, 10:06 am

Hi Jody,

Sorry about that. Thanks for the information. No one has mentioned that in over 3 years. The new version of "Find on this page script" can search in textareas but not in inputs, apparently because inputs do not have any html for the value.

There is an old version of the script that uses old javascript techniques to find text and it does work with input fields. But unfortunately it only works in desktop browsers, but I don't think it works in any mobile browsers. You can download it here:
www.seabreezecomputers.com/tips/findold.htm

Jeff
www.seabreezecomputers.com/

32. Posted By: Carlo - - January 23, 2018, 11:57 pm

Hi Jeff,

Is it possible to highlight a searched text with keyup in find5?

33. Posted By: Jeff - - January 24, 2018, 11:57 am

Hi Carlo,

Yes, it is possible to highlight a search text with keyup in find5.js.

Change line 345 to:

document.onkeyup=checkkey;

and change line 361 to:

document.onkeydown=null;

Jeff
www.seabreezecomputers.com/

34. Posted By: Jason - - March 28, 2018, 3:56 pm

Hello,

In the latest edition of Firefox Quantum, the "Find on This Page..." window will disappear when I click "Find Next". It does nothing when I click "Find Prev".

It has been working great in Firefox for several years until now.
Any suggestions?

35. Posted By: Jason - - March 29, 2018, 1:55 am

The "find on this page..." script appears to be working again in Firefox. I am not sure what happened. I'll let you know if I find any issues.

Thanks

36. Posted By: Jeff - - March 29, 2018, 5:26 pm

Hi Jason,

Thank you for letting me know that it is working again. Was it not working on seabreezecomputers.com or was it just on your website?

Jeff
www.seabreezecomputers.com/

37. Posted By: Jason - - April 2, 2018, 5:25 pm

Jeff,

The culprit appears to have been the extension called “Ghostery” . I’ve used Ghostery for many years, and this is the first it has interferred with the search script. I will disable Ghostery and problem solved for now.

Jason

38. Posted By: Landon - - December 3, 2018, 7:51 am

Hello, can you tell me how to make the search a larger size? I need the buttons, the bar, the whole thing to be a little bigger including the font size.

Thank you.

39. Posted By: Jeff - - December 3, 2018, 10:07 am

Hi Landon,

Try this css:



#cool_find_div {

 font-size: 1.5em;

}

That should make everything 1.5x bigger.

Jeff
www.seabreezecomputers.com/

40. Posted By: Kylian - - December 13, 2018, 5:35 am

Hello Jeff,

I am using the Find6 for a while now and it works like a charm on IE, Android browser and Chrome.
When a colleague is trying to search for something on his iPhone with the Safari browser the cursor isn't showing and he is only able to type one character.

Is this a known problem?

I did some modifications to the script that do work in the other browsers but I don't know if this affects the use in Safari.

If needed I can email the changed script.

41. Posted By: Jeff - - December 13, 2018, 9:11 am

Hi Kylian,

There is no problem with the original script and Safari on iPhone. Try using the original script and it should work. You'll probably need access to an iPhone for testing. Then you can slowly add your changes until you see a problem.

Jeff
www.seabreezecomputers.com/

42. Posted By: Mel - - January 16, 2019, 6:38 pm

Really appreciate this program. Works great on my page. Is there a way to size the magnifying glass larger?

43. Posted By: Jeff - - January 17, 2019, 7:46 am

Hi Mel,

Yes, you can change the size of the magnifying glass by changing line 62 of find6.js. Currently it looks like this:
coolfind.find_button_html='<svg width="1.15em" height="1.15em" viewbox="0 0 30 30">'+

You can change it to something like this:
coolfind.find_button_html='<svg width="2em" height="2em" viewbox="0 0 30 30">'+

That will make the magnifying glass 2X the size of text.

Jeff
www.seabreezecomputers.com/

44. Posted By: Mel - - January 17, 2019, 9:26 am

Thanks Jeff,

I found in the comments your fix after submitting my question, it worked. One funny thing, originally I got the choice of page vs website search option. Now it no longer appears. Not important since i only wish the user to search the page. Does the change you suggested in comments to display the search box instead of the magnifying glass work?

Thanks again.

Mel

45. Posted By: Jeff - - January 17, 2019, 9:31 am

Hi Mel,

I'm not sure why the site search option would disappear. The setting for it is on line 25.
enable_site_search: 1,

I think the code still works for keeping the search box open. However, the line numbers are different now. But I don't recommend it. The magnifying glass still displays, it just keeps the rest of the box open all the time with no option to close it.

Jeff
www.seabreezecomputers.com/

46. Posted By: Kylian - - January 17, 2019, 9:39 am

Hello Jeff,

I tried using the original find6 script after you're previous answer, but this also shows the same problem.
It is only possible to type the first letter and then it seems locked for typing more. Only removing that first letter lets you type a new one.

Since I don't have an IPhone i tested it with appetize.io/ what provides a complete simulation of the iPhone resulting in the same problem.

Kind regards Kylian

47. Posted By: Kylian - - January 17, 2019, 10:05 am

I also tried the find6 on this website and that seems to work fine. So it looks like the other used scripts are conflicting on IPhone but work fine on Android and PC browsers.

48. Posted By: Jeff - - January 17, 2019, 12:57 pm

Hi Kylian,

When I use the script at www.seabreezecomputers.com/tips/find6.htm on any iPhone or iPad it works fine. So like you said there must be another script on your page that is causing some kind of conflict.

Jeff
www.seabreezecomputers.com/

49. Posted By: Kylian - - January 18, 2019, 4:15 am

Hello Jeff,

I found what is blocking the typing.
In the CSS i added a line that prevents select copy paste options.
*{-ms-user-select:none;-webkit-user-select:none;margin:0;padding:0}

Removing this line made it work again.

50. Posted By: Jeff - - January 18, 2019, 11:10 am

Hi Kylian,

Thanks for the update!

Jeff
www.seabreezecomputers.com/