Page Search - Javascript - Web Dev. - Neils Resource WebPage Search - Javascript - Web Dev. - Neils Resource WebPage Search - Javascript - Web Dev. - Neils Resource Web

Contract Menu | Expand Menu

Summary of Content
Javascript LogoAn excellent script I've found  03/05 , its another from Hypergurl's web site.
This will search the page you are on and mark the first occurrence of the word or phrase you entered. Subsequent presses of the button will find further occurrences of the search criteria. However on long documents where the search is more likely to be required, the search button will eventually disappear off the screen.
This is where the next version scores, but the setback here is it will not function if you have blocked popups on your browser.  07/05  Felgall.com has a similar but more complex model using a popup window. This will keep the search function visible when searching through long pages. This version is more powerful as it  will find more occurrences on a page with each subsequent press of the find button. Also leaving the popup open will allow searching on subsequently opened pages. Try it here - Find on this page.

 07/05  I've developed this idea a bit further, no popup window but using a floating layer instead. Try the new version here.

Copy and paste the code below within the <head> of your html document.
<script language="JavaScript">
<!-- Original by http://javascript.internet.com More javascripts http://www.hypergurl.com -->

var NS4 = (document.layers); // Which browser?
var IE4 = (document.all);

var win = window; // window to search.
var n = 0;

function findInPage(str) {

var txt, i, found;

if (str == "")
return false;

// Find next occurrence of the given string on the page, wrap around to the
// start of the page if necessary.

if (NS4) {

// Look for match starting at the current point. If not found, rewind
// back to the first match.

if (!win.find(str))
while(win.find(str, false, true))
n++;
else
n++;

// If not found in either direction, give message.

if (n == 0)
alert("Not found.");
}

if (IE4) {
txt = win.document.body.createTextRange();

// Find the nth match from the top of the page.

for (i = 0; i <= n && (found = txt.findText(str)) != false; i++) {
txt.moveStart("character", 1);
txt.moveEnd("textedit");
}

// If found, mark it and scroll it into view.

if (found) {
txt.moveStart("character", -1);
txt.findText(str);
txt.select();
txt.scrollIntoView();
n++;
}

// Otherwise, start over at the top of the page and find first match.

else {
if (n > 0) {
n = 0;
findInPage(str);
}

// Not found anywhere, give message.

else
alert("Not found.");
}
}

return false;
}

</script>
Copy and paste the code below into your html document where you want the find box to appear.
<form name="search" onSubmit="return findInPage(this.string.value);">
<div align="center">
<p><font size=3>
<input name="string" type="text" size=15 onChange="n = 0;">
</font>
<input type="submit" value="Search this Page">
</p>
</div>
</form>

Hyperlink titles may have been abbreviated, (right click on the link and select properties for the full URL)

Top of the PageTop of the PageA double mouse click anywhere on the page will take you back to the top (except when over hyperlinks)

Last Update: 17/01/2008 - Javascript - Search This Page - Neils Resource Web

html 4.01 strict css 2.1 javascript 1.2