I am using an iframe in my application, where I am trying to display a pdf in that iframe.
If i open the application on Ipad pdf is not scrolling. so i got a thought that if i apply a total pdf height to the iframe and putting in a div and trying to apply the overflow to that div but my problem is how to get the height of document which is in iframe.
<div>
<iframe id="miscLinkFrame" src="holiday.pdf" scrolling="no" frameborder="0" height="500" width="760" allowtransparency="true"></iframe>
</div>
in simple way its not possible
may be this logic work but not sure
1st capture document's size with jscript which is called in
2nd then change iframe size with/from jscript which is captured before (in 1st step)
try it may be this work
regard
you can use following code :
$('#iframeid')[0].height="600px";
for reference please see link
Related
I'm developing Hybrid E-commerce app using Ionic Framework v3. I have set iframe in my app with third party url. Its working properly but i want to disable scrolling inside iframe. I have tried many things like
scrolling="no" set inside iframe
iframe { overflow: hidden } Set css
$("iframe").contents().find("#body").addClass("iframeclass") I have also use jQuery but no luck.
I can disable it manually from browser when i set overflow: hidden inside iframe > html > Body tag, but don't know how to do it with code.
Here is my code please check and suggest me proper way.
<iframe class="iframPlace" [src]="sanitizer.bypassSecurityTrustResourceUrl(browselink)" scrolling="no"></iframe>
Thank you.
if set width and height for iframe, bigger than source, scroll is hidden otherwise iframe have a scroll because an HTML iframe is used to display a full web page within in web page and it's impossible to disable scroll.
I'm trying to hide a header inside of an iframe, but for some reason, it is not working. Can someone look at my code and help me figure out why the header is still visible? Thanks.
<iframe id="booking_iframe" src="https://bananahostels.com/booking-engine/cacao-hostel" width="100%" height="1500px" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
$('#booking_iframe').load(function() {
$('#booking_iframe').contents().find('.hostel-branding').hide();
}
Measure the height of the header using the tools provided in FF developer edition, Chrome probably has a similar function.
Namely right click > inspect element > small ruler icon in the top right.
then wrap your Iframe inside of another div which has overflow:hidden; specified in your css, Then all you need to do is on the Iframe set your Css value transform:translateX(-theHeightOftheHeader.);
Maybe a bit hacky, but since this is an external URL that would seem to be your best option.
I'm getting a uncaught InvalidStateError, from soundcloud embedded profiles from (https://w.soundcloud.com/player/widget-6c3640e3.js & https://w.soundcloud.com/player/multi-sounds-0e392418.js) on my site pullup.club it's hosted off of github.io and is open source...
I have two embedded soundcloud profiles in a modal popup
<iframe width="35%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/5142431&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>
and when my site is loaded I get errors and a bit of lag, not sure how to get rid of this error, and was wondering if it was because I have the embedded players in a popup, or if I need to somehow specify the canvas size?
I'm completely clueless, so all help is greatly appreciated!
The reason is loading it in an invisible popup indeed.
So at the time soundcloud's js code is called within the iframe there is no space for the canvas to spread in and so the width of it is 0.
Solution1: create the iframe on the fly using jquery after the popup is shown. (assuming your site uses jquery, which the one you mentioned in the question does)
Solution2: Let the div containing the soundcloud frames render outside the screen, then move it into visible area
Possibly the problem can be that the containing <div> is a flexible width without min-width.
One fix for this error is to change the width of the <iframe> to px value rather than a % value, as the width of the <div> is determined by its content.
Example:
<iframe width="350px"...>
The other fix is to establish the width the <div> containing the % <iframe> to a px/vw value.
I have an iFrame loaded like this:
<iframe src="http://otherdomain.com/sourceContent.html" id="theIframe" frameborder="0" seamless>
I need to resize it dynamically so there are never any scrollbars, the content inside can get taller vertically (dynamically based on what the user clicks on).
I know you can resize the iframe dynamically on page load, but what about if the contents of the iFrame grow?
Also the source HTML is on a different domain.
Add this to your section
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
And change your iframe to this:
<iframe src="http://otherdomain.com/sourceContent.html" id="theIframe" frameborder="0" scrolling="no" seamless onload='javascript:resizeIframe(this);'>
If you are talking about sizing it dynamically based on something that might change in the iframe after load this can be tricky. If the iframe is controlled by you or is from the same domain it will be easier, otherwise it might not be consistently possible depending on the browser and site being loaded.
iframes create security sandboxes of sorts so that the pages cannot communicate one with another except through Post Message (or if they are from the same domain, it can be possible through plain javascript.)
Some code inside the frame would need to message to the outer window and it would have to be resized that way. If you control both then you only need JavaScript similar to the kind posted in #Sujit 's answer
I'm currently editing a wordpress template - http://edenmuzik.ca/ and I'm having troubles with the soundcloud player. The code I have now is contained within a wordpress page that the template loads with ajax(i'm assuming)
<iframe src="https://w.soundcloud.com/player/url=https%3A//api.soundcloud.com/users/39874306&auto_play=false&hide_related=false&visual=true" height="450" width="100%" frameborder="no" scrolling="no"></iframe>
The player contained within the music section resizes automatically once that page finishes loading but it keeps its high which I specify as 450 up until the page finishes loading.
I checked all css rules to make sure nothing is conflicting there... Any help would be much appreciated.
If you want it to display 450px high, you need to set 450px in your inline style.
Based on the question I read above, are you saying you want it to be 450px?
It would appear you are attempting to load the iframe with improper HTML, so your 450px value isn't actually being applied.
Here to help further if you'd like.