Fit Iframe height to its content - javascript

Is there a way to fit height of iframe to it's content? Would you show me how to do it?
I tried searching and trying out the codes on the net but no luck
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta NAME="Description" content="Communigate Technologies" />
<meta HTTP-EQUIV="Cache-Control" content="no-cache" />
<meta HTTP-EQUIV="pragma" content="no-cache" />
<title></title>
</head>
<body>
<div align="center" style="z-index:1;">
<?php include 'header.html' ?>
<iframe align=top width=800px src="aboutus1.php" frameborder=1 border=0 framespacing=0 SCROLLING=no id="bodyframeid" name="bodyframename"></iframe>
</div>
</body>
</html>

Since we are in the age of CSS3, you can do this by using viewport units. These units allow you to specify sizes in terms of percentages of the viewport width and viewport height. This is the user's viewport, also known as screen. However, in all major browsers I've tried it, if you put an iframe inside a div, which is inside another div and positioned relative, the viewport units are relative to this div. And since 100 viewport height units mean 100% height, you can do like this:
<div id="parent">
<div id="wrapper" style="position:relative">
<iframe style="position:absolute;top:0px;width:100%;height:100vh;" src="http://anydomain.com"></iframe>
</div>
</div>
I find this to be the best solution possible, since it is cross-domain, and displays exactly like you want it without any javascript or other complex stuff.
And most importantly, it works on all browsers, even mobile ones (tested on android and iphone)!

I do it this way:
document.getElementById("iframename").height = (document.getElementById("iframename").contentWindow.document.body.scrollHeight) + "px";
Sometimes this didn't work but I noticed it was because the page of the iframe wasn't completelly rendered.
In this case, and I never noticed any further problem, put the instruction inside:
setTimeout(function (){ - here - }, 100)
Hope I helped.

If you have the same origin for document and iframe content (and in your example, you have) you can run from your main document:
var iframe = document.getElementById('my-iframe')
var content = iframe.contentWindow.document.getElementById('content')
var height = content.offsetHeight + 15 //add something to support paddings etc.
iframe.style.height = height + 'px'
var width = content.offsetWidth + 15
iframe.style.width = width + 'px'
But inspect the size of your 'content' element you adapt to, because often the element is much greater than the visible content.

Related

Links not working in an absolute container with a positive z-index

The problem can be seen on the website I am developing https://manu354.github.io/portfolio/
The links in the header cannot be clicked. After a quick search on SO I realized this was because my div was positioned absolute. I had positioned it absolute, so it didn't take up any space in my page layout. To fix this, multiple answers said to add a z-index : 10; to my div. This let me click the links (Pointer / hover functionality worked) and completely fixed the problems for my external links to Facebook, or Twitter. However my internal functional links e.g href="#welcome"were clickable, however they didn't move to the area they were meant to (works if the div is positioned relatively).
For example (the actual codes much longer, and uses revolution slider)
<div style="position:absolute; z-index:1;">
<a href="#welcome" target="_self" style="z-index: 10;>
</div>
Anybody know a fix for this?
Thanks
The problem may be that you didn't put the ending double quotes in the a(anchor) tag the below code can help:
<!doctype HTML>
<html>
<head>
<title>codedamn HTML Playground</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<div style="position:absolute; z-index:1;">
Hello world
</div>
</body>
</html>
Well it doesnt work because your links to an id "welcome" but the div's id is "welcome_forcefullwidth".
Welcome ID
If you remove "_forcefullwidth" or add on your href "_forcefullwidth" it will work
Not to mention that the rest of the IDs are nowhere to be found
I see on your website a lot of inline style and the website is too complex as it should. The code is not that clean.

$(window).height() inside iframe?

Today I faced some really stranger bug. For example: my site opens in the iframe(this iframe automatically fit all document space, width and height) inside this frame I need to get value of $(window).height(); and I get... Very big value(5000-10000px).
Demo link - http://bug-wheight.divshot.io/
Open this in your browser, then resize window one-two-times and look at counter. This value is not correct.
Info: bug detected in chrome, version 41.0.2272.118(mac). Safari on iOS 8.0.1 also returns very big values. Mozilla(ver. 35.0.1) returns small integers(is about 35px, what?). My screen size: 2560 x 1440.
And question: how I can get real window height value?
try add Document type definition in your html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
It will work fine.

iframe containing frameset document not expanding to full height of browser window

