Wrox Programmer Forums
|
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old September 13th, 2011, 02:37 PM
Authorized User
 
Join Date: Sep 2004
Posts: 68
Thanks: 1
Thanked 0 Times in 0 Posts
Default Find feature on web page

Good afternoon.


I would like to build a browser-like find feature for my web page. The functionality would be the same as when your in your browser and hit control F on your keyboard: you start typing a word and all its locations are highlighted. You can then click "Next" and find the next occurrence of the word you types, etc.


Can this be done with JavaScript?


I want to use this feature to allow my users to search a directory of students at my school. I want to make this find feature part of my web page because not all of my users will know to hit control F to kick off a find feature in a browser.


Any ideas on this?


Thank you for your help.


Sal
 
Old September 13th, 2011, 04:10 PM
joefawcett's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

Well it can be done but is not a trivial task. Why not educate rather than hand hold and just put a message 'Use CTRL+f to search this page'?
__________________
Joe
http://joe.fawcett.name/
 
Old September 14th, 2011, 07:47 AM
Authorized User
 
Join Date: Sep 2004
Posts: 68
Thanks: 1
Thanked 0 Times in 0 Posts
Default

Joe,

Good morning and thank you for your response.

Educating my users would be ideal, but I want the find feature to be obvious--it's a requirement for my users.

What would you recommend as far as coding JavaScript to do the job? Is there something w/ html5 that would help me?

Thank you so much.

Sal
 
Old September 14th, 2011, 08:17 AM
joefawcett's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

Well you'd need to:
  • Create a dialogue box using a hidden div that has the search box, options and back and forward buttons. It needs to remain in place as the page scrolls
  • Write a function that examines the text on the page for matches
  • replace each match with a <span>, suitably styled to highlight, and the original text
  • Focus on the first created <span>
  • Have code associated with the back and forward buttons that moves through the newly created <span> elements
  • Include a button or link that shows the dialogue box created in step 1
Alternatively a message on the page 'Use Ctrl+f' to search this page.

Good luck
__________________
Joe
http://joe.fawcett.name/
 
Old September 14th, 2011, 08:19 AM
Authorized User
 
Join Date: Sep 2004
Posts: 68
Thanks: 1
Thanked 0 Times in 0 Posts
Default

thank you!





Similar Threads
Thread Thread Starter Forum Replies Last Post
Feature.xml Page 108 CH 3 AlexGrab BOOK: Beginning SharePoint 2010 Development 1 November 3rd, 2011 10:00 AM
Need help to find web.config mehdisatter BOOK: Beginning ASP.NET 4 : in C# and VB 1 June 11th, 2011 02:27 PM
Hyperlink is not opening the web page, giving error ‘browser can’t find the file:’ arbab Javascript 4 March 15th, 2011 02:45 AM
Could not find a part of the path '../../Web bex ASP.NET 2.0 Basics 4 March 21st, 2009 04:13 PM
How to diplay web page inside another web page win cyberjoe C# 2 March 1st, 2007 05:35 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.