Dynamic Iframe Height?

[cclloyd9785]

I have 2 iframes in separate tabs on a page. But one of the tables in the iframe is long enough where it cuts off, since I have scrolling off. Is there a way to make the height of the iframe change to fit the page inside it?

[Ingolme]

For this case, you probably shouldn't be using an iframe. Try loading the content using a server-side language. There's only one way to dynamically adjust iframe height, and it's using JAvascript to detect the height of the document within it and resizing the frame. This will only work if the page is in the same domain.

[cclloyd9785]

Could you link me to a guide here that can get me started with that server-side stuff? I'm still fairly new, and only know html, css, and a bit of JS. And it is in the same domain.

[Ingolme]

If you give the iframe an ID attribute, you can access it and its content:

<iframe id="myFrame" src=""></iframe> <script type="text/javascript">var f = document.getElementById("myFrame");f.onload = function() {  this.height = this.contentWindow.document.body.offsetHeight;}</script>

Server-side languages need to be supported by the server that your document is hosted.W3Schools has a PHP tutorial. What you want to research is includes. Don't make the mistake of including an entire HTML document, only put the specific lines of code that you need in the file.

[cclloyd9785]

PHP seems a lot more complicated. But I'm pretty sure my host supports php5. The JS code didn't seem to have worked.

      <iframe id="summons" src="/summons.html" scrolling="no" style="width:602px; border:0px; height:auto">Update your browser.</iframe>   <script type="text/javascript">var f = document.getElementById("summons");f.onload = function() {this.height = this.contentWindow.document.body.offsetHeight;} </script></div>

[Ingolme]

You're setting the height to "auto" with CSS, which is probably overriding the height attribute of the frame. Since you're doing that, you'll have to change the code to manipulate the CSS instead.

this.style.height = this.contentWindow.document.body.offsetHeight + "px"; 

[cclloyd9785]

It didn't work. And The auto height was an attempt to make it work. When I removed that and put the old code back, it still didn't work.

[Ingolme]

It looks like I'd have to do some debugging. We have to see that the onload event is firing, and then see whether this.contentWindow.document.body.offsetHeight has a value. You can do both those things with this code:

<script type="text/javascript"> var f = document.getElementById("myFrame");f.onload = function() {  alert(this.contentWindow.document.body.offsetHeight);}</script>

If a dialog appears, then the function is being called.

[cclloyd9785]

No dialogue appeared. http://cclloyd.zxq.net/inventory.html (2nd tab is where it was applied)

[Ingolme]

Why do you have an iframe there? Can't you just put the table right into there itself? The onload event isn't firing, probably because the page inside the frame finished loading before the script executed. Since the content of the iframe never changes you probably can omit the event:

<script type="text/javascript"> var f = document.getElementById("myFrame"); f.height = f.contentWindow.document.body.offsetHeight; </script>

[cclloyd9785]

I have it as an iFrame so I can edit it easier since there are going to be many more tabs. It gets annoying to look through the code when it is really long.

[Ingolme]

It looks like you certainly need PHP. With PHP you could develop a system that lets you add or remove items from the database. You wouldn't need to edit the HTML at all. Again, PHP includes are really simple. Just include a file like this:

<?php include 'file.html'; ?>

Save the page with a .php extension.

[cclloyd9785]

So you're saying i should change the pages to php. Like the inventory would be? <?php include 'header.html'; 'summons.html'; 'footer.html'; ?>

[dsonesuk]

you would place a single include file in the place you wish that specific code to appear

<div id="wrapper"><?php include("header.html"); ?><?php include("nav.php"); ?><div id="content"><?php include("summons.html"); ?></div><?php include("footer.php"); ?></div>

if the include page contains php code, as in <?php echo "hello world"; ?> it have to be saved as a php file, but it can use a combination of both html and php, as in <h1><?php echo "hello world";?></h1>.

[Ingolme]

It doesn't matter what extension the included pages have. The PHP in them will always be parsed.

[cclloyd9785]

Using PHP worked, but now it is using the default color for links. I have a class on all of the a that make them grey/white. The default with no class is the red it currently shows. Also quick question. When including HTML into the page with PHP, do I need the head info for it still, or can the html page have just the table, with no header info?

[Ingolme]

You should not have any <!DOCTYPE>, <html>, <head>, or <body> tags in the included file. Only have the specific content you have placed there. It just cets copied and pasted. Scripts and style rules of the main page apply to included files.

[cclloyd9785]

It seems to mess up stuff when I include it in with PHP. Edit: Fixed various issues, but now it won't find the files it needs to. I get these errors

[b]Warning[/b]: include() [[url="http://cclloyd.zxq.net/function.include"]function.include[/url]]: Unable to access /inventory/summons.html in [b]/www/zxq.net/c/c/l/cclloyd/htdocs/inventory.php[/b] on line [b]34[/b][b]Warning[/b]: include(/inventory/summons.html) [[url="http://cclloyd.zxq.net/function.include"]function.include[/url]]: failed to open stream: No such file or directory in[b]/www/zxq.net/c/c/l/cclloyd/htdocs/inventory.php[/b] on line [b]34[/b][b]Warning[/b]: include() [[url="http://cclloyd.zxq.net/function.include"]function.include[/url]]: Failed opening '/inventory/summons.html' for inclusion (include_path='.:/usr/lib/php') in[b]/www/zxq.net/c/c/l/cclloyd/htdocs/inventory.php[/b] on line [b]34

[/b] When on line 34 is

[/b]<?php include("/inventory/summons.html"); ?>

And I stored that in that spot, and you can even see so... http://cclloyd.zxq.net/inventory/summons.html

[Ingolme]

The include path is relative to the server, so / is going to be pointing to a location way outside the root of your site. Don't use HTTP paths either. Use a relative path, such as "inventory/summons.html"