Is it possible to have a non-scrolling iFrame inside a scrolling div, and have anchor links inside the iFrame work correctly? The anchor links inside the iFrame should scroll to the spot inside the iFrame, I don't need/want them to point to elements on the parent page.
Here is my jsFiddle with a simple example:
http://jsfiddle.net/shopguy/WjmHG/
and the code for it:
<div style="width: 100%; height: 300px; overflow: auto;">
<iframe style="width: 100%; height: 2000px;" src="http://www.hypergurl.com/anchors.html" scrolling="no"></iframe>
</div>
I have no association with that hypergurl.com link used in my example, it was just the first example I could find of a page with an anchor by id/name syntax link in it.
If you load the JSFiddle and click the "Jump to Bottom" link inside the iFrame, it does nothing (testing with FireFox 19.0.2). When testing with various pages it never works in FireFox, in Chrome it sometimes works the first time it is clicked, but then if you scroll up and click again it doesn't work. In IE8 it works (scrolls) most of the time.
Scrolling works correctly all of the time if I let the iFrame itself have the scrollbars (remove scrolling="no"). This isn't a practical solution for me though, as I have content outside of the frame that I want to scroll with it. In my real code I dynamically set the height of the iFrame to fill its content, this way it appears to be more like content on my page.
Additional info as to why I need to do this:
I'm creating a web-based email client and so far there seems to be the least amount of issues if I display the HTML body of emails inside an iframe, vs trying to display inside a table cell or div inside my page. I'd like for these type of links to work. I do have some control over the content, it comes from my server and I can modify it some (but don't want to hack it too much). For example, I already modify all links to open in a new window (but not links that start with #, so that isn't my issue).
I know GMail doesn't use iFrames, but my XFINITY (by Comcast cable) web-based email client does, and they managed to get these to work (but so far haven't figured out what all they are doing).
Check out this post: Jump Link Inside an iFrame
If your iframe has a different domain then you will be unable to use a javascript solution to solve this, but if it is then you can add the target="_parent" attribute to all the anchors within the iframe.
var iframe = document.getElementById('iframeId');
var doc = (iframe.contentDocument)? iframe.contentDocument: iframe.contentWindow.document;
var anchors = doc.getElementsByTagName('a');
for (var i = 0; i < anchors.length; i++)
anchors[i].target = '_parent';
I've recently added code to this library to sort out all the issue with Anchor Links inside an iFrame.
https://github.com/davidjbradshaw/iframe-resizer
It intercepts all requests for in page navigation and scrolls the parent page to the correct position. If it doesn't find the anchor in the iFrame, it bubbles it up to the parent page and looks for it there.
Related
<iframe id="esw_storage_iframe" src="https://service.force.com/embeddedservice/5.0/esw.html?parent=https://firstfinancialstage-65.adobecqms.net/personal.html" style="display: none;"></iframe>
From what I can tell it just references the home page
Edit:
The iframe is placed on the same page it references as the parent. The second link at the end of the iframe is the same page it is on. I'm confused as to why the iframe would reference the same page it is placed on.
Usually iframe in HTML is used to embed another document or webpage in the current HTML document. SO if we look at you code, we have id = esw_storage_iframe (maybe some element's id from website), the source website is just a blank page (i did check it), in the end we have display: none; : it makes it invisible.
Within a wordpress shapely-theme widget: am embedding iframes, have tried css: iframe {overflow:hidden} and have checked that the attribute 'scrolling:"no" ' is present in the tags. Still, vertical scrollbar on all iframes. Even tried a loop in javascript that added the attribute to the iframes (if wordpress for some reason gets rid of them), still didn't help.
Any ideas how to get rid of the scrollbars?
This was due to something in wordpress or the shapely-template - I noticed how after saving, it always removed the scrolling-attribute from the iframe-tag, although it always was there when I copied it in or edited it before saving.
So had to retreat to custom HTML-widget in the end of the document, with a timeouted function that added the attribute "scrolling: no" to all iframes after the page is rendered. A really flimsy workaround, so might go into changing the template and trying another one. Also to see if it's a wordpress thing.
setTimeout(function(){
var epis = document.getElementsByTagName("iframe")
for (var i = 0; i < epis.length; i++){epis[i].setAttribute("scrolling", "no")}
}, 2000)
Here's the way I've set-up my site. I have a page called "news.html". The content of this page is just an iframe with a fixed size. The iframe links to "innernews.html", which is the actual content I'm trying to display. I have it set-up this way to keep every page consistently sized. The iframe prevents the height of the page from expanding due to extra content, and is scrollable.
How would I create a link targeting a specific element/header within my "innernews.html" page? If there isn't a way to achieve this, I'll remove the iframe and just plug content straight into "news.html". But still I wouldn't know how to create a link that targets a specific element/header...
You can link to an element (on another page or on the same page) only if the element has the id attribute or it is an a element with the name attribute. In both cases, put the fragment identifier #foo at the end of the URL in the link, where foo is the value of the attribute.
If the page being linked to does not contain such an attribute, and if it is outside your control, you are out of luck
Basically, you can simply create a link to specific header of a page:
<a name="your_header_name"></a>
<h1>Header Text</h1>
...
Link to the header
I strongly recommend you to remove iframes from the page if there is no reason to keep them. Iframes can complicate your life when you're trying to do something not trivial.
Have you considered using a container such as:
#newsContainer {
overflow: scroll;
height: /*whatever*/
}
I have markup like this on somepage.html:
<div class='someclass' id='hashtag1'>
<h1>somecontent</h1>
</div>
<div class='someclass' id='hashtag2'>
<h1>somecontent</h1>
</div>
<div class='someclass' id='hashtag3'>
<h1>somecontent</h1>
</div>
And links like this on another page (let's call it someotherpage.html):
<a href='somepage.html#hashtag1'>first content div</a>
<a href='somepage.html#hashtag2'>second content div</a>
<a href='somepage.html#hashtag3'>third content div</a>
However when I click on one of these links I don't see the expected behaviour - the page loads as normal but the scrollTop of the window doesn't match these divs. I've tried changing the IDs as they had hyphens in the to start with, this didn't make any difference - I've also tried changing what element the ID is on, i.e changed the <h1> to have the ID, then changed the <h1> to an anchor, but no luck.
When I'm already on the page, if I edit the hasthag and hit enter, it works as expected - changing the scrolltop of the window to the element with the ID of the hashtag without refreshing the page - but it doesn't work on the first hit.
Am I missing something obvious here?
EDIT:
Using FF 9.0.1 on Mac OSX
Turned JS off using web developer toolbar
changing or removing CSS doesn't seem to make any difference
UPDATE:
This works fine if I enable javascript - which is exactly when it doesn't need to work.
I have this as a catch for users with no javascript / disabled js. WTF, firefox?
Given your specific example, it seems to me that the scrollTop only changes when the page is already long enough to require scrolling.
When all the content is in view, the scrollTop position remains at the top of the document however when the page requires some scrolling, the scrollTop scrolls as far as the document can already scroll.
If scrolling to the required ID does not exceed the total possible scroll position, then the element in question will apear at the top of the page, otherwise the document will only scroll to it's maximum (based on its content).
Hashtags don't work with ids. You have to put a tags like this: <a name="foo"></a>. Then you can link to them using go to foo. Same goes for linking between multiple pages.
First, I am using Wordpress for this project but I don't think this issue is WP-related.
I am using a WP plugin called Local Market Explorer that inserts an iFrame with a Google map and local amenity information, i.e. restaurants. The iFrame and content is served by Walkscore.com via its API.
I would like to fade the page's container div in using the Scriptaculous Appear effect. This effect requires setting "display: none" for the container div using inline CSS on the page. However, as soon as the iFrame containing the map is faded in, the map contained in the iframe moves outside of the iFrame display. Removing "display: none" or setting "display: inline" returns the iFrame to the correct map display but renders the Appear effect unfunctional.
I suspect the map moved outside the iframe's display boundaries rather than simply not displaying because a horizontal scrollbar appears. When the map is displayed correctly, it has a vertical scrollbar but no horizontal one.
What confuses me is that the Scriptaculous fade works fine as implemented in a tabbed content script called Stereotabs. The tab content fades in without affecting the map display. I note, however, that the Stereotabs code doesn't use inline CSS for the Appear effect. The Stereotabs js code is available via the preceding link. Using Scriptaculous Appear with inline CSS makes the map move regardless of whether Stereotabs is active or not.
My question is: why does setting the display property to 'none' using inline CSS cause Scriptaculous to disturb iFramed Google map contents? All the other iFramed, ummapped contents (i.e. Yelp, Schools, Zillow stats, etc, appears correctly.
The code is below, but I don't know how useful it will be because of the WP-shortcode. Please pardon me for not being able to present complete code...that is one of the many drawbacks and annoyances of working with Wordpress.
<html>
<head>
<script src="http://www.mysite.com/wp-includes/js/prototype.js"></script>
<script src="http://www.mysite.com/wp-includes/js/scriptaculous/scriptaculous.js"></script>
</head>
<body>
<script type="text/javascript">
window.onload = function () {
new Effect.Appear('content-wrap', {delay:1.0});
}
</script>
<div id="content-wrap" style="display: none">
<?php echo do_shortcode('[lme-module module="walk-score" zip="30312"]'); ?>
</div>
</body>
</html>
Thanks for any help.
Van
This issue is experienced on multiple ajax frameworks (I am doing the same with with jquery) on multiple browsers.
I would conclude this is an issue with google maps.