Recaptcha popup is overflowing the users screen, how to reposition? - javascript

This is a problem which only started today with zero code changes to the pages CSS, so i have a suspicion that Recaptcha changed its code, but i cant see anyone else being affected by this.
When i click on the "I'm not a robot" for a recaptcha thing on my website, the popup that gives the "Select all images with x" response is being positioned on the wrong side of the captcha box and this is causing half of it to be hidden because it goes over the screen on low resolutions.
The other problem i found, is that if you scroll the webpage down, and click on a recaptcha element that requires you to scroll, the popup no longer appears next to the element.
So my question is, can i force a style onto this popup? it has no class or element ID.
Also is anyone else having this problem, or experienced it before?

The reCaptcha uses an iframe to load. Google doesn't give much for customization of their module. Try adding the data-size="compact" attribute to the loading div. It is the only other option they offer. Trying to enforce styles on the module gets really messy, really fast.
<div class="g-recaptcha" data-size="compact" data-sitekey="your_key"></div>
There is another option, use the css transform to scale the iframe.
https://www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/
<style>#media screen and (max-height: 575px){
#rc-imageselect, .grecaptcha {
transform:scale(0.77);
-webkit-transform:scale(0.77);
transform-origin:0 0;-webkit-transform-origin:0 0;}
</style>

Target the entire iframe of popup with css (However the recaptcha does not assign any id or class to the iframe parent div so it will only work if you have only 1 frame in the page)
div iframe{
transform:scale(0.77);
-webkit-transform:scale(0.77);
transform-origin:0 0;
-webkit-transform-origin:0 0;
}

Related

Why does this static positioned div moves upward from its position?

This seems a very frustrating issue in my blog. I can reproduce it only in Chrome (60+). The main div (.columns.fauxcolumns) where the header and content are displayed is cropped from the top. Basically it's hidden (overflow:hidden is there) and somehow it is 10-20 pixels upwards from its normal position; flows out of .columns.fauxcolumns, even it (.colums-inner) is static.
How to inspect / re-produce:
Please visit https://sourcewing.blogspot.in/search/label/articles
Control + Click on MORE in the first article (to open in new tab)
Before the page is loaded fully in the tab that you've just opened, click on the tab and DON'T SCROLL the page. SCROLL UP ONLY WHEN PAGE IS FULLY LOADED.
When you'll scroll up, you'll probably find the issue.
You might not find it with just one try as it's produced in this scenario only.
Why is it happening? I know we can somehow fix it but I believe it's not a normal issue as it is observed only in Chrome.
The following screenshot might help:
Note: November 28, 2015 is cropped in screenshot.
I found the issue being the loading class not been removed after the page has loaded. This is something to do with JavaScript. The correct one should be the script should automatically remove the loading class from <body>. Since this being a show-stopper in the presentation, it can be kinda fixed using the following CSS:
.loading .main-inner .columns.fauxcolumns {
overflow: visible;
}

How to disable overflow on body but not iframe (Meteor.js)

