Find on This Page
One of the Bravenet newsletters contained some Javascript code to allow your visitors to search the current page for the text that they enter. It looked like a useful idea so I decided to investigate the supplied script to see how it works.
The script, as supplied, required that you place the form to input the search text somewhere on your page. As the page scrolls to where the text is found the form may no longer be visible making the repeat find capability built into the script much less useful than it ought to be. Another aspect of the supplied script was that it only works with Internet Explorer and Netscape 4. The code doesn't work with Netscape 6 or any version of Opera.
I decided that the first of these problems could be fixed by moving the form into a pop up window. This has the added advantage that the find function will continue to work even if your visitor changes to a different page (even one that doesn't provide a link to the function) so long as they don't close the pop up window. They can even search for the same value on different pages without having to re-enter the value that they're searching for.
There is no way to add support for Netscape 6 or Opera but Mozilla and Netscape 7 do have a search capability and so I have been able to amend the script so that it will also work on these browsers which the original version did not handle.
I ended up completely rewriting the code since in addition to creating the pop up find window it was also necessary to reset the search start position if the page in the main window changes and in fact to check that the main window is still open. I also decided to add a link that would bring the main window in front of any other windows that may be in front of it so that the found text would actually be visible on the screen, this option also needs to check that the window is still open. The only code that I retained from the original script were the input form and the actual search routines, which can't really be coded efficiently any other way.
So that's enough about how I came to write this script and what it does. There are three things that you'll need to do to implement this function on your web page. First off, here's the Javascript code that you'll need to implement this function. You are welcome to use this script on any non-commercial web site that you may have. All that I ask is that you don't remove any copyright notices and don't alter the code within the script (except as indicated below). If you have a commercial website you may still use the script (subject to the same conditions) in return for a donation toward the cost of my maintaining this site.
You need to unzip the file and load header.js and locwin.js to your site. You also need to copy the locwin.htm file to your site (you may want to change the background colour first).
Next you need to place the following code into the <head> section of your web page:
<script type="text/javascript" src="header.js"> </script>
This makes the function available for use on your web page. The final thing that you need to do is to add a link somewhere in the <body> section of your web page to actually call the function. There are two ways that you can do this. The first is to code the link directly in your web page like this:
<a href="#" onclick="locatorWin(); return false;">Find</a>
The disadvantage of doing this is that if your visitor is using one of the browsers where the function doesn't yet work then they will not find out until they actually enter their search text and click the Find button. (I have coded the script so that, where possible, it will tell them that their browser isn't supported if they get to that point. Also, anyone using a browser that either doesn't support Javascript or who has Javascript turned off will find that instead of getting the find function that they expect the link takes them back to the top of the page instead.
To get around these problems you can use Javascript to add the link to the page instead using the following code (you wont need the script statements if you make it an external Javascript):
<script type="text/javascript">
var isLayers = navigator.appName.indexOf('Netscape') != -1) && (browserVersion == 4);
var ag = navigator.userAgent.toLowerCase();
var isR=0;
if (ag.indexOf('gecko') != -1) {t = ag.split("rv:"); isR = parseFloat(t[1]);}
if (isLayers || document.all || isR >=1) {if (ag.indexOf('opera') == -1)
document.write('<a href="#" onclick="locatorWin(); return false;">Find</a>');
</script>
This code will ensure that the link to open the find pop up window only displays on those browsers where the function will actually work.
What happened to the example of the script on this page like I usually give you? Well, I've actually added this function into all of my web pages and (assuming that you are using a browser that supports this function) you'll find the link in the navigation bar directly below the print link - it's called Find (on this page).
One final note, the find function has problems with frames. If called from within a framed page it will not work properly. Also if the find window is open and the main window switches to a framed page then the search function will also not function correctly.
The script may also have problems if you try to use it with a free web host that adds advertising to all of the pages as advertising would be added to the popup window. I originally tried to code this to generate the popup window from within the javascript so as to bypass this issue but this caused problems with the Netscape 4 processing which tried to reload the main window into the popup.
