Find on This Page

It isn't often that I completely replace a page on this web site since usually the information just slowly evolves over time and I can amend the page slightly to reflect the changes as they occur.In this particular instance I wrote a brand new script without reusing any of the old code in order to resolve the shortcomings of the original script that couldn't be resolved by making minor modifications. This completely unobtrusive cross browser 'find in page' script has nothing in common with the earlier script except that the function it is intended to perform is the same. The big difference is that this one works for all browsers and not just some.

If you are interested in the old version of the script (perhaps you want to compare the way the new script works with the old) then you can still download it but I do not recommend using it as it doesn't work in all of the different browsers that are in current use and didn't support all browsers even when I first wrote it. (I have added the original text of this web page to that download so that you can have a better idea of the limitations of that version).

So on to how to obtain and use the new version of my script. There are three things that you'll need to do to implement this function on your web page. First off, here's the CSS and 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 find.css and find.js to your site. You may want to remove the very last line in find.js if you don't want the find box opening straight away when the page loads.

Next you need to place the following code into the <head> section of your web page:

<link rel="stylesheet" href="inc/find.css" type="text/css">

You also need to add the following to the bottom of your page immediately before the </body> tag.

<script type="text/javascript" src="find.js"></script>

This makes the function available for use on your web page. If you just want the find box to appear when the page first loads and don't want to make provision for displaying it again if it is hidden then that's all you need to do. If you want your visitors to be able to call it up when it isn't on the page then you need to add a link somewhere on your page that calls inPageSearch() which will add the search field back into the visible page.

You may make whatever changes you like to the CSS but the one thing you do need to watch out for is to make sure that the .found class provides a suitable way of distinguishing those elements that have been found by the search from their surrounding content. You also need to watch out for the hack that the #searchbox definition includes to get earlier versions of IE that don't understand position:fixed to handle the placement the same way as other browsers.

One final note, the find function has problems with frames although not to the same extent as the original script. Obviously the script will not find the specified text within any frame other than the actual page it is in. Also in some browsers the content of the frame may display in front of the search box and so you need to consider where the frames are in your page in deciding on a suitable location for the search box.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow