amstram amstram - 9 months ago 48
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.


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(); });