DHTML Find In Page Script

This script mimics the Find (Ctrl+F) feature in your browser. It will look in the current page for whatever text the user inputs. If it finds the text, it highlights the text so the user can see it. If it doesn't find the text, it pops up a JavaScript alert stating that the text was not found on the current page.

Script Demo:

Dynamic HTML Code:

Insert this code into <head> tags

<script language="JavaScript">

var NS4 = (document.layers);
var IE4 = (document.all);

var win = window;
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("Not found.");
  }

  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
  return false;
        alert("Not found.");
    }
  }

}

</script>

Insert this code into <body> tags

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

Instruction:

Webmaster » Web Programming » DHTML » Find In Page Script

Related Links:

Home | Sitemap | Bookmark This Page

Sponsored Links

Recommended Links