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>
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;
}
There has been so many different answers to this and I'm having a hard time figuring out what I should be practicing. Currently I am using a script to center my page. I got it from someone on this site, but I don't know enough javascript to understand it.
This is the code im using
$( document ).ready( function(){
setMaxWidth();
function setMaxWidth() {
$( ".page_wrap" ).css( "maxWidth", ( $( window ).width() * 0.7 | 0 ) + "px" );
}
});
At first I thought this worked well, but after zooming out and refreshing, it adapts and stretches out everything. This isn't a huge problem, but I've noticed that professional sites are using this method as their sites don't break after doing the same thing.
For a div wrap and centering content, must I use a 960px width? I don't like using fixed widths.
if you notice on this site: http://themetrust.com/demos/hero/
they're not using media queries to make it responsive. As you zoom in and out it adapts nicely. This is what I'm aiming for with me site.
Most common tecnique to horizontally center elements is to give an explicit width to the contained element (must be a block element) and use
margin: 0 auto;
This is what the website you linked is using as well. Fixed width are ok if used consciously, better if they adapt to different screensizes through media queries.
Use frameworks instead of placing each elements by hand and with jquery! Saves time, saves effort, causes less errors. Try bootstrap
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.
Any ideas for using max-height on a borderless/scrolless iFrame so if it ends up being too tall the browser doesn't render a giant black area to fill in the rest of the iFrame?
I've tried setting height="100%" and max-height="xx" but that doesn't seem to work.
Many Thanks!
Your use of height="100%", using the = operator, suggests you're trying to use in-line attributes. This can work, but usually works better with absolute measurements (so 700px rather than a percentage). max-height isn't a valid attribute, so far as I'm aware, of any element except in stylesheets, so I'd suggest that you use CSS:
iframe {
min-height: 200px; /* or whatever */
max-height: 500px; /* or whatever */
}
You can, if you must, also use in-line styles, which would yield <iframe src="..." style="min-height: 200px; max-height: 500px;">
Also, while you can use percentages, to give max-height: 80%, this does seem to require that the parent element has a defined height of its own (I'm not sure if it's all browsers, or just one or two, but either way it seems a reasonable expectation in order that the browser can work out what 80% actually is).
A good JavaScript based answer seems to be the first solution from:
https://www.geeksforgeeks.org/how-to-adjust-the-width-and-height-of-iframe-to-fit-with-content-in-it/
Resizes the iframe to suit the content. I've found that you have to manually add a bit extra for height... go figure, but seems to work.
Here's the full mark-up and JS that works for me based on that solution:
<iframe src="/app/index.html" style="width:100%;" frameborder="0" id="Iframe">
Oops, your browser doesn't get Iframes. Click Here to proceed.
</iframe>
<script>
// Adjust the iframe height to exactly as much as required by the content
var frame = document.getElementById("Iframe");
frame.onload = function() {
// add extra 50 pixels - in reality need just a bit more
frame.style.height = (50+frame.contentWindow.document.body.scrollHeight) + 'px';
// not sure if this is really required.
// set the width of the iframe as the width of the iframe content
frame.style.width = frame.contentWindow.document.body.scrollWidth+'px';
}
</script>
I've browsed through many websites and in here, and could not find a final answer as each one has its errors.
I need to have an automatic IFrame height, meaning if the content changes, the Iframe must
adapt its height to the content.
For this I need to see how to get the correct content height?
As I understand the most correct way is to use :
document.getElementById('myIframe').style.pixelHeight = document.getElementById('myIframe').contentWindow.document.body.scrollHeight;
This however doesnt work in all browsers correctly. in IE I see height is too small (has about 8 pixels less height than should). in Firefox when reducing the content size, the scrollHeight isnt reduced at all. and in Safari it doesnt work as well.
So , for final questions, what is the most correct, and proved working way of getting the content height - what height should the IFrame be set?
Thanks,
Tal.
The IE problem is probably frameborder. When you set iframe height in IE, it is inclusive of several pixels of special iframe border. The frameborder doesn't count as a normal CSS border and can't easily be turned off dynamically from script.
You could add a few pixels in IE to compensate for the frameborder, or write:
<iframe frameborder="0">
to turn the border off (if you do want a real border around the frame, you can put a new one in using CSS).
document.body.scrollHeight may not match the height of the document in a few cases:
If the body of the document in the iframe has a margin (as body does by default). Set margin and padding on body to 0.
If you are working in Quirks Mode, in which case document.body represents some aspects of the viewport, which you would normally expect to see only in document.documentElement. In this case setting the iframe's height directly sets the viewport height which document.body will then report back. This is presumably why the iframe will not shrink in Firefox.
Don't use Quirks Mode, you should always be using a Standards Mode doctype today. If you must support pages in Quirks mode, you could try wrapping the whole page in a div, and reading the offsetHeight of that.
The Safari problem might be caused by the use of pixelHeight, which is a bogus IE extension. In prefence use:
style.height= number+'px';
This is all a nasty hack; iframes are specifically designed not to respond to document size. Consider using in-page elements such as content templated in at the server side, or dragged in using AJAX instead.
$( document ).ready(function() {
$( $("#msgContainer")[0].contentWindow ).load(function() {
var offsetH = "";
#if(!$request.userAgent.isIE())
offsetH = $("#msgContainer")[0].contentWindow.document.body.offsetHeight;
#else
offsetH = $("#msgContainer")[0].contentWindow.document.body.scrollHeight;
#end
var minH = $($("#msgContainer")[0]).css('min-height');
var height = $($("#msgContainer")[0]).css('height');
if(offsetH > 250 ){
$($("#msgContainer")[0]).css('min-height', '250px');
$($("#msgContainer")[0]).css('height', '250px');
}else{
$($("#msgContainer")[0]).css('min-height', offsetH);
$($("#msgContainer")[0]).css('height', offsetH);
}
console.log( offsetH + " : " + minH + " : " + height);
});
});