Re size iframe based on width of window - javascript

I have an iframe embedded in a third party website, which I cannot edit in any way.
I want the iframe to re-size according to the width of the window.
If I was able to edit the whole page, this would not be a problem.
However, when setting the size of an element in %, it uses the parent of that element to size from. In the case of the page I am working with, the parent elements do not re-size, so this does not work.
What I need, is a way of telling the iframe to re size, based solely on the width of the window, and preferably using only CSS.
Is this possible using only CSS? If not is it possible using JQuery or JavaScript?

Try this:
http://jsfiddle.net/6aLxaag8/2/
This jsfiddle loads a second jsfiddle in the iframe.
There's a hardcoded style attribute on the IFrame that sets the width; 100vw or 100% of the width of the viewing window in which the element sits, regardless of it's position in the DOM. As you don't have access to the parent page you'll need to use a style attribute and you may not be able to use javascript to add it (check cross site scripting).
Support isn't perfect with vw units, but it's close.
PS, it's hard to know if this will work without trying it in your context, please let me know :-)

I have encountered that problem before and I use this css trick, this adjust to the width & height of any wrapper/div so if you have embed an iframe inside a div with 'height: 620px' and 'width: 420px' the iframe size adjust to the div's height and width. Just change both width & height of the div to 100% percent.
.content_here {
width: 420px;
height: 620px;
}
iframe#iframecontent {
display:block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
}
<div class="content_here">
<iframe id="iframecontent" src="http://www.bootstrapcdn.com/" frameborder="0" marginwidth="0" marginheight="0" scrolling="auto"></iframe>
</div>

Related

Dynamic and 100% iframe

I have a website with a header and a footer. Let's call it domain.com.
Now on a second domain I have 2 files:
page1.php with a height of 1500px page2.php with a height of
800px
Now do I want to add both pages on my domain.com (not at the same time, but with for example domain.com/1 and domain.com/2) with an iframe that shows the full page content (important: of page1.php and page2.php) and adds it between the header and footer.
The iFrame should be without a scrollbar and should look for a user like there is no iFrame.
How can I make a dynamic iFrame that shows the full page (page1.php or page2.php) but also automaticly sets the sizes depending on the page content (as page1.php is larger than page2.php)?
// EDIT:
I forgot to enter important things. The site I want to add as iFrame is a shop website and so is dynamic. There is no fixed height of the site. So I can't use px in height because that would a) show too less (the rest would be "cut out") or show too much (the rest would be simply white). I hope you understant what I mean.
Using <iframe> to display content is a bit dated, but if it's what you want to do, take a look at the following demo:
Demo
Basically, you just need to make sure your scrolling and frameborder attributes are properly turned off:
<iframe src="https://xhynk.com/" scrolling="no" frameborder="none"></iframe>
and it helps to set your CSS to something like this:
iframe {
display: block;
width: 100vw;
height: 400px;
}
display: block removes any inline margin (usually 4px) from the iframe)
width: 100vw will set it to your viewport width (though use 100% instead if you have a sidebar or parent container that's not as wide as the viewport
and set your height to whatever pixel size the content is.
So your domain.com/1 page will look something like this:
<header>Page 1</header>
<iframe src="page1.php" scrolling="no" frameborder="none" style="display: block; width: 100vw; height: 1500px;"></iframe>
<footer>© Jelly</footer>
And domain.com/2 will look something like:
<header>Page 2</header>
<iframe src="page2.php" scrolling="no" frameborder="none" style="display: block; width: 100vw; height: 800px;"></iframe>
<footer>© Jelly</footer>
You may care to read up on the:<iframe> Element Documentation for more information.
For dynamic heights you can only do this if your don't have Cross Domain issues to worry about, but you can modify the height of the window after it's loaded:
Add the onload attribute to your iframe:
<iframe id="iframe1" src="page2.php" scrolling="no" frameborder="none" onload="iframeResize()"></iframe>
JavaScript
function iframeResize() {
var iframe = document.getElementById('iframe1');
iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
}

Cannot set iframe size on ios

How can I set the iframe height on ios? Currently it sets the iframe height to the height of the iframe contentDocument, and I cannot change it neither with "height", nor with "position: absolute; top: 0; bottom: 0;" css.
I. e. I see in the safari inspector, that css height is set to "100px" but computed is "12345px" as it is in the iframe.contentDocument.
I tried to create a wrapping div for it, but in this case links on page ain't working (of course, because there's no scrolling in the iframe, so nowhere to scroll)
Is there any solutions?
10x

Issue with iFrame Element not re-sizing within container

