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.
Related
Running into an issue here. I have an iFrame that on click needs to open up another page within a separate iframe on the same parent page (two iframes on a single parent page on frame 1 links open in frame 2). The UX function requires that the second iframe fade in from hiding. We are able to get the frame to load but the problem is that the .fadeIn does not work with .click().
jQuery Code on iframe 1:
$(".frame-link").click(function() {
$('#node-frame', window.parent.document).fadeIn();
});
It works fine without the click function if the iframe 1 script is simply:
$('#node-frame', window.parent.document).fadeIn();
When we attempt to do an on click command no luck. Anyone know what we might be missing?
Note:
#node-frame css set to hidden on parent css
I have this weird issue in chrome (only in chrome).
I have a page with std layout (header,content,footer with left and right margin). Content section has an iframe containing many anchor tags of the form Text
When any of this anchor tag is clicked, header goes hidden. Any anchor tag of the same form but outside the iframe works fine.
I have verified that the DOM has the header elements intact. Display is not 'none' (Zooming in the page to 150%, header starts appearing slightly).
When I force the browser to redraw the page, like changing any css attribute(height) of the content section , header appears.
When I change the href from '#' to say '#nonexistent', the link works perfectly fine.
One quick fix is to change the href to, say javascript:void(null); (and this works too) or something equivalent. But I'm somehow constrained that I can't add any scriptlets.
This looks so weird. Can somebody help/point me to the right direction?
Try changing/adding a target attribute to the anchor tags in the iframe. I'm not certain whether the header is disappearing within the iframe or the parent page, but my guess is you want target="_parent".
Also, javascript:void(null) should be javascript:void. void is a type, not a function. Calling (null) is unnecessary.
I have an iFrame within a parent page the length of the content varies from page to page in the iFrame so I would like to have the page jump back up to the top in certain situations.
This works fine in IE where breadCrumb is the id of a div in the parent window.
<script>
window.parent.location = "#breadCrumb";
</script>
It jumps the page to the right spot and the url is the parentwindowurl.aspx#breadCrumb
However in Chrome and Firefox this does not work it changes the page to the url iFrameurl#breadCrumb which replaces the parent page and has no breadCrumb div.
Does anyone know how I can get this to work in Chrome and Firefox?
Or is there a better alternative I should be using?
Try this one
window.parent.location.href = "#breadCrumb";
Assuming you want it to the very top, it's easy
https://developer.mozilla.org/en-US/docs/DOM/element.scrollTop
window.parent.scrollTop(0);
sorry it might actually be
window.parent.document.body.scrollTop(0);
if not, please let me know the error
The location hash is normally used to scroll to an anchor tag with a matching name attribute, so you would need to have a tag like:
<a name="breadCrumb"></a>
in the parent frame in order to have the browser scroll to that content with a location hash.
I'm not familiar with this behavior on div tags; that might be an IE-specific feature.
This works perfectly fine:
<script type="text/javascript">
$(document).ready(function() {
$.fancybox({'href' : 'http://www.cnn.com','frameWidth':500,'frameHeight':500,'hideOnContentClick': false,'type':'iframe'});
});
</script>
That is, FancyBox opens and displays the CNN homepage. However, if I change the href attribute to "#pg"
and have the page coded this way:
<body>
<div id="pg"></div>
<script type="text/javascript">
document.getElementById("pg").innerHTML = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"><html xmlns=\"http://www.w3.org/1999/xhtml\"><head><title></title></head><body>test me now</body></html>";
</script>
</body>
FancyBox opens but no text is displayed. (The text "text me now" is displayed in the #pg div element. Notice it is assigned to the DIV's innerHTML at the end of the page.)
Basically, I want to know if there is a way dynamically initialize a DIV's innerHTML property and display it as a FancyBox type iFrame? (The content of the iFrame will have a button that prints the iFrame's document.)
TIA
UPDATE: 07/28/12
As #arttronics suggested, I put together a jsFiddle
To summarize, ultimately the objective is to be able to click a button contained inside a FancyBox that prints the entire contents of the FancyBox without opening another window. (I want to use FancyBox as a report viewer for content parsed by Javascript.)
I assume that I need to display content using FancyBox's iframe player, but I could be wrong.
The jsFiddle shows:
The FancyBox is able to display text that validates as an HTML page using the inline player. The text can either be referenced via href or content.
However, when the player is an iframe and the content comes from href, then the FancyBox container is empty. If the contents comes from the content attribute, FancyBox shows a 404 error.
Simply comment and uncomment the jsFiddle code to see what I mean.
Any ideas for how I can meet my objective are appreciated and will get an up vote!
TIA.
Update: 07/31/2012
This new jsFiddle example: Iframe report viewer works but not in FancyBox
As you can see, I've tried several ways to display the iframe in FancyBox. And while FancyBox does display the contents of the iframe, the printing feature breaks.
I think one method for solving this problem would be to write the content of the myContent var to the FancyBox after it is loaded, but I can't (A) find the right DOM node to write to, and (B) I can't get FancyBox to display an iframe using its iframe player when the iframe src="about:blank".
Any suggestions? Or do you see a way to fix the jsFiddle example?
Do you really expect that <iframe src="#myID"></iframe> would open an element having id myID into iframe?
If you want to print content of the fancyBox, then you can add print button - http://jsfiddle.net/s3jRA/
Updated demo - http://jsfiddle.net/qVrLr/ - for creating and updating contents of iframe
As is often the case, I was looking at things backwards. The solution (with caveats) is this, rather than display a div element using the iframe player, hide an iframe in the html and display it using the inline player.
See this working example: jsFiddle
This solves the problem of being able to print dynamic content without opening another window. Additionally if the text overflows the FancyBox, the entire contents are still printed. (That's something I could not get to happen when I printed the FancyBox and changed the various page elements visibility styles to hidden).
Major Caveats
I've tested this in IE 8 and it works, however I still cannot get this to work in Chrome.
One reason for trying this approach was my assumption that I would be able to include within the dyanmic page content an #media print style. That technique does not work (in IE anyway) for some reason. However, inline styles do work as do HTML markup tags (notice the <strong> tag in the jsFiddle example: var myContent). So something is strange.
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';" ...