Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Add Control + F feature to a Web Page

Status
Not open for further replies.
chillay

chillay

Programmer
Jun 27, 2002
102
US
Hello All

I am using the following script to "find text on a web page" and although it highlights the first instance of the text, the page defaults to the top of the page.

Does anyone know how to fix this?

When the text is highlighted, I would like the browser to go to that portion of the web page.

Thank you in advance for any assistance you can provide.




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<title></title>
<style type="text/css">
.highlighted
{
background-color: yellow;
}
.highlight
{
background-color: #fff34d;
-moz-border-radius: 5px; /* FF1+ */
-webkit-border-radius: 5px; /* Saf3-4 */
border-radius: 5px; /* Opera 10.5, IE 9, Saf5, Chrome */
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* FF3.5+ */
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Saf3.0+, Chrome */
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Opera 10.5+, IE 9.0 */
}
.highlight
{
padding: 1px 4px;
margin: 0 -4px;
}
</style>
<script src=" type="text/javascript"></script>
<script type="text/javascript">
function searchAndHighlight(searchTerm, selector) {
if (searchTerm) {
var selector = selector || "#realTimeContents"; //use body as selector if none provided
var searchTermRegEx = new RegExp(searchTerm, "ig");
var matches = $(selector).text().match(searchTermRegEx);
if (matches != null && matches.length > 0) {
$('.highlighted').removeClass('highlighted'); //Remove old search highlights

//Remove the previous matches
$span = $('#realTimeContents span');
$span.replaceWith($span.html());

if (searchTerm === "&") {
searchTerm = "&amp;";
searchTermRegEx = new RegExp(searchTerm, "ig");
}
$(selector).html($(selector).html().replace(searchTermRegEx, "<span class='match'>" + searchTerm + "</span>"));
$('.match:first').addClass('highlighted');

var i = 0;

$('.next_h').off('click').on('click', function () {
i++;

if (i >= $('.match').length) i = 0;

$('.match').removeClass('highlighted');
$('.match').eq(i).addClass('highlighted');
$('.ui-mobile-viewport').animate({
scrollTop: $('.match').eq(i).offset().top
}, 300);
});
$('.previous_h').off('click').on('click', function () {

i--;

if (i < 0) i = $('.match').length - 1;

$('.match').removeClass('highlighted');
$('.match').eq(i).addClass('highlighted');
$('.ui-mobile-viewport').animate({
scrollTop: $('.match').eq(i).offset().top
}, 300);
});




if ($('.highlighted:first').length) { //if match found, scroll to where the first one appears
$(window).scrollTop($('.highlighted:first').position().top);
}
return true;
}
}
return false;
}

$(document).on('click', '.searchButtonClickText_h', function (event) {

$(".highlighted").removeClass("highlighted").removeClass("match");
if (!searchAndHighlight($('.textSearchvalue_h').val())) {
alert("No results found");
}


});
</script>
</head>
<body>
<div class="searchContend_h">
<div class="ui-grid-c">
<div class="ui-block-a">
<input name="text-12" id="text-12" value="" type="text" class="textSearchvalue_h" />
</div>
<div class="ui-block-b">

<a href="#" class="searchButtonClickText_h">Search |</a>




<a href="#" class="next_h">Next |</a>


<a href="#" class="previous_h">Previous</a>
</div>
<div id="realTimeContents">



<p>Testing



<p>A is For Apple.

<p>B is for Boy.

<p>C is for Car.

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>


<p>C is for Car.


</div>
</div>
</div>
 
Sort by date Sort by votes
Hi

You call the [tt].animate()[/tt] on an element with class ui-mobile-viewport, but no such element exists in the code you posted.
Better call it on both [tt]html[/tt] and [tt]body[/tt] :
Code: 
$[teal]([/teal][i][green]'html, body'[/green][/i][teal]).[/teal][COLOR=orange]animate[/color][teal]({[/teal]
    scrollTop[teal]:[/teal] $[teal]([/teal][i][green]'.match'[/green][/i][teal]).[/teal][COLOR=orange]eq[/color][teal]([/teal]i[teal]).[/teal][COLOR=orange]offset[/color][teal]().[/teal]top
[teal]},[/teal] [purple]300[/purple][teal]);[/teal]
( Sorry, can not provide explanation on that selector. :-( )

I noticed it does not work reliably, for now blaming the incomplete document. My test indicates that it should work.


Feherke.
feherke.github.io
 
Upvote 0 Downvote
Thank you.

I updated the post.

Does it work for you now?

I still can not get it to work correctly though.

Thank you.
 
Upvote 0 Downvote
Hi

I can not spot out any change in your code. Neither the change I suggested nor other. So it does not work and that was expectable.


Feherke.
feherke.github.io
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
451
lexer
lexer
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
537
Kennelbloke
Kennelbloke
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
936
Mike Lewis
Mike Lewis
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
408
Rayj0000
Rayj0000
penguinspeaks
  • Locked
  • Question
JS Open print dialog page to print a file
Replies
0
Views
192
penguinspeaks
penguinspeaks

Part and Inventory Search

Sponsor

Back
Top