This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Resizing an iframe based on content
I have an iframe where the src is an HTML file and this iframe is put inside usercontrol:
<iframe frameborder="0" src="CName.htm" align="left" width="730" height="1100" ></iframe>
I need the iframe to resize according to the content so that it's height is set according to the hieght of the HTML file and I don't need to use scrolling attribute.
Do you have any idea?
I've used the following jQuery code to do this:
$('#iframe_id').load(function () {
$(this).height($(this).contents().height());
$(this).width($(this).contents().width());
});
I don't think this will work if the iframe contents are cross-domain, though.
You can figure out the height and width of the content inside the frame, then call a function that's on the frame's owner to set the iframe element's height and width.
There is a way! Its in jquery and its too simple. Kinda hacky..
$('iframe').contents().find('body').css({"min-height": "100", "overflow" : "hidden"});
setInterval( "$('iframe').height($('iframe').contents().find('body').height() + 20)", 1 );
There you go!
Cheers! :)
Related
I am trying to change the width and height of smoothbox popup which in fact is the iframe. The traditional way of setting iframes width ain't working because of TB_Overlay.
I had just tried CSS way as listed below but not really as flexible as a normal iframe.
I have added no conflict and used jquery.
var $j = jQuery.noConflict();
$j('#TB_window').css('width','800px');
document.getElementById("TB_iframeContent").width = "800";
Is there any better way to set the smoothbox width and height? Hope many are looking for answer.
Thanks in advance
jquery will not work in iframe. It would be easy if you add new CSS according to the particular page
#page_id .particular_div_class #TB_windowcss
{
'width':'800px' !important;
}
i'm having a problem with wordpress and iFrame.
I'm trying to frame an application and the height isn't working. I change the height yet it stays the same height and I cannot figure it out. I've tried numerous plugins, but will not help either.
The width works fine, but the heigh is just staying small, you have to scroll which bothers me and potential clients as well.
It worked on my old wordpress theme, but now i'm using a new one called Mana.
Sadly, I don't have enough reputation points to post a picture to show you. I cannot fix this for the life of me. Its with any application really. Videos work fine though. I've been trying to solve this for weeks. I've had no luck with anything, any help will be appreciated. The iFrame code is below as well. Also, the width works fine, its just the height. I'm pretty sure its the theme, but theres really no support for it so this is my last resort.
<iframe src="http://www.example.com/application" height="2000" width="750" frameborder="0"></iframe>
You can try this, as shown below. I am using an !important on height.
<iframe src="http://www.example.com/application" style="width:750px; height:2000px !important;" frameborder="0"></iframe>
Wordpress enforces a minimum and maximum height protection on iframe tags in the wp-includes/js/wp-embed.js file. The minimum and maximum height specified are respectively 200px and 1000px.
A modification to the iframe CSS or height property will not affect the height as it will be overwritten automatically.
This is enforced in the following code snippet (wp-includes/js/wp-embed.js) :
/* Resize the iframe on request. */
if ( 'height' === data.message ) {
height = parseInt( data.value, 10 );
if ( height > 1000 ) {
height = 1000;
} else if ( ~~height < 200 ) {
height = 200;
}
source.height = height;
}
I wrote an article including the JavaScript solution to bypass wordpress iframe height limit
https://medium.com/#wlarch/overwrite-and-bypass-wordpress-iframe-height-dimension-limit-using-javascript-9d5035c89e37
What happens if you do like this?
<iframe src="http://www.example.com/application" style="height:2000px; width:750px;" frameborder="0"></iframe>
I'm having a problem with a huge gap in between the content and the footer ad. I can't quite figure out how to fix it. I suspect it may be to do with the content on the right as it is generated by another site (indeed.com).
Here's the link:
http://www.immediatestarts.co.uk/
Much appreciated if anyone can help.
It is actually the Javascript file you are embedding within that is writing an iframe out to the screen with a height of 2000px. I'm guessing you don't have control over that since it's coming from a third-party site, so you could try writing a CSS rule on your page to control the iframe, such as
#indeedjobs iframe {
height: 1000px;
}
Edit: Alternatively if that isn't working, you could just set the height of #indeedjobs itself to height:1000px, then set overflow:hidden on the div as well if you want to prevent the iframe from spilling outside of it.
You're putting a height of 2000px onto the iframe, in an inline style (ie <iframe style="height: 2000px"> - remove that, and it'll be fine.
I have an iframe with scrolling=yes. Is it possible to fully hide scrollbar using CSS for the Mozilla FireFox browser?
For instance, on the Internet Explorer I'm using this: Overflow-x: hidden; Overflow-y: hidden; - and it hides scrollbars, but FireFox ignores this CSS.
Here is screenshot from IE:
alt text http://moismski.com/ie.png
Here is screenshot from FireFox:
alt text http://moismski.com/firefox.png
I forgot to mention that I put CSS, to say exactly like this <style>body { overflow:hidden; }</style> inside the iframe. I can't put class to iframe itself like <iframe class="...">
Iframe is put inside the <DIV>...</DIV>. I use it like a modal window.
Have you tried setting explicit values for width/height on either the iframe or parent container? Also, does your iFrame contain anything?
EDIT:
Try:
div {overflow:hidden;}
div iframe {border:0;overflow:hidden;}
in your actual page that contains the div.
I've tried everything you said and looked at this two links either ( How to remove scrollbars from Facebook iFrame application - facebook canvas height no scroll set in ie8 and firefox) that discuss the same problem, but it didn't work for me.
What worked for me was changing the canvas settings in the section advanced of app canvas configuration ( https://developers.facebook.com/apps ) to fixed canvas width (760px) and height (fixed at 800).
I hope this help you.
I have an iframe loaded with dynamic datas. The page doesn't contains a postback. While deleting datas from this page its heights are not decreasing.
Why is it so?
Because the page is net being rendered again. Use JavaScript to decrease the height after data is removed.
Something like (untested):
parent.window.document.getElementById("<FRAME_NAME>").height = parent.window.document.getElementById("<FRAME_NAME>").height - 30;
If you mean that if you removed data from Iframe, the Iframe is not dynamically resizing it self to fit to content inside like span or div tags (if div size was not set).
if that so. sorry Iframe doesn't work like this.
it is inner page and its size is fixed and you must use Javascript if you want to give dynamic resizing.
that's how I understood it. clarify me if I miss understood