This jQuery library creates browser padlock examples so you can educate your users about how to know if their connection to your site is secure.
<script src="path/to/jquery/1.10.1/jquery.min.js"></script> <link rel="stylesheet" href="padlock.css"> <script src="bowser.min.js"> </script> <!-- optional-ish --> <script src="padlock.js"> </script>
<div class="padlock"> </div>
<script>$('.padlock').padlock();</script>
You may set additional options through data- attributes or passing an options object like this .padlock({ ... }).
| option | description |
|---|---|
data-padlock-browser or { browser: "..." } |
A browser code from the table below. Defaults to autodetecting your browser. |
data-padlock-domain or { domain: "..." } |
The domain name to show in the address bar. Defaults to the domain name of the page. |
data-padlock-path or { path: "..." } |
The path part of the URL to show in the address bar. Defaults to the path of the current page. |
data-padlock-ev-identity or { evIdentity: "..." } |
Makes the padlock look as if the SSL certificate has an extended validation identity. Set this to the text to show. |
The following browsers are supported. Each browser code is tested to render properly in that particular browser version and in the latest version. Submit a pull request to add more!
| Code | Browser | Versions |
|---|---|---|
chome35 | Google Chrome | 11–37 |
mobilechrome40 | Chrome on Android | 40 / 4.2.2 |
firefox32 | Mozilla Firefox | 14–32 |
firefox8 | Mozilla Firefox | 8–13 |
ie9 | Internet Explorer | 9–10 |
ie8 | Internet Explorer | 8 |
opera15 | Opera | 15–20 |
safari5 | Safari | 4–5 |
android4 | Android (stock browser) | 4.1.2 |