I have designed a page for a customer that incorporates a PDF via an iframe tag. So, if the pdf is large, there are two scrollbars: one of the page and one of the embedded pdf into the iframe (PDF is loaded by the integrated Adobe plugin in the browser). How can I resize dinamically the iframe height in order to maintain the page scrollbar only?
Thanks,
Francesco.
You can use overflow to prevent scrollbars
HTML:
<iframe src="..." class="pdf-frame"></iframe>
CSS:
.pdf-frame {
overflow: visible;
}
Well if you have said <iframe id="myiframe" ...
You could use jQuery to resize it by setting the height dynamically:
$("#myiframe").height('someHeight');
or in javascript:
document.getElementById("myiframe").style.height = "someHeight";
or if you are looking for something else there is an interesting article here (Dynamically resize divs with jQuery).
Related
Let's say I have an iframe hosted on www.my-iframe.com. And let's say that my iframe is embedded in a page on a different domain using:
<iframe src="http://www.my-iframe.com" scrolling="no" height="500" width="100%"></iframe>
Please note that the iframe tag has the attribute scrolling="no".
I only have access to edit the iframe code, not the pages on which my iframe is embedded. This makes it so I cannot change the scrolling attribute of the iframe html tag or the overflow: hidden; css styling of the iframe.
Is there a way that I can force a scroll bar to appear when necessary from within the iframe code?
Any help/advice is appreciated!
What you could try is maybe using a JS library to simulate a a scrollbar, there are plenty of them on the internet.
Here are a few examples (neither unordered nor necessarily the best ones): iScrollJS
fullPage.js
jQuery scrollbars
I have an iFrame that is included in my HTML and is available when the page loads. When the page first loads, the iFrame has no content/src. I am using jQuery to insert content into the iFrame dynamically. When a user clicks a link on my page, the contents of the iFrame are updated. All of this is working for me.
However, I am struggling to adjust the height of the iFrame when new content is loaded. I have tried several solutions on Stack Overflow but with no success. Here is my iFrame code:
<iframe id="myframe" width="100%" frameborder="0"></iframe>
Here is my jQuery that changes the HTML inside of my iFrame:
emailOpened.find('#myframe').contents().find('body').html(email.body);
This works for me. I just need my iFrame to adjust its height based on the height of the content being injected. I have failed on all attempts with this part.
Update
Here is my new HTML:
<iframe id="myframe" width="100%" frameborder="0">
<body onload="parent.resizeIframe(document.body.scrollHeight);">
</iframe>
If you need mobile support and allow (user) scrolling for the iframe check out https://github.com/davidjbradshaw/iframe-resizer a as drop-in solution which fixes different issues on iOS and android.
how to properly display an iFrame in mobile safari
https://encrypted.google.com/search?q=iframe+resize+ios+issue
I had to support mobile devices as well and ended up using it after some hours of research and testing. I've also used the provided message channel to send messages to the inner document back and forth.
Call this function directly after the html has been changed.
function resizeIframe() {
var newHeight = document.getElementById('myframe').contentDocument.body.scrollHeight;
document.getElementById('myframe').style.height = parseInt(newHeight,10) + 10 + 'px';
}
I am trying to display pdf in iPad using iframe, Pdf is displayed in ipad but not able to scroll the view.
I have also tried with -webkit-overflow-scrolling: touch; but it of no use.
I would appreciate if anyone can give me a better way of embedding the pdf file in html with ipad support
You should be able to scroll the embeded content as soon as your iframe has overflow:scroll property, but you may not be able to see the scrollbars
Another solution is to place the following javascript code inside the content which you would like to be able to scroll:
this.height=100%;
I tried to attach another website to my current page using iframe,
but it looks ugly with the scroll bars.
Is there any good alternative to it?
Any suggestion to achieve what I want, nicely attaching another webpage into my page without the annoyance of those scrollbars?
Make height and width of iframe equal to your web page and if you want on a specific part of page then adding css overflow : none should help, and frameborder:0 will clean up frame borders..
Here is a good tutorial regarding scrolling
Change the height and width accordingly
Try this
<iframe height="100%" frameborder="0" scrolling="no" width="500px" style="width: 500px; height: 100%;" src="http://example.com" allowtransparency="true"></iframe>
Or try to use a custom scrollbar like this one: Link
Ok I had the same problem and this jquery plugin solved this problem perfectly.
http://plugins.jquery.com/project/iframe-auto-height
Why IE not showing BG mage like firefox in Iframe?
I do not have access of iframed page.
any CSS or javascript solution
As well as adding the CSS style background-color:transparent; to the iframe document's body element, you will also need to add the allowtransparency attribute to the iframe element in the containing document.
See http://msdn.microsoft.com/en-us/library/ms533072(VS.85).aspx for more information.
If you can't modify the iframe's document then you are out of luck. Maybe there's another source you can use for the data that provides it in a different format such as XML or JSON?
Add this CSS code to the document that's included by the iframe: background-color:transparent;