Find Text In Page - Tested in IE7.0, Netscape8.1.2, Opera9.10, Firefox2.0.0.1 and AOL Explorer1.5

Note: Script updated June 24th, 03'- Fixed IE related bugs when searching in a frame that has navigated to a new page. Auto scroll to found phrase (in IE).

This cross browser DHTML script simulates the Edit> Find In Page feature of the browser to allow your visitors to more easily search for a particular text on your page. As in the "Find In Page" feature, it highlights the searched text if found, otherwise, prompts a "Not Found" message. If your page contains lots of textual content, definitely consider adding this script to make it more search friendly.

Works in IE4+, NS4, Mozilla/NS7+ (not NS6), and degrades well with the rest.
Easily configurable to search either current page or a particular frame.
In IE4+, page automatically scrolls down or up if needed to where the located text is.
Easy repetitive search of page, by allowing a user-designated hot key to activate submit button (via ACCESSKEY attribute of HTML 4).

We have tested the code in IE7.0, Firefox2.0.0.1, Opera9.10, Netscape8.1.2 and AOL Explorer1.5. This script worked well in IE7.0 and AOL Explorer1.5. We observed variations in all other platforms tested.

Opera9.10 When you type in a word to search and click "Find In Page", nothing happens. In other words, it does not work.
Firefox2.0.0.1 With the form at the top of the page, when you type in a word to search, it will not search for anything below the form itself. It will only seek words above the form. The " Alt s " function does not work either.
Netscape8.1.2 When you type in a word to search and click "Find In Page", nothing happens. In other words, it does not work.
We placed the form itself at the bottom of the page in the Firefox2.0.0.1 platform and it worked.
Downside To The Above: The search feature will function but.....Since the " Alt s " function does not work, it is a nuisance to constantly keep going back to the bottom of the page to search for a word. To make it easier, let's just say it does not work in Firefox2.0.0.1

This script also has another very nice, built in feature. If the word you are searching for is not visible within the parameters of your screen without scrolling, when you type in the word and it is found, it will automatically jump to that highlighted word.

If the word you are searching is on a graphic, it will for obvious reasons not be found. The words need to be of text nature within the page.

Depending on your knowledge of HTML and javascripts, this is an easy two (2) part copy and paste code with no reconfigurations that goes in the <BODY> section (both parts), with the <script> </script> part going anywhere, preferably at the bottom to get it out of the way and the form itself you paste anywhere you want the effect to be visible.

Little Extra Not Included In The Script: Since this script has two (2) parts, both going in the <BODY> section with the <script> </script> part being bloated and in the way on the page, you can make that section into an external .js file and paste only a snipplet of code on the page as opposed to the bloated code.

For the <BODY> section of code we have a [ Generator/Converter ] that takes the work out of converting all the code into an external file. All you need to do is copy and paste the <BODY> section ( from the<script> to the </script> tag ) of code into our converter and follow the steps.
[ Generator/Converter ]

If you would like to see our example of making use of the external .js file in the <BODY> section, grab the below link.
[ External .js Files <BODY> Section ]

Note Of Importance You may want to keep a copy of the original <BODY> section of code if at any time you may decide to change it. This way you will have the code to reconfigure then replace the external.js file with the updated one. If you would like to see the <BODY> section of code once it has been reconfigured in our Generator/Converter, grab the below link and you are there. Once you view this file, you will understand why you may want to keep a copy of the original <BODY> section of code.
[ Reconfigured <BODY> Section Of Code ]

For your Information: We named our external.js file wordFind.js. This makes it easy for us to know which is which at any given moment.

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ]

Search Our Site By Individual letter

[ A ] [ B ] [ C ] [ D ] [ E ] [ F ] [ G ] [ H ] [ I ] [ J-K ] [ L ]
[ M ] [ N-O ] [ P-Q ] [ R ] [ S ] [ T ] [ U-V ] [ W ] [ X-Y-Z ]

Little Tips Directory

[ Page 1 ] [ Page 2 ] [ Page 3 ] [ Page 4 ] [ Page 5 ] [ Page 6 ] [ Page 7 ]

[ Index Page 1 ] [ Index Page 2 ] [ Index Page 3 ] [ Index Page 4 ] [ Index Page 5 ]
[ Index Page 6 ] [ Index Page 7 ] [ Index Page 8 ] [ Index Page 9 ] [ Index Page 10 ]
[ Index Page 11 ] [ Index Page 12 ] [ Index Page 13 ] [ Form Index ]
[ 2001 ] [ 2002 ] [ 2003 ] [ 2004 ] [ 2005 ] [ 2006 ] [ 2007 ]

[ News Letter Archives ] [ Navigation Page ] [ Archives Of Published Material ]
[ Link To Us ] [ Alphabet Index ] [ Feedback ] [ On Line Support ] [ FAQ ]
[ Webmaster Utilities ] [ Casino ] [ Banner Exchange ] [ Advanced Site Search ]

If you are part of the ever growing number of webmasters who enjoy sharing your knowledge with others on web design, join The Consigliere Ltd. web ring to broaden your scope of exposure.
Join Today

This Site Was Built And Is Maintained Exclusively by
The Webmaster @ Consigliere Ltd.