PDA

View Full Version : "Find In Page" Script for FF



HtlMakertje
09-27-2010, 07:53 AM
Hi,

I am looking for a 'find word on page script' using a htlm.

I fount a great script on this page:
http://www.dynamicdrive.com/dynamicindex11/findpage.htm

It works the same way as 'ctrl+f' in your browser.
Type in a word, hit the button and the page will scroll to the place on your page where that word is. Besides that, the word you are looking for will be highlighted. Hit the search-button again and it will show you the next location with the search-word.

One thing I like about it is that it's simple to use. No java scripting in head and that kind of things. Just copy the code, paste it in place an it will work.

And it works great ... in IE.

It does not work great in Mozilla FF. :(
At first it looks like if the script does not work at all.
But that's not really true. You first have to click in the text you want to search, then hot the search-button and it will work as expected.

Can anybody help me out so it wil work ik FF aswell in IE?

Thanks.


I have made a test-page:
www.demakers.nl/demo/zoeken/index.html



PS.
I'm not only new to this forum, but I'm quite new to building sites as well.:rolleyes:

jscheuer1
09-27-2010, 03:04 PM
Firefox is a little odd with this script. It needs the form to be at the end of the page. If you still want it to look like it's at the beginning:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<script>
<!-- Hide from old browsers

/******************************************
* Find In Page Script -- Submitted/revised by Alan Koontz (alankoontz@REMOVETHISyahoo.com)
* Visit Dynamic Drive (http://www.dynamicdrive.com/) for full source code
* This notice must stay intact for use
******************************************/

// revised by Alan Koontz -- May 2003

var TRange = null;
var dupeRange = null;
var TestRange = null;
var win = null;


// SELECTED BROWSER SNIFFER COMPONENTS DOCUMENTED AT
// http://www.mozilla.org/docs/web-developer/sniffer/browser_type.html

var nom = navigator.appName.toLowerCase();
var agt = navigator.userAgent.toLowerCase();
var is_major = parseInt(navigator.appVersion);
var is_minor = parseFloat(navigator.appVersion);
var is_ie = (agt.indexOf("msie") != -1);
var is_ie4up = (is_ie && (is_major >= 4));
var is_not_moz = (agt.indexOf('netscape')!=-1)
var is_nav = (nom.indexOf('netscape')!=-1);
var is_nav4 = (is_nav && (is_major == 4));
var is_mac = (agt.indexOf("mac")!=-1);
var is_gecko = (agt.indexOf('gecko') != -1);
var is_opera = (agt.indexOf("opera") != -1);


// GECKO REVISION

var is_rev=0
if (is_gecko) {
temp = agt.split("rv:")
is_rev = parseFloat(temp[1])
}


// USE THE FOLLOWING VARIABLE TO CONFIGURE FRAMES TO SEARCH
// (SELF OR CHILD FRAME)

// If you want to search another frame, change from "self" to
// the name of the target frame:
// e.g., var frametosearch = 'main'

//var frametosearch = 'main';
var frametosearch = self;


function search(whichform, whichframe) {

// TEST FOR IE5 FOR MAC (NO DOCUMENTATION)

if (is_ie4up && is_mac) return;

// TEST FOR NAV 6 (NO DOCUMENTATION)

if (is_gecko && (is_rev <1)) return;

// TEST FOR Opera (NO DOCUMENTATION)

if (is_opera) return;

// INITIALIZATIONS FOR FIND-IN-PAGE SEARCHES

if(whichform.findthis.value!=null && whichform.findthis.value!='') {

str = whichform.findthis.value;
win = whichframe;
var frameval=false;
if(win!=self)
{

frameval=true; // this will enable Nav7 to search child frame
win = parent.frames[whichframe];

}


}

else return; // i.e., no search string was entered

var strFound;

// NAVIGATOR 4 SPECIFIC CODE

if(is_nav4 && (is_minor < 5)) {

strFound=win.find(str); // case insensitive, forward search by default

// There are 3 arguments available:
// searchString: type string and it's the item to be searched
// caseSensitive: boolean -- is search case sensitive?
// backwards: boolean --should we also search backwards?
// strFound=win.find(str, false, false) is the explicit
// version of the above
// The Mac version of Nav4 has wrapAround, but
// cannot be specified in JS


}

// NAVIGATOR 7 and Mozilla rev 1+ SPECIFIC CODE (WILL NOT WORK WITH NAVIGATOR 6)

if (is_gecko && (is_rev >= 1)) {

if(frameval!=false) win.focus(); // force search in specified child frame
strFound=win.find(str, false, false, true, false, frameval, false);

// The following statement enables reversion of focus
// back to the search box after each search event
// allowing the user to press the ENTER key instead
// of clicking the search button to continue search.
// Note: tends to be buggy in Mozilla as of 1.3.1
// (see www.mozilla.org) so is excluded from users
// of that browser.

if (is_not_moz) whichform.findthis.focus();

// There are 7 arguments available:
// searchString: type string and it's the item to be searched
// caseSensitive: boolean -- is search case sensitive?
// backwards: boolean --should we also search backwards?
// wrapAround: boolean -- should we wrap the search?
// wholeWord: boolean: should we search only for whole words
// searchInFrames: boolean -- should we search in frames?
// showDialog: boolean -- should we show the Find Dialog?


}

if (is_ie4up) {

// EXPLORER-SPECIFIC CODE revised 5/21/03

if (TRange!=null) {

TestRange=win.document.body.createTextRange();



if (dupeRange.inRange(TestRange)) {

TRange.collapse(false);
strFound=TRange.findText(str);
if (strFound) {
//the following line added by Mike and Susan Keenan, 7 June 2003
win.document.body.scrollTop = win.document.body.scrollTop + TRange.offsetTop;
TRange.select();
}


}

else {

TRange=win.document.body.createTextRange();
TRange.collapse(false);
strFound=TRange.findText(str);
if (strFound) {
//the following line added by Mike and Susan Keenan, 7 June 2003
win.document.body.scrollTop = TRange.offsetTop;
TRange.select();
}



}
}

if (TRange==null || strFound==0) {
TRange=win.document.body.createTextRange();
dupeRange = TRange.duplicate();
strFound=TRange.findText(str);
if (strFound) {
//the following line added by Mike and Susan Keenan, 7 June 2003
win.document.body.scrollTop = TRange.offsetTop;
TRange.select();
}


}

}

if (!strFound) alert ("String '"+str+"' not found!") // string not found


}
// -->
</script>
<div>
&nbsp;
</div>
<!-- EXAMPLE FORM OF FIND-IN-PAGE SEARCH USING SUBMIT (ALLOWING 'ENTER/RETURN' KEY PRESS EVENT) -->
<div id="lipsum">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta, nulla semper volutpat lobortis, orci augue suscipit tortor, id dictum urna arcu vel ligula. Nullam molestie, urna sit amet gravida vulputate, justo lacus tristique sapien, ac mollis urna ante eget erat. Ut vestibulum ipsum ac velit luctus auctor. Nullam sodales vestibulum leo in vulputate. Aliquam ullamcorper, libero sed auctor ornare, augue sapien venenatis arcu, ac venenatis odio magna sit amet felis. Praesent vel neque sed neque commodo pulvinar sed vehicula sem. Nam at malesuada erat. Nullam eget arcu dui. Maecenas ante nisl, convallis quis luctus nec, malesuada id tellus. Aliquam nec dolor eget urna lobortis convallis vitae a mauris. Morbi at urna libero. In hac habitasse platea dictumst. In vel mauris nisi. </p>
<p> Duis ac lectus non dolor venenatis tristique sit amet ac magna. In vitae neque odio, lacinia fermentum nibh. Sed feugiat blandit sem, eu rutrum nulla molestie ac. Sed pretium tellus at odio congue ultricies. Nulla aliquam malesuada quam ut porta. Praesent ornare auctor mollis. Cras interdum scelerisque diam, ut accumsan neque aliquam sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sed dui at sapien euismod porta a a elit. Aenean mattis erat vel nisl dapibus imperdiet. In fringilla molestie velit, eget posuere mi rutrum vitae. Aliquam tempus ullamcorper pulvinar. Curabitur ligula quam, tristique at ultricies id, vestibulum in mi. Duis egestas sagittis justo, in viverra risus convallis a. </p>
<p> Curabitur bibendum, massa quis congue pharetra, orci felis pellentesque mi, in volutpat justo lorem a dolor. Aliquam ut massa mi. Pellentesque tincidunt ornare vehicula. In rutrum, tortor sit amet imperdiet dapibus, nulla nulla varius tortor, at rhoncus risus ante vitae eros. Suspendisse imperdiet tortor turpis. Nulla tristique faucibus felis, eget eleifend odio pellentesque at. Sed porttitor magna sit amet est ultrices eget bibendum ipsum commodo. Proin augue mi, ornare quis pharetra sit amet, commodo in orci. Phasellus quis nulla at nisl blandit interdum vitae id enim. Vivamus congue rhoncus pharetra. Donec ultrices sodales felis vitae viverra. Aliquam at nisl erat. Nulla et vestibulum libero. Ut ac pharetra lectus. </p>
<p> Etiam semper lectus id sem varius non sagittis metus tincidunt. Proin aliquam viverra nisi, auctor accumsan nibh gravida in. Etiam ante leo, vulputate in dapibus nec, molestie sed turpis. Aliquam sollicitudin nunc rhoncus velit interdum euismod. Ut euismod dui eget ante accumsan a sagittis ligula bibendum. Duis at ipsum a erat rutrum auctor quis eu ligula. Vivamus feugiat enim nec mauris feugiat in auctor elit elementum. Quisque molestie dui vel enim rhoncus a porttitor massa porta. Morbi nec mauris tortor. Suspendisse hendrerit vulputate massa id varius. Duis in ipsum ante. Quisque est velit, iaculis pretium commodo sit amet, pellentesque vel nulla. Integer eu felis eu tellus consectetur venenatis. Aenean tincidunt ullamcorper tellus, et placerat sapien tempus quis. Nunc quis metus neque, tempor condimentum odio. </p>
<p> Nam mattis orci non nisl placerat at adipiscing turpis hendrerit. Curabitur vel metus nisl, quis consectetur odio. Nullam iaculis placerat tortor sit amet sodales. Cras a nunc augue, eget imperdiet diam. Integer condimentum congue dolor, vitae luctus nulla adipiscing vitae. Donec ac nulla eu lacus lacinia sagittis. Vivamus mollis felis hendrerit erat volutpat aliquam. In hac habitasse platea dictumst. Cras feugiat purus id lorem rutrum vehicula. Sed non eros dolor, sit amet fermentum lectus. </p>
</div><form style="position: absolute; top: 10px; left: 10px;" name="form1" onSubmit="search(document.form1, frametosearch); return false"><input type="text" name="findthis" size="15" title="Press 'ALT s' after clicking submit to repeatedly search page"> <input type="submit" value="Find in Page" ACCESSKEY="s"></form>
</body>
</html>

HtlMakertje
09-27-2010, 04:27 PM
Thanks John!

That's working great!
Maybe you can help me again.

Is there a 'Show that div here' script or something?
I have got a nice table at the left of my page where I would like to show the searchfield.

Actualy I'm using the script for an other website. (For a client, behind a login, so I'm not allowed to show you the actual page.)
That page apears centered, so the horizontal position wil be different for each user.

Would be great if it is possible to let the search-field scroll with me if I scroll down ... but maybe I'm puching it now. :rolleyes:





<form style="position: absolute; top: 10px; left: 10px;" name="form1" onsubmit="search(document.form1, frametosearch); return false"><input type="text" name="findthis" size="15" title="Press 'ALT s' after clicking submit to repeatedly search page"> <input type="submit" value="Find in Page" accesskey="s"></form>

jscheuer1
09-27-2010, 05:04 PM
Using style, markup, and optionally javascript, one can make the form appear wherever one may want it to. If you already have a table that follows the user as they scroll the page, the form should be able to go in there, as long as that table is the last thing in the markup of the page and the form is the last thing in that table.

The easiest way to get something to follow as the page is scrolled is to set its position to fixed. To get that to work out well horizontally in the situation you describe you need either javascript or a container division.

In javascript the code for doing this is much easier if you are using a script library like jQuery, are you?

With a container, you have a container of fixed width, margin: 0 auto; (centers the container, requires standards compliant DOCTYPE) and position: relative; for the entire page. The form would be the last thing in it. That way wherever it's position is fixed will be relative to that container.