X Online Chat
close window

Repositioning Google's "I'm not a robot" reCaptcha popup grid

pdfDownload as PDF


I had a form which appears in an iframe within an overlay div. I needed to implement the "I'm not a robot" reCaptcha into this form. This was a messy setup, because this reCaptcha also uses a overlay containing an iframe to display their "Select all images with XXXXXXX" photo grid. This grid would appear way off to the side, and was getting cropped in my form's iframe. In addition, it caused the form content to scroll up a bit.

Searching around, I found some attempts to address this issue, but although they successfully resized the initial checkbox div, they did not affect the popup grid, since the grid itself is within another iframe which contains third-party content. To make matters worse, the iframe and grid are not rendered until the checkbox is checked, and the div I need to access does not have an ID.

I came up with a simple hack which does the trick, at least in my case:
function checkForGooglePopup()
{
	foundIt = false;

	var divs = document.getElementsByTagName('div');

	for(i=0; i<divs.length; i++)
	{
		if (!foundIt && (divs[i].style.zIndex == 2000000000))
		{
			window.scrollTo(0,0);

			foundIt = true;

			divs[i].style.top = '0px';
			divs[i].style.left = '0px';
			divs[i].style.margin = '0px';
		}
	}
}

setInterval('checkForGooglePopup()', 500);
This checks the page every half-second, looking for a div with a z-index 2000000000, which is the value Google assigns the div which contains the grid iframe. Google also assigns z-index 2000000000 to several other divs, but we only need to alter the main div -- i.e. the first one we come across. When we find it, fix the page scroll, set the "foundIt" flag, then move the popup grid to the upper-left corner of the page.

Hopefully, Google won't change the z-index any time soon!