IFrame without scrollbars - javascript

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

Related

Add Scrolling to Iframe From Iframe Code

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

PDF inside iFrame not working on iOS

I have been trying to display PDF inside iFrame, it works well for all other browsers and platforms but not working with iOS. When I tried to access in chrome/Safari in iPhone/iPad, it shows the first page BUT does not allow to scroll down the PDF. And when it comes to HTML inside iFrame, it works perfectly, per my observation it looks like issue is with PDF inside iFrame on iOS. Tried all the links provided on various websites, overflow-auto, webkit scrolling, scrolling only y axis, position absolute/relative increasing the height which results in white pages and all other possible solutions, but no luck yet. The language of implementation is ASP.NET-C# where I am setting the iFrame source dynamically. Below is the source through which I am trying to achieve above task.
<div id="wrapper" class="Sales-container container">
<iframe runat="server" id="Contents" class="myiframe" scrolling="no" width="100%" height="100%" frameborder="0" />
</div>
.Sales-container{position:absolute !important;width:100%}
.container{margin-right:auto;margin-left:auto;padding-left:7px;padding-right:8px}
.myiframe{z-index:0;white-space:nowrap}
Any help would be much appreciated.
Thanks.
If you don't need https, you can use the google docs viewer
make the src http://docs.google.com/gview?url=YOURADDRESSHERE&embedded=true
If that won't work for you, I'm currently looking into pdf.js

Iframe Not Respecting Height Attribute

I have been trying to add a javascript map to my wordpress site and for some reason the iframe is not respecting the height attribute I set.
I've tried it using < iframe > tags and even with a plug in short code. Both lines can be seen here:
<iframe src="https://www.shiftins.com/county/index.html" width="100%" height="900" scrolling="no"></iframe>
[iframe src="https://www.shiftins.com/county/index.html" width="100%" height="600"]
And can be viewed live on this page: https://www.shiftins.com/test-page-1/
I have iframes running on other parts of my site and they work properly. How can I fix this issue?
BTW I have tried !Important and still no luck.
On your live site the height of the iframe is set in the style with "height:150px" :
if you remove this from your css it will work like a charm :

Vimeo fullscreen : video appears under the website's elements

I'm having a really strange issue with vimeo & html5 fullscreen player.
I have this code in my template :
<iframe src="http://player.vimeo.com/video/91593219/?autoplay=1" width="100%" height="615" frameborder="0" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups"></iframe>
The iframe loads fine, but when I click "fullscreen", the browser goes in fullscreen mode with the video appearing UNDER the site (I have relative and absolute divs visible while watching the video).
You can experiment this bug here : http://webrelais.net/pingpong/projet/proxipolis
Has anyone experienced this issue ?
Thanks a lot for your help !
I solved the problem by disabling animate.css style on the element which included my iframe.
Nevertheless, I tried with z-index modifying, jQuery for changing styles but nothing worked, the only one solution was removing Animate CSS class.
Was the same bug in Safari (13.0.4). In my case parent div of an iframe had will-change property. Fullscreen works correct after I've removed it.
A quick look shows that it is related to CSS or Javascript for the element - since removing the id for that element makes fullscreen video work in Chrome at least.
Solve the problem by isolating CSS and Javascript that you use for that element and you should be able to find what causes it.
animation-fill-mode: both; in parent elements seems to cause this issue with fullscreen videos.

Resize element height in order to avoid double-scroll

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).

Categories