I am working on a small VA project and I am attempting to pull stats from another website. The only way I have been able to find out how to do this, is by using an iFrame with the clip function.
Website is: NWGlobalVA.com
Now the Issue I am having is if you go to the main page and re-size the browser in anyway it pushes behind the map element. I have tried everything in my knowledge and research to make it re-size with the container.
Below is the code I use with the iFrame and CSS to do the clipping. Any help would be much more appreciated then you will understand. I have been trying to do this for a couple days now. Ideally I would rather just get the information once every 15 minutes and pass it to my database. However on the website none of the tables are defined and I would know how to go about that.
<style>
.iframeb {
position: absolute;
left:-384px;
right:0px;
top: -145px;
clip: rect(190px, 625px, 350px, 400px);
}</style>
<iframe width="890" height="1900" src="http://fscloud-infotool.de/index.php?page=vasystem&subpage=vadetails&id=10277" class="iframeb" scrolling="no" frameborder="0"></iframe>
The way I deal with iframe size is with javascript (jquery):
I calculated the original iframe aspect ratio by taking the width/height. So in your case: 890/1900.
<script>
function size_iFrame()
{
// If the width and height of the iframe are set
// as attributes (<iframe width='890' height='1900'>),
// you can have the js calculate it for you.
// aspect= $('iframe').attr('width') / $('iframe').attr('height');
aspect= 0.47;
$('iframe').css('width', '100%');
$('iframe').css('height', $('iframe').width() / aspect);
}
$(document).ready(function()
{
size_iFrame();
$(window).resize(function()
{
size_iFrame();
});
}
</script>
This will fit the iframe to the width of its container and give it the same aspect ratio as it initially had.
Edit: To answer your question, i'd call it from the ready callback and setup and window resize callback to call every time the screen size changes. I edited my code above to show this.
Edit2: As #mugé points out, you'll also need to remove your iframe css styling for my method to work.
In responsive design, I assign the iframe a container sized inside the CSS. For example,
CSS
.iframe_container {
display: inline;
float: left;
width: 89%; //whatever width you want
}
You will need to eliminate your .iframeb absolute, right, left positionings, because the container will take care of it all, unless you are talking about the 'List' parameters on top of the map, I would try to use #media to arrange clean lists according to screen sizes for the .iframeb class.

Height of the embedded object HTML

I encountered small problem with Height of embedded object in html.
I want to set the height and with of the object as per height and width of the browser. I am using following code Width sets properly but when i am trying to set height 100% it will not.
<object type="application/x-shockwave-flash" data="book.swf" width=100% height=100%>
it is working properly for width but not for height.
Is there any possible solution?
You need to set e.g.
html, body { height: 100%; }
Otherwise, there’s really nothing that the percentage in setting the height of the object would relate to. You may also wish to set
html, body { margin: 0; padding: 0; }
Try to write the actual Values of the width and height instead of procents for example :
<object type="application/x-shockwave-flash" data="../Desktop/final.swf" width="349" height="171">
Updated due to comment
If you want full browser size try this links:
http://www.kirupa.com/developer/mx2004/fullscreen.htm
http://www.webdesign.org/flash-swish/flash-tutorials/making-flash-taking-the-size-of-browser.15847.html

Responsive Galleria

I'm trying to use this plugin Galleria in its responsive mode, which basically means it will re draw itself based on its container size as the window re-sizes. The demo on the link I've provided shows a really good example. You can see that, as you resize your window, the whole gallery adjusts accordingly. Now my issue is, the plugin won't let me initialize the gallery unless a height has been specified for the DOM element that is used as its container. This means, I've had to write a whole lot of javascript code to respond window resizes - it destroys the point of it having a responsive mode quite a bit - but in the website above, nowhere can I find an explicit height specified. Can someone explain to me where I'm going wrong?
I figured it out by myself. Posting my answer -
When initializing the gallery - specify your height in percentages - as below. I'm guessing it takes 50% of window height as its value in this case. This way, you don't need to explicitly specify heights anywhere and it works as advertised
Galleria.run('#gallery', {responsive:true, height:0.5, debug:false});
Galleria needs a height to initialise correctly. You can do this either via CSS or JS.
If you would like it to fill the width and height of the screen, I would recommend setting a width and height of 100% via CSS. And its parent container needs to be 100%. See below.
**JS:**
Galleria.run('#galleria', {
responsive:true,
showCounter:true,
thumbnails:false,
trueFullscreen:true,
});
**CSS:**
#galleria{
width:100%;
height: 100%;
position: fixed;
z-index: 9999;
top:0px;
bottom: 0px;
}
body,html{
height:100%;
width:100%;
}
The height option ( if it's < 2.0) is relative to the width of the container. So height:0.5 would have a height that is half the width of the container (w=2, h=1).
height:1.5 would result in (w=2, h=3)
To keep it responsive you can use max-width rather than width when styling the container.
If the height option is set to 2.0 or more, it is interpreted as pixels. So height:2.0 will only be 2px tall.

Categories

Resources