The new reCAPTCHA is here. A significant number of your users can now attest they are human without having to solve a CAPTCHA. Instead with just a single click they’ll confirm they are not a robot. We’re calling it the No CAPTCHA reCAPTCHA experience.
Javascript
// Resize reCAPTCHA to fit width of container
// Since it has a fixed width, we're scaling
// using CSS3 transforms
// ------------------------------------------
// captchaScale = containerWidth / elementWidth
function scaleCaptcha(elementWidth) {
// Width of the reCAPTCHA element, in pixels
var reCaptchaWidth = 304;
// Get the containing element's width
var containerWidth = $('.container').width();
// Only scale the reCAPTCHA if it won't fit
// inside the container
if(reCaptchaWidth > containerWidth) {
// Calculate the scale
var captchaScale = containerWidth / reCaptchaWidth;
// Apply the transformation
$('.g-recaptcha').css({
'transform':'scale('+captchaScale+')'
});
}
}
$(function() {
// Initialize scaling
scaleCaptcha();
// Update scaling on window resize
// Uses jQuery throttle plugin to limit strain on the browser
$(window).resize( $.throttle( 100, scaleCaptcha ) );
});
CSS
.g-recaptcha {
transform-origin: left top;
-webkit-transform-origin: left top;
}
