beautiful url input - Free Download Beautiful URL Input Plugin With jQuery - Website Input

Free Download Beautiful URL Input Plugin With jQuery – Website Input

Posted on

This time I will share jQuery Plugin and tutorial about Beautiful URL Input Plugin With jQuery – Website Input, hope it will help you in programming stack.

beautiful url input - Free Download Beautiful URL Input Plugin With jQuery - Website Input
File Size: 4.8 KB
Views Total: 279
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Website Input is a tiny jQuery plugin to create a beautiful URL input field that automatically fetches and displays the Favicon (site logo) inside the input based on the website URL you provide.

How to use it:

1. Download the plugin and put the JavaScript file jquery.website-input.js after jQuery.

1 # NPM
2 $ npm i jquery-website-input
1 <script src="/path/to/cdn/jquery.min.js"></script>
2 <script src="/path/to/jquery.website-input.js"></script>

2. Create a normal input field for the website input.

1 <input type="text" class="website-input" />

3. Initialize the plugin and determine the initial website URL.

1 $(document).ready(function () {
2   $('.website-input').websiteInput({
3     initValue: 'jqueryscript.net'
4   })
5 });

4. Get the website URL you just typed.

1 $(document).ready(function () {
2   $('.website-input').websiteInput({
3     initValue: 'jqueryscript.net',
4     onChange: (value) => {
5       console.log(value)
6     }
7   })
8 });

5. Override the default styles of the website input.

01 $websiteInput__wrapper = $(<div class="wi__wrapper">).css({
02   display: 'flex',
03   alignItems: 'center'
04 }).appendTo($('.container'))
05 $websiteInput__input = $(this).css({
06   display: 'block',
07   border: '1px solid #B0BAC8',
08   padding: '.5em .75em',
09   borderRadius: '.5em',
10   outline: 'none',
11   fontSize: '.9em',
12   fontWeight: 500,
13   fontFamily: 'Arial, Helvetica, sans-serif',
14   color: '#2A3E52'
15 }).appendTo($websiteInput__wrapper)
16 $websiteInput__website = $(<div class="wi__website">).css({
17   display: 'none',
18   height: 32,
19   alignItems: 'center',
20   cursor: 'pointer',
21   backgroundColor: '#f4f4f4',
22   borderRadius: '.5em',
23   paddingRight: '.5em'
24 }).appendTo($websiteInput__wrapper)
25 $websiteInput__website_wrapper = $(<div class="wi__website_wrapper">).css({
26   display: 'flex',
27   alignItems: 'center'
28 }).appendTo($websiteInput__website)
29 $websiteInput__website_logo_wrapper = $(<div class="wi__website_logo_wrapper">).css({
30   display: 'flex',
31   border: '1px solid',
32   borderColor: '#B0BAC8',
33   backgroundColor: '#fff',
34   padding: '.5em',
35   boxShadow: '0 .125rem .25rem rgba(0,0,0,.075)',
36   borderRadius: '.5em',
37   transition: 'border .2s ease-out'
38 }).appendTo($websiteInput__website_wrapper)
39 $websiteInput__website_logo = $(<img width="16" height="16" src="" alt="favicon">).appendTo($websiteInput__website_logo_wrapper)
40 $websiteInput__website_edit = $(<svg width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.394 19.75l-5.481 1.308 1.239-5.551L14.758 4.9l4.243 4.243L8.394 19.749v.001zM6.98 15.506l1.414 1.414 7.779-7.778-1.415-1.415-7.778 7.779zM19.708 1.364l2.829 2.829a1 1 0 0 1 0 1.414l-2.122 2.121-4.242-4.242 2.12-2.122a1 1 0 0 1 1.415 0z" fill="#4F8DF9" fill-rule="nonzero" fill-opacity="1"></path></svg>).appendTo($websiteInput__website_logo_wrapper)
41 $websiteInput__website_text = $(<span class="wi__text">).css({
42   paddingLeft: '.5em',
43   fontSize: '.9em',
44   fontWeight: 500,
45   fontFamily: 'Arial, Helvetica, sans-serif',
46   color: '#2A3E52'
47 }).appendTo($websiteInput__website_wrapper)
48 $websiteInput__website_close = $(<div class="wi__close"><svg width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17.97 6.657a8.003 8.003 0 0 0-11.313 0 8.003 8.003 0 0 0 0 11.314 8.003 8.003 0 0 0 11.314 0 8.003 8.003 0 0 0 0-11.314zm-3.394 9.05l-2.262-2.262-2.263 2.263-1.131-1.132 2.262-2.262L8.92 10.05 10.05 8.92l2.263 2.262 2.262-2.262 1.132 1.131-2.263 2.263 2.263 2.262-1.132 1.132z" fill="currentColor" fill-rule="nonzero"></path></svg></div>).css({
49   marginLeft: '.5em',
50   fontSize: '.75em',
51   color: '#B0BAC8'
52 }).appendTo($websiteInput__website)