Cool Javascript Find on this Page...

Fixed Position Edition

Last updated on
Subscribe to Internet Tips and Tools Feed

Rating: ★★★★☆ (4 out 5 stars)

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.
dlc_b

Download

Downloaded 0 times.
This script is provided for free but please consider making a donation to help with server costs and other expenses.

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:

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:

History

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 January 2, 2017
Created on May 20, 2016

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

User Comments

There are 15 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!