Jump to content

Find in Page Javascript + Firefox Issues


Recommended Posts

Hello-

I am desperately seeking help on the one of my pages.

I have added a javascript that I found in a post on this forum from 2006, that works essentially as the browser find in page function. This script is the only one I have found that works in firefox. (It works perfectly in IE7) However, I am still having this strange issue.

In FF the form only works the first time if you hit the enter key. It does not work if you click on the submit button. However, the submit button works after the initial submit.

You can see my test page here: http://test.lib.lsu.edu/gov/test/find/index.html

Here is the java script:

var win = window; // window to search.

var n = 0;

function findInPage(str) {

var txt, i, found;

if (str == "")

return false;

// Find next occurance of the given string on the page, wrap around to the

// start of the page if necessary.

if (window.execScript) {

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.");

}

} else {

// 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.");

}

return false;

}

And here is the HTML form:

<form name="search" onSubmit="return findInPage(this.string.value);">

<h4>Search the LSU Libraries Federal Agencies Directory</h4><p><font size=3>

<input name="string" type="text" size=13 onchange="n = 0;" onclick="expand()"/>

</font>

<input type="submit" value="Find"> </p>

<p align="right" class="small">Click find multiple

times to cycle <br />

through all results.</p></form>

Any ideas??? Any help would be appreciated!!

Edited by akvbroek
Link to comment
Share on other sites


I believe the primary problem Fire Fox is having is that the input field the search text is being typed in is coming back as a result of the search as well.

Putting the code into an example on my system it acts that way while yours is coming back with no results so I cannot be certain this is the issue.

By removing the search form section from the readable level of DOM space (IE: taking the form outside of the searchable area of the page), I was able to search properly through my test page. I originally had the same issue with the submit button not submitting at first (it was highlighting the input box's text). This is no longer occurring in my test cases and seems to work properly.

My solution:

Embed the form into an IFrame.

Search Page Code:


<iframe src="find_form.html">
Find Form
</iframe>

To get the search function looking at the right window a change in the javascript is necissary as well:

Javascript.js:


//original
//var win = window; //window to search

//replacement
var win = window.parent; //window to search

The only other change I made should not effect the search but in case it does.

I changed the search to look up a specific ID to search instead of passing the value in.

Hopefully it works for you as well as it did for me.

-Makkura

Edited by makkura
Link to comment
Share on other sites

  • 1 year later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...