amstram amstram - 1 year ago 81
CSS Question

Hide a div when out of focus

In drupal, when editing the user profile form, this div appears when we click (focus) on the password field.

<div class="password-suggestions description" style="display: block;">
Security hints and tips :
<ul><li>Tip #1 </li>
<li>Tip #2</li></ul></div>

Its inline style switches from display: none to block.

But when we click elsewhere, it doesn't switch back so it stays visible and adds some unnecessary clutter to the page.

Since i know very little javascript, i need some help to hide the password-suggestions div when it's not needed.

Here's the js that handles this :

Drupal.behaviors.password = {
attach: function (context, settings) {
var translate = settings.password;
$('input.password-field', context).once('password', function () {
var passwordInput = $(this);
var innerWrapper = $(this).parent();
var outerWrapper = $(this).parent().parent();

// Add identifying class to password element parent.

// Add the password confirmation layer.
$('input.password-confirm', outerWrapper).parent().prepend('<div class="password-confirm">' + translate['confirmTitle'] + ' <span></span></div>').addClass('confirm-parent');
var confirmInput = $('input.password-confirm', outerWrapper);
var confirmResult = $('div.password-confirm', outerWrapper);
var confirmChild = $('span', confirmResult);

// Add the description box.
var passwordMeter = '<div class="password-strength"><div class="password-strength-text" aria-live="assertive"></div><div class="password-strength-title">' + translate['strengthTitle'] + '</div><div class="password-indicator"><div class="indicator"></div></div></div>';
$(confirmInput).parent().after('<div class="password-suggestions description"></div>');
var passwordDescription = $('div.password-suggestions', outerWrapper).hide();

// Check the password strength.
var passwordCheck = function () {

// Evaluate the password strength.
var result = Drupal.evaluatePasswordStrength(passwordInput.val(), settings.password);

// Update the suggestions for how to improve the password.
if (passwordDescription.html() != result.message) {

// Only show the description box if there is a weakness in the password.
if (result.strength == 100) {
else {;

// Adjust the length of the strength indicator.
$(innerWrapper).find('.indicator').css('width', result.strength + '%');

// Update the strength indication text.


// Check that password and confirmation inputs match.
var passwordCheckMatch = function () {

if (confirmInput.val()) {
var success = passwordInput.val() === confirmInput.val();

// Show the confirm result.
confirmResult.css({ visibility: 'visible' });

// Remove the previous styling if any exists.
if (this.confirmClass) {

// Fill in the success message and set the class accordingly.
var confirmClass = success ? 'ok' : 'error';
confirmChild.html(translate['confirm' + (success ? 'Success' : 'Failure')]).addClass(confirmClass);
this.confirmClass = confirmClass;
else {
confirmResult.css({ visibility: 'hidden' });

// Monitor keyup and blur events.
// Blur must be used because a mouse paste does not trigger keyup.

Answer Source

Rather than defining another function and adding an attribute, like in the other answer, you should just simply chain another .blur() function, like so:

passwordInput.keyup(passwordCheck).focus(passwordCheck).blur(passwordCheck).blur(function() { $('div.password-suggestions').hide(); });

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download