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

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 April 18, 2017
Created on May 20, 2016

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

User Comments

There are 29 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/