Find Text In The Page

Let your visitors use the search function to find the text or phrase in the same page. Users simply enter search terms in the text box and press the Enter key, if the term found on the page, it will be highlighted.

Find in page script that is ideal for those sites that contain a large number of words in the article.

Script Demo:

Demo

JavaScript Code:

Insert this code into <head> tags

<script language="javascript">
<!-- Original:  Mike Hall (MHall75819@aol.com) -->
<!-- Web Site:  http://members.aol.com/MHall75819 -->

<!-- This script and many more are available free online at -->
<!-- Webmaster Resources at http://www.road2webmaster.com -->

<!-- Begin
var NS4 = (document.layers);
var IE4 = (document.all);

var win = this;
var n   = 0;

function findInPage(str) {
var txt, i, found;
if (str == "")
return false;
if (NS4) {
if (!win.find(str))
while(win.find(str, false, true))
n++;
else
n++;
if (n == 0) alert(str + " was not found on this page.");
}
if (IE4) {
txt = win.document.body.createTextRange();
for (i = 0; i <= n && (found = txt.findText(str)) != false; i++) {
txt.moveStart("character", 1);
txt.moveEnd("textedit");
}
if (found) {
txt.moveStart("character", -1);
txt.findText(str);
txt.select();
txt.scrollIntoView();
n++;
}
else {
if (n > 0) {
n = 0;
findInPage(str);
}
else
alert(str + " was not found on this page.");
}
}
return false;
}
//  End -->
</script>

Insert this code into <body> tags

<form name=search onSubmit="return findInPage(this.string.value);">
Find in Page
<input name=string type=text size=15 onChange="n = 0;">
</form>

Instruction:

Webmaster » Web Programming » JavaScript » Message » Find In Page

Related Links:

Home | Sitemap | Bookmark This Page

Sponsored Links

Recommended Links