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.
Related
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.
I was wondering if is possible to customize the scrollbars for an iframe. Both the iframe and the page are on the same domain so there are no issues there. If so, what route should I take and is this something that I should be doing? (design-wise).
I will be updating this as I get it working. Just thought I'd try to get some insight ahead of time.
Thanks
Okay, I ended up getting it working using jScrollPane. The only hangup I had was that jquery.jscrollpane.css needed to be inside each iframe, not outside, which makes sense.
Afterwards, all it took was
$("iframe").each(function(){
var body = $("body",this.contentWindow.document) ;
body.jScrollPane();
});
where the above javascript is present in the parent of the iframe. The jScrollPane js files are also in the parent, not each individual iframe.
Afterwards, the scrollbars are sticky. I solved this by covering the iframe in an invisible element after the scrollbar is clicked and uncovering when released. This was done by
$(".jspDrag",body).on('mousedown',cover_iframes);
$("body").on('mouseup',uncover_iframes);
where cover_iframes and uncover_iframes call the .show() and .hide() of the covering element, respectively.
Now I noticed that when the scrollbar is moved, it is shifted over by the offset of the iframe. I am working on fixing that now.
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 :-).
I have a page with a fixed header div like a tool bar and an Iframe which loads content form the same/different domains.
The problem is whenever a link inside the iframe is clicked, it scrolls the page to the top hiding the toolbar itself. This happens in desktop/mobile webkit browsers.
Note:- I found the reason for why the iframe scrolls the parent page when any link inside it is clicked, it turns out that if the anchor tags within the iframe have empty hash values i.e href="#" and if they are clicked then it causes the parent page to scroll to point from where the iframe starts. This happens in webkit browsers only for me. This is not reproducible in FF.
If you are dealing with the problem in Javascript simply use this code:
ifrm.setAttribute("onload","scroll(0,0);"); //(ifrm is the id of the iframe)
or
<script language="javascript">
function totop() {
scroll(0,0);
}
</script>
and in your html for iframe, add an onload attribute as below:
<iframe name="iframe" onload="totop()">
Got this 2nd solution from another forum, and changed to the 1st one to suit my requirement as I am creating the iframe element and setting its properties in javascript and not in html. It worked for chrome as well as IE. FF didn't have the problem in the first place.
Is it possible to scroll(0,0) to the top of the parent page when the user browses in an iframe? For example, we have an iframe that is the entire height of the page with search results. When you click the next page button in the iframe, the focus stays at the bottom of the page.
I'm not even sure if it's possible to detect this. The iframe src value doesn't actually change.
P.S. I don't know why this site must use an iframe, but IE6 is the standard browser so I didn't ask questions.
Actually, the onload event does appear to work when navigating within an iframe.
<iframe src="http://mysite.com" height="2392px" width="100%" name="searchFrame" onload="scroll(0,0);"></iframe>
As an alternative, you can have the iframe ask the parent frame to scroll to the top with
parent.scrollTo(0,0);
I haven't researched the official browser support for it, but it works in IE9, FF10, Chrome 17 and Safari 5.1.
<iframe onload="parent.location= 'http://mysite.com/page.html#nameofdivonthetopofpage';" ...