Have a problem that's been bugging me now for the past two days :(
I have set up an HTML web page that contains an iFrame that loads a frameset document. Yes I know, frames are ancient tech and should not be used, but that is the output produced from Adobe's RoboHelp tool so I need to deal with it.
I have attempted to add variations of JavaScript code that will resize the iFrame's height to fit the remaining height of the browser window. It works fine in Chrome, Safari, Firefox, etc. , but like most organizations the client has standardized to ancient IE (Internet Explorer 8) and it does not look like they will move forward anytime soon.
An image of the current problem is conveyed here:
Simply put, I cannot get the iFrame to occupy the space remaining between the banner and the footer in Internet Explorer (8). I have used both CSS styling and variations of JavaScript code to "read" (I guess) the height of the "frameset(?)" document in order to pass the height to the innerframe for resizing it. Most of the scripts I have seen rely on the height of the document inside the iFrame, but what happens when you have a frameset?
Here is the code of the main page containing the iFrame:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
body {
width:100%;
height:100%
}
</style>
<script language="javascript" type="text/javascript">
function autoHeight(e)
{
alert(e);
if ( e.contentDocument ) {
e.height = e.contentDocument.body.offsetHeight + 35;
}
else {
e.height = e.contentWindow.document.body.scrollHeight + 35;
alert("e.contentWindow = "+ e.contentWindow);
}
}
this.onload = function(e) {
// or add it to the onload attribute of the body tag...
var ifr = document.getElementById('helpFrame');
autoHeight(ifr);
}
</script>
</head>
<body>
<!--banner code here, not too important -->
<iframe frameborder="0" id="helpFrame" align="bottom" src="/RCMP/prod/index.htm" width="100%" height="100%" scrolling="no" style="height:100%;">
Your browser does not support iframes.
</iframe>
<!-- added some paragraphs to actually "push" the footer down for now. -->
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
<!--footer code here-->
</body>
</html>
And this is the code for the frameset (contained in the iFrame, from Adobe's RoboHelp published output). A lot of the javascript can be ignored, I believe the focus is on the frameset)
<html>
<head>
<link rel="shortcut icon" href="favicon.ico">
<title>Orientation Guide To E-Division Headquarters</title>
<meta name="generator" content="Adobe RoboHelp 9" />
<meta name="description" content="WebHelp 5.50" />
</head>
<frameset cols="100%,*" frameborder=no border=0>
<frame src="whnjs.htm">
<frame src="whskin_blank.htm" noresize>
</frameset><noframes></noframes>
</html>
So the challenge is to get that iFrame to go full height (down to the footer) in IE! Any suggestions / solutions would be appreciated. I don't really want to use jQuery if I don't have to - JavaScript and CSS would be nice.
thanks!

Load JQuery first, then show html page contents?

I have a mobile site, unfortunately I can't direct access to do anything on HTML, so I'm using JQuery to style its width, height etc., the problem is the site has actually 762px width(which is a normal site for PC) and I gave 320px width(for an iPhone screen), everything works well but at the time when page loads it comes from the middle of the page to fit the 320px screen size. I strongly believe that my JQuery code for width(320px, although I specified Jquery for some other elements too) is taking action after the contents loaded in the html page.
(I saw this problem on Opera mobile emulator 320x480)
So if I can able to load the JQuery first then the contents(HTML) in the page may solve the issue. You guys have any suggestions?
my script is given below..
$(document).ready(function() {
$('head').append('<meta name="viewport" content="initial-scale=1.0, width=device-width" />');
$("table.bgContent").removeAttr("width");
$("table.bgContent").attr("width","320");
$("table.cart-header").removeAttr("width");
$("table.cart-header").css("background","none");
$("table.cart-header").css("border","none");
$("table.cart-header td:first").html('<img src="images/userdir/logomobile.gif" width="320" height="79" border="0"/>');
$('head').append('<meta name="viewport" content="initial-scale=1.0, width=device-width" />');
$("table:eq(2) td.bgHeaderBarCart").html(" ");
$('table.cart-header td:nth-child(2)').css('display', 'none');
$('hr').css('width','300px');
$('td.FormTextCart').removeAttr("width");
$('.cart-header').css('height','0px');
$('.ContentAreaCart').css('padding','0px');
$('.SpanOrderCenter').css({padding : '0px', textAlign : 'left', fontWeight : 'normal', fontSize : '12px', width : '300px'});
});
Just put a wrapper <div> within your <body> tag, for example:
<html>
<head>
</head>
<body>
<div id="wrapper" style="display:none;">
</div>
</body>
</html>
then on document ready in your js file, add:
$("#wrapper").show();

how to make a flash swf object occupy browser completely?

i have a swf file of width 1000 and height 700. i want to show the swf file in full screen of the browser it self (not like videos plying full screen).
i tried like the following
1) get user screen width and height using java script using the functions available (screen.availHeight and screen.availWidth) the screen size is available by using the functions but not applying to the flash object
2) tried giving 100% for both height and width in object code that also not working
can any one help me on this please.
Thanks in advance.
Use swfobject to embed your flash and configure so that it fills 100%.
Check first question on the faq here SWFobject faq
Changing the dimensions on the embed/object HTML should do the trick.
Otherwise, here's some resources:
http://www.kirupa.com/developer/mx2004/fullscreen.htm
http://www.adobe.com/devnet/flashplayer/articles/full_screen_mode.html
http://www.bezzmedia.com/swfspot/tutorials/flash8/True_Fullscreen_Flash_Mode
Use this for your html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("MySwf.swf", "swf_container", "100%", "100%", "10.0.0");
</script>
</head>
<body>
<div id="swf_container">
</div>
</body>
</html>
And add that swfobject.js file to bin or bin-debug or wherever it needs to go.
All that's really required is that swfobject.embed javascript call, specifying percent sizes and the flash player version.
Hope that helps,
Lance

Categories