legomolina / LMWeb-finder

Web finder like Ctrl+F in modern browsers

LMWeb Finder (v1.3)

Introduction

LMWeb Finder is a little library that improves native web browser finder (Crtl + F).
With LMWeb Finder you can customize colors from highlighted matches and the area to search for. Also, you can put this finder where you want in your web since it works from a text input and a button.

Installation

This library needs Jquery to work.

    <script src="jquery.js" type="text/javascript"></script>

To use LMWeb Finder you need to import js file into your html:

    <script src="lmwebfinder.js" type="text/javascript"></script> 

Also you need to create a little script into your html head in order to create a global variable:

<script>
    window.onload = function () { 
        original = document.getElementById('findIn').innerHTML; //original text
    } 
</script>

Finally, make an instance of LMWebFinder class anywhere in your page:

<script>
	LMWebFinder = new LMWebFinder();
</script>

Second you need to create an element where you can write inside it (input, textarea...) and put an "onkeydown" event with element.value and event parameters to use it with "Enter" key: ```html ``` And add an element with "onclick" event to launch the clean script (button, a, span...) in order to clean input and remove the highlights: ```html ``` Add an element with "onclick" event to launch the script (button, a, span...) taking the value of the input to send to the search function: ```html ``` Finally you need to put all the content you want to search for inside an element (div, body, html...) with any ID:

<div id="findIn"> 
	/* Content to search for */ 
 	<ul> 
	 	<li>You</li> 
		<li>Can</li> 
		<li>Find</li> 
		<li>In</li> 
		<li>Lists</li> 
	</ul>
    <p>You can search in paragraphs also!</p> 
    Obviusly you can search in plain text
    <style>You can't find inside style, script, meta, title and link tags</style>
 </div>

Configuration

As I said before you can customize colors from highlighted matches. You only need to change two variables to make this. Default colors are yellow (#FFFF00) for all matches and red (#FF0000) for focused match. Colors can be set in hexadecimal form or allowed web names for colors.
Change primary color:

<script>
	LMWebFinder.primaryColor = "new primary color";
</script>

Change secondary color:

<script>
	LMWebFinder.secondaryColor = "new secondary color";
</script>

Also you can change the element id in case you don't like the default one (findIn) or you have it already in use:

<script>
	LMWebFinder.findId = "new ID";
</script>

There is an example for you to view how it works.
.

LMWebFinder by legomolina is licensed under a Creative Commons Reconocimiento-CompartirIgual 4.0 Internacional License.