Im working on a Meteor POS project at the moment. (for people who don't know Meteor is a framework and can use javascript/jquery and all kinds of web app scripting). The application is suppose to be a full screen POS that does not need to scroll at all, but only the area which entered products needs scrollbar (iframe).
I ran into a problem that I don't know how to solve, which is how to disable overflow on the entire page but not the iframe. There are a few things I have tried but failed:
Setting body to overflow: hidden and iframe auto. Which of course it doesn't work because the entire body is not able to show the scroll bar and iframe is embedded within.
using onmouseenter (mouseover) and onmouseleave (mouseout) to listen for changes and using javascript or jquery to toggle between hidden or auto. I tried and even console logged but it doesn't want to work in meteor.js for some reason. Even if it worked I think the main page scroll bar will show too which I don't want.
Here is an image, the top and bottom is part of the body and the middle part filled with items are using iframe.
Thanks for any help!
It has been answered by axel.michel in the comment.
It was a better solution overall than using iframe.
Thanks!

div relative to change Iframe

I have a payment page that build from main page and third party iframe.
Under the iframe there is a relative div.
My problem is that sometimes the iframe add some warnning messegase at the bottom of it and override the relative div. see links for screen shots: pic1 and pic2
what should I do in order to make my div position will adjusted to the Iframe?
You can´t do this, as the iframe is from another source. So it´s not possible to look at it´s contents, due to cross-domain poilicies.. Your only option is to make the iframe smaller (so a scrollbar gets displayed) or move your "hint" further down.
I guess it´s illegal anyway to modify a payment processors site, by overlaying other content, that suggest, it is part of the payment processors process!
I solve it just by leaving enough space between the iframe and the button, so if the warning messages appears, the button is very close to the messages.

Chrome Extension page popup.html doesn't resize

So I have this Chrome Extension that loads some content off the internet. Basically the user clicks on the popup icon, then some JavaScript in the background page loads some page, parse an image from it and puts it into the popup.html page. The problem is that the popup.html is not resizing to fit the actual size of the content. I saw a couple of similar questions here on StackOverflow, each one answered with "put <!DOCTYPE html> on top of your popup.html page" which in my case is not working. The size of the popup remains very small (about 1cm square).
Previously I had some CSS style that fixed the width & height but I noticed my content is not always the same size, so I would like the popup.html page to automatically resize itself to fit the content.
I know that in the very worst case I could parse width and height of the image and set it as CSS but I feel like there is a more elegant solution.
Thanks
I was able to dynamically resize the popup with a little bit of jQuery.
$('html').height($('#menu').height());
Where #menu is just a div that wraps all of the content. body didn't properly resize, so I couldn't use that.
Apparently just changing the height of html is enough.
I managed to solve the problem. So apparently if I load a content into popup.html the popup won't resize automatically. There is no way it will. So I tried to modify the CSS of the page after loading the content to display, but also this wasn't working. Then I found out that there should be no hidden content in the page when dynamically resizing it. When I loaded the content from the web, I hid the whole page in an hidden div, then through JavaScript I accessed the element of the page that I was interested in, grabbed it and put into a visible container in the popup page. To solve the issue I just had to "delete" through document.getElementById('myHiddenDiv').innerHTML = "" the content of the hidden div and magically the popup resized :-).

How to make a page preloader similar to Apple's Mac page

If you have a look at Apple's Mac page on their website. http://www.apple.com/mac/
Their "body" displays an image in the center while the page is loading. After the page is fully loaded, their content fades in. If you use Chrome or Safari and open the Element Inspector, you'll see their body gets the class="loaded revealed" when the page is loaded. And that triggers the content to fade in. If you remove the classes, the content will fade out.
I'm looking for something similar to this for my website. I don't want the whole entire content to not display, I still want to display the header and footer. So basically I want the div#content_area to slide down on document ready... The only problem is, they don't use any kind of display:none; for their body. They're a bit more careful about that, because if the JS file fails, the content will still display.
How can I make this? They way they do it must be lightweight because anybody can write something like
$(document).ready(function() {
$('div#content_area').attr(class, loaded revealed);
});
All I need to do is add the .slide() function and hide the content until the page loads.
Setup your DIV of content right where you want it... setup the image you want to be a placeholder right over the top (with absolute if possible/necessary).
In CSS use the z-index property to keep the image above the other.
What you do then is make the IMG a display:none; property, and then as they page is loading you can turn it on with jQuery... so with JS the placeholder shows and sits above... without JS, the image placeholder is invisible, and the user simply sees the content DIV as it loads.
That make sense?
Have found out that Apple has all it's elements opacity set to 0. And on the body load, it adds the classes to the body and uses some basic CSS like this
div{
opacity:0;
}
body.loaded div {
opacity:1;
transition:etc.etc.;
}
Here's my version, http://jsfiddle.net/dqUaX/1/
What's great about it is:
Opacity is considered a CSS3 attribute so if a browser is outdated the content won't hide.
I am actually using jQuery to set the opacity to 0 so even if the user has a css3 browser, but has JavaScript disabled, the content will still display.
Since you'll need CSS3 to hide the div, I used a giant DATA URI for the background image so it doesn't have to load.
Pretty awesome no?
You must put the script before the end of the <body> closing tag...

Categories