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.
Related
I'm placing a form (that I host) on this demo page (cross-domain).
I can add code on both parent and child.
The iframe auto-resize works perfect (using iframe-resizer), but when submitting the form on mobile or desktop with narrow window (so longer scrollbar) the thank you message is not visible right away. You need to scroll the parent page up a bit to see it which may cause confusion to people.
The iframe is perfectly shrunken down to the right size, but somehow need to do a custom postMessage to tell the parent to scroll/jump their page up to the top of the embedded iframe.
Any thoughts on how to use the already existing iframe-resizer script or can i just do a postMessage without it, if yes how?
Thank you in advance!
Have you tried
document.getElementById('thankyou').scrollIntoView()
Good day,
I have taken over a Drupal site that uses iframes for the main content area. I have a minor issue that I'd like to correct.
When a user clicks a link to a page that has a lot of content, then uses the browser's back button to navigate to the previous page, the old content appears, but the iframe's src does not change. I'm using some javascript to set the height of the page dynamically, so when the previous page has less content, there's a huge amount of empty space between the content and the footer.
Here's a diagram that hopefully illustrates what I'm working with:
So upon returning to the previous page, via the browser back button, the footer is pushed way down below because the source has not changed, and therefore the page isn't rendered again.
I've not really used iframes because they aren't great to work with. I'm wondering, is there a way to force the source of the iframe to change when using the browser back button?
I have an iframe that is the same size as an entire page. It is over the page with no problem, however when scrolling the iframe in IE 8 the body underneath the frame scrolls with the frame. You can also click elements underneath the frame as well.
How can I get the browser to target only the iframe when it is visible?
I have tried
popup.focus();
top.document.body.blur();
but those come up undefined in the IE8 console?
thanks
Instead of an iframe covering the rest, you could do two div elements, and make only one visible. You can still put the iframe in the second div, but the point is to make only one div visible at a time.
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 :-).
Is it possible to build a Firefox extension that displays a floating, persistent iFrame over the page content?
I know it's possible to add iFrames using XUL. For instance, you can add an iFrame to a persistent sidebar. However, I want the iFrame to float over the page content, not cause the content to shrink. So far, my only option is to add the iFrame to the DOM, then use CSS "fixed" positioning to float the iFrame.
The iFrame must also persist across page loads, exactly as the sidebar does. Adding an iFrame to the DOM, unfortunately, causes the iFrame to vanish when the browser renders a new page (e.g., after clicking a link).
Any clues?
Thanks!
Another add-on you can look at is Shopping Helper It has an iframe at the bottom whenever the page is displayed a product
Yes. I was able to do this by setting the attribute noautohide in the panel you use.
E.g.
<panel id="yourOverlay" noautohide="true">
You might be able to do something like this with Greasemonkey, it allows you to customize how web pages look and you could make your script available to others.