Power PWChecker – jQuery Strong Password Plugin

Power PWChecker jQueryPlugin observes passwords as users type and provide instant password strength check (Weak, Medium, or Strong). This encourages users to review their password selection and ensure that the password is strong and secure.  Power PWChecker also allows you to enforce password length policy by specifying minimum and maximum password length. It also matches password entries and provides visual alert in case of inconsistent passwords.

How to use

– add the latest reference to jQuery library

– add a reference to pschecker.js file

– add a reference to style.css file

The HTML

<div class="password-container">
  <p>
    <label>Enter Password:</label>
    <input type="password" class="strong-password"/>
  </p>
  <p>
    <label>Confirm Password:</label>
    <input type="password" class="strong-password"/>
  </p>
  <p>
    <a href="#" class="submit-button locked">Submit</a>
  </p>
  <div class="strength-indicator">
    <div class="meter">
    </div>
    Strong passwords contain 8-16 characters, do not include common words or names,
    and combine uppercase letters, lowercase letters, numbers, and symbols.
  </div>
</div>
Fire the plugin
$(document).ready(function () {
  $('.password-container').pschecker({ onPasswordValidate: validatePassword, onPasswordMatch: matchPassword });
});

 

 

CSS3 PIE

PIE.htc  makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features.

Let’s say you want to make a fancy contact form with rouded-corner inputs and textarea, and a background color for the entire form, like the one below.

You use the following:

form { background: #f8f8f4; }
input, textarea {
border: 1px solid #d8d6ba;

-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;

behavior: url(/PIE.htc);
}

But in IE8 and IE7 the background of the form ruins everything and the inputs aren’t visible, like in the photo below:

In order to repair the inputs and the textarea, and to keep the form’s background, use the following trick: position your elements:

input, textarea { position: relative; }

Using this trick, IE7 and IE8 will work just fine.

Custom File Input with jQuery

Browsers offer almost no control over how file inputs are presented visually, making it difficult to incorporate them into a uniform interface design.

From the book Designing with Progressive Enhancement, the jQuery Custom File Upload Input plugin can be used to customize the file inputs very simple.

The demo can be viewed here and the sources can be downloaded from here. The plugin code is open source, so you can help improve the plugin.

How does it work

The widget creates a custom-styled file control using div and span elements, and then uses JavaScript to set the native input‘s opacity to zero and dynamically position it invisibly between the cursor and the custom control, so that the user interacts only with the input.How to use it

1. After you downloaded the source files from github,  include the scripts and the css files:

<link href="css/basic.css" type="text/css" rel="stylesheet" />
<link href="css/enhanced.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jQuery.fileinput.js"></script>

2. The HTML markup

<label for="file">Choose photo</label>
<input type="file" name="file" id="file" />

3. Start the plugin

$(function(){
$('#file').customFileInput();
});

Pixastic – JavaScript for Processing Images

With Pixastic you can apply an effect on a image (like desaturate, blur, sharpen, sepia and others) without needing two photos and change them on hover, mouseenter.

In the following example I’ve used Pixastic to turn an image from grey scale to colored on mouse over.

Step 1 – download the plugin

First go to the download page of the plugin here and on ‘Build your own‘ choose ‘Pixastic core’ and ‘jQuery plugin’ for the components and for the ‘Actions’ check the ones you like to use (in my case ‘Desaturate’). You will download a file called ‘pixastic.custom.js’.

Step 2 – include the files

Include in the head of  your page the following files:

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="pixastic.custom.js"></script>

Step 3 – the markup

<div class="parent" data-image="photo1"><img src="/images/photo1.jpg" id="photo1" alt=""/></div>
<div class="parent" data-image="photo2"><img src="/images/photo2.jpg" id="photo2" alt=""/></div>

Here we have two colored images that we want to transform to grey scale (so when the page loads the images are first grey scale), and when we go with the mouse over them, to reverse to color.

Step 4 – initiate the plugin

You will need to include this code after the first 2 script files in the head of your page.

<script type="text/javascript">
$(document).ready(function(){
  $("div.parent").each(function(index, obj) {
    $("#" + $(obj).attr("data-image")).pixastic("desaturate");
  });

  $("div.parent").mouseenter(function(e) {
    var self = document.getElementById($(e.currentTarget).attr("data-image"));
    Pixastic.revert(self);
  });

  $("div.parent").mouseleave(function(e) {
    $("#" + $(e.currentTarget).attr("data-image")).pixastic("desaturate");
  });
});
</script>

*The second image is with mouse over