I have created a page that will be used as a source URL for an iframe on different pages on different sites, as an advertisement widget.
I want to remove the scrolling on the iframe and load the full content without scroll.
I have tried this with the iframe tag but which is not recommended
If you content is of a fixed size, then set the size of the iframe to match this, if the content can vary in size, checkout iframe-resizer on npm.
Is there a way to prevent the browser from scrolling to the ID in the url (e.g., sitename.com/page-name/#hash) until AFTER the entire page has loaded?
The problem with the WordPress theme I'm using is that the height of the header isn't known until after the page (or at least certain scripts) have loaded. The browser seems to be jumping to the ID before that height is known... causing part of that anchor/section to be hidden behind the header.
This problem does not occur on subsequent anchor scrolls within the same page.
I'm thinking one of the ways to solve this is to simply wait until page/window load... before the allowing the browser to scroll to the URL's hash... utilizing some sort of delay/postpone on initial hash jump.
Any ideas, using jQuery or javascript?
You can view the issue here: http://www.globalvoiceacademy.com/personalized-coaching/#commercial-coaching
I am trying to add dynamic image gallery to a site I am working on but I am limited to only HTML and css. So I made a separate page on my own server with required php file to create the gallery and used Iframe to load the gallery page to the site.
Problem is now there is two separate scroll bars. one to scroll the content in the iframe and one for the parent page. This makes scrolling on the page very messy. Is there any way so that I can get rid of the scroll bar for the Iframe and be able to scroll through the content within the Iframe from the parent page. Anyway I can make the Iframe behave like a div? I thought the best way would be to set the height of iframe so the height of iframe would change to fit whatever the content that's in it. This way I thought there wouldn't be need for a scroll bar on the iframe.
Here is the gallery page I am trying to load with Iframe http://lejund.com/plugin/#*
I am open to all your suggestions. Is there better way to achieve this other than the Iframe?
Thank you
I found this solution on github by davidjbradshaw.
https://github.com/davidjbradshaw/iframe-resizer
It's using window.postmessage to achieve this.
I'm new here ... hope I'm doing everything right ;-D
I've found a few topics with similar problems but they do not look like they want to reach what I want to reach.
I've got a website with a long content area, the website has scrollbars. Somewhere inside this content area is an iframe. This iframe implements a site with full height (a support board) and resizes the iframe when the contents height is changing - so the iframe has no scrollbars. Now what I want is: when I'm opening the website with i.e. http://www.mywebsite.com/#new I want the page to scroll down to the iframe but not only the begining of the iframe but the position where the anchor is placed inside this iframe.
So the iframe itself doesn't need to be scrolled (it's always 100% height) but the parent frame should be scrolled to the position where - inside of the iframe - the anchor is placed.
I really don't know how to solve this. Adding the anchor to the iframes url doesn't help and also just adding the anchor to the website url doesn't work. I'm sure I have to implement something with javascript or similar but don't know how! I'm able to modify the code of both - the website inside the iframe and the parent site!
//EDIT
Oh i forgot... I can't do it with an onClick-Action or a link attribute (that's what seams to be the solution in a related post) because it's not a jump inside the same page. The page is being reloaded and should jump to the anchor :-D So it has to work when I'm entering the URL on my own...
Hope you understand what I need!
//EDIT2
Possible frameworks:
Main page is a wordpress blog, so JQuery is possible!
Iframe page is a simple machine forum (SMF) - I think only native JS here!
Here is an answer that will put you "on the right way".
Assuming your iFrame is always in the same position inside your main page, what you need is to scroll the main page to this point: iframe y coordinate + anchor coordinate inside iFrame.
So I will call you anchor: <a name="anchor1">Here</a> and you iFrame: <iframe id ="myiFrame" ...
To get the iframe position in the page you can use $("#myiFrame").position().top and the anchor position inside the iFrame with $("#myiFrame").contents().find('a[name=anchor]').position().top.
So your script moght look like:
var y = $("#myiFrame").position().top + $("#myiFrame").contents().find('a[name=anchor]').position().top;
$(window).scrollTop(y)
Is there any way to stop an iframe re-loading its contents when I change its position within the DOM? Simple example:
<script type="text/javascript">
function moveiframe() {
var dest = document.getElementById('newparent');
dest.appendChild(document.getElementById('googleframe'));
}
</script>
<iframe src="http://www.google.com" id="googleframe"></iframe>
<input type="button" onclick="moveiframe()" value="Move" />
clicking the "Move" button changes the parent of the iframe, and reloads its contents (in Firefox and Chrome, but not IE).
Any suggestions would be much appreciated!
[Updated with background info]
I'm loading the site's adverts in placeholder divs at the bottom of the page (to prevent advert loading from holding up the page load) - and then shifting the divs they've been written in to their correct container once loaded. It all works great... unless the ad that gets served uses an iframe (like google adsense) in which case the ad gets loaded twice and the serving is messed up.
Considering the simplicity of your test case, it looks like the only methods you have available to put an element inside another will always force the contents to reload.
[Edit] After seeing what you're trying to do, there are a couple things you can try:
All ads could be served in IFRAMEs (on your own site) which will not hold up loading of the page and can be placed in the right place right away.
As mentioned above IFRAMEs won't hold up loading of the page so you could put the ads in place right away if they are IFRAMEs and load them at the bottom if they are something else. Of course, this won't work if the slow part is before you know if you are going to get an IFRAME or not.
You could keep the content in it's placeholder DIV but when it's done loading just reposition (with CSS absolute positioning) over the right place in the page. Not the most elegant solution, but should work fine.
I'm regretting my original answer, as it seems to be causing other headaches. Here's a few other potential solutions that you may not have tried:
Place the ad scripts inside of divs with their display style set to none. Then, move them to their final desintation and change them to display: block after the page has loaded. Perhaps this would prevent the iframes from loading their content inititially.
Try the same thing, only with visibility set to hidden, then changed to visible.
A quick guess would be to unset the value of the src attribute of the iframe element or set it to "about:blank".
It is up to you to restore the previous value (or any value) to the src attribute of the iframe (using JavaScript).
Regards,
If the ads are a fixed size, you could place them in absolutely-positioned divs instead. Then, once the page loads, you could move those container divs to their designated spots. There are a lot of Javascript samples out there for calculating an absolute position from a relative position. Of course, you would have to reserve space visually in the destination divs so the ads wouldn't cover the content.
What about using an ajax request to load the ad's contents, and adding the contents to the DOM when the ajax call returns, instead of using an iframe?