https://github.com/legomolina/lmweb-finder

Web finder like Ctrl+F in modern browsers
https://github.com/legomolina/lmweb-finder

Last synced: about 1 month ago
JSON representation

Web finder like Ctrl+F in modern browsers

• Host: GitHub
• URL: https://github.com/legomolina/lmweb-finder
• Owner: legomolina
• Created: 2015-05-22T16:13:04.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2018-03-13T14:13:56.000Z (almost 7 years ago)
• Last Synced: 2023-03-02T01:23:18.082Z (almost 2 years ago)
• Language: JavaScript
• Size: 86.9 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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.


```javascript

    

```

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

```javascript

     

```

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

```javascript

    window.onload = function () { 

        original = document.getElementById('findIn').innerHTML; //original text

    } 

```

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

```javascript

	LMWebFinder = new LMWebFinder();

```




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:

```html

 

	/* Content to search for */ 

 	
 

	 	
You
 

		
Can
 

		
Find
 

		
In
 

		
Lists
 

	

    
You can search in paragraphs also!
 

    Obviusly you can search in plain text

    You can't find inside style, script, meta, title and link tags

 

 ```

 


 

##### 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:

```javascript

	LMWebFinder.primaryColor = "new primary color";

```

Change secondary color:

```javascript

	LMWebFinder.secondaryColor = "new secondary color";

```

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

```javascript

	LMWebFinder.findId = "new ID";

```


 

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.