version 0.3

README.md

@@ -6,23 +6,24 @@ Combine jQuery and zxcvbn to create a password strength meter.
 How to use
 ----------
 
-Add following wrapper to your document - preferably nearby the 
+Add following wrapper to your document - preferably nearby the
 password field.
 
 ```HTML
 <div class="strengthify-wrapper"></div>
 ```
 
-Add `jquery` (tested with 1.10.0), `jquery.strengthify.js` and 
-`strengthify.css` to your document. 
+Add `jquery` (tested with 1.10.0), `jquery.strengthify.js` and
+`strengthify.css` to your document.
 
 ```HTML
 <script src="jquery-1.10.0.min.js"></script>
+<script src="jquery-tipsy.js"></script>
 <script src="jquery.strengthify.js"></script>
 <link rel="stylesheet" href="strengthify.css" type="text/css">
 ```
 
-Because [zxcvbn](https://github.com/lowe/zxcvbn) is really 
+Because [zxcvbn](https://github.com/lowe/zxcvbn) is really
 heavy-weigth it will be loaded asynchronous from `zxcvbn/zxcvbn.js`,
 but this can be configured with an optional parameter.
 
@@ -32,14 +33,14 @@ Then call `.strengthify` on the password input field.
 $('#password-field').strengthify()
 ```
 
-That's it. Now the password strength meter will be updated on 
+That's it. Now the password strength meter will be updated on
 each keystroke.
 
 Configuration
 -------------
 
 The path and the title of the different strength categories can
-be configured with the first parameter of `.strengthify`. 
+be configured with the first parameter of `.strengthify`.
 
 Default:
 
@@ -66,9 +67,16 @@ Versions
 --------
 
 <dl>
+  <dt>0.3</dt>
+  <dd>some fixes:
+    <ul>
+      <li>migrate from "display" to "opacity"</li>
+      <li>fix pasting to input field</li>
+      <li>add tipsy with strength</li>
+    </ul>
+  </dd>
+  <dt>0.2</dt>
+  <dd>solve mimetype issues</dd>
   <dt>0.1</dt>
   <dd>Initial version</dd>
 </dl>
-
-
-

jquery.strengthify.js

@@ -2,7 +2,7 @@
  * Strengthify - show the weakness of a password (uses zxcvbn for this)
  * https://github.com/kabum/strengthify
  *
- * Version: 0.2
+ * Version: 0.3
  * Author: Morris Jobke (github.com/kabum)
  *
  * License:
@@ -65,9 +65,13 @@
 				var password = $(this).val()
 
 				// hide strengthigy if no input is provided
-				$('.strengthify-wrapper').css(
-					'display',
-					(password === '') ? oldDisplayState : 'inline-block'
+				var opacity = (password === '') ? 0 : 1
+				$('.strengthify-wrapper').children().css(
+					'opacity',
+					opacity
+				).css(
+					'-ms-filter',
+					'"progid:DXImageTransform.Microsoft.Alpha(Opacity=' + opacity * 100 + ')"'
 				)
 
 				// calculate result
@@ -102,8 +106,19 @@
 				$('.strengthify-wrapper').attr(
 					'title',
 					options.titles[result.score]
+				).tipsy({
+					trigger: 'manual',
+					opacity: opacity
+				}).tipsy(
+					'show'
 				)
 
+				if(opacity === 0) {
+					$('.strengthify-wrapper').tipsy(
+						'hide'
+					)
+				}
+
 				// reset state for empty string password
 				if(password === '') {
 					$('.strengthify-container').css('width', 0)
@@ -115,4 +130,4 @@
 		return me
 	};
 
-}(jQuery))
+}(jQuery))

strengthify.css

@@ -1,11 +1,20 @@
 /**
  * Strengthify - show the weakness of a password (uses zxcvbn for this)
  * https://github.com/kabum/strengthify
- * Version: 0.1 *
+ * Version: 0.3
  * License: The MIT License (MIT)
  * Copyright (c) 2013 Morris Jobke <[email protected]>
  */
 
+.strengthify-wrapper > * {
+	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+	filter: alpha(opacity=0);
+	opacity: 0;
+	-webkit-transition:all .5s ease-in-out;
+	-moz-transition:all .5s ease-in-out;
+	transition:all .5s ease-in-out;
+}
+
 .strengthify-bg, .strengthify-container, .strengthify-wrapper, .strengthify-separator {
 	height: 3px;
 }
@@ -36,4 +45,4 @@
 }
 .password-good {
 	background-color: #3C3;
-}
+}