Chroma Hash: Interesting visualization of your password

Matt Thompson has created a fun little jQuery plugin called Chroma-Hash that "dynamically visualizes secure text-field values using ambient color bars":
Password entry can be frustrating, especially with long or difficult passwords. On a webpage, secure fields obscure your input with •'s, so others can't read it. Unfortunately, neither can you—you can't tell if you got your password right until you click "Log In".

Here is a snippet of the magic:


  1. $(this).css({position: 'absolute',
  2. left: position.left + width - 2,
  3. top: position.top,
  4. height: height + "px",
  5. width: 8 + "px",
  6. margin: 5 + "px",
  7. marginLeft: -8 * (i + 1) + "px"
  8. }
  9. );
  10. });
  11. var id = $(this).attr('id');
  12. var md5 = hex_md5($(this).val());
  13. var colors = md5.match(/([\dABCDEF]{6})/ig);
  14. $(".chroma-hash").stop();
  15. chromaHashesForElement(this).each(function(i) {
  16. $(this).animate({backgroundColor:"#" +
  17. colors[i]});
  18. });

If you have better solution, just tell me !

0 comments: