# Best way to make an iframe snap to child content size.



## icp_nz (Apr 5, 2011)

Hi guys

Just trying to put an iframe of a wordpress blog into another webpage.
Works fine, except there is a scroll bar for up and down.
I've googled about getting it to snap to the height of the child content but no methods seem to work.

Is there an 'updated' method that works? Does any one know of the simplest way to make the height of the iframe automatically match the height of the page? Or is there an alternative to iframe to do what I'm wanting?

Just so when content is added to the blog, the iframe automatically resizes to the new length 

Thanks guys


----------



## Laxer (Dec 28, 2010)

as for snapping to something inside the content its not possible unless the site inside the inframe is under your control or has anchor tags.

You can adjust the height of the frame by using percentages or a javascript to get the height of another element then setting it to that.

as for removing the scroll bar:
This will remove both scroll bars:

```
iframe{
overflow:hidden;
}
```
To remove just the bottom scroll bar:

```
iframe{
overflow:scroll;
overflow:-moz-scrollbars-vertical;
overflow-x: hidden;
}
```
just add the above to your css


----------



## icp_nz (Apr 5, 2011)

Thanks for that.

Yea I had a play with some javascripts but none worked, as the child site was on a different domain from the parent site, is that correct as to why it wouldn't work?

So I need a work-around to automatically get the height of the child site which is located on a different domain to the parent site.

Yea to get rid of scroll bars can just use scrolling="no"

thanks mate


----------



## Laxer (Dec 28, 2010)

icp_nz said:


> Thanks for that.
> 
> Yea I had a play with some javascripts but none worked, as the child site was on a different domain from the parent site, is that correct as to why it wouldn't work?
> 
> ...


Yes, It is correct you can not run a script from your site to be ran on another. Even if you could manage to do so its a way of hacking [snip] which could lead you into legal problems.

my advise: create an iframe that uses 100% width and X% height. then remove the scroll bar from the body and keep it on the iframe.

This has worked for me. here is an example: Teacher Webpages!

The goal in the above project was to provide a "back to home" link on external links for my schools website.

This eventually failed because some sites have "frame breakers" like google docs which refuse to load in a frame. Another issue was that i was unable to change the title of each page in the frame  as you can tell form the link above the current title is "teacher Webpages!" even though it links to TSF.


----------



## Laxer (Dec 28, 2010)

Here is the source if you want it:


```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Teacher Webpages!</title>
<script type="text/javascript">
window.onload=function() {
var data=location.search;
if(data) {
    data=location.search.substring(1);
    frames[0].location = data;
    }
}
</script>

<style type="text/css">
html,body {
padding:0px;
margin:0px;
height:100%;
overflow: hidden;
}

#content {
height:100%;
min-height:100%;
}

html>body #content {height:auto}

iframe {
position: absolute;
top: 0; left: 0; width: 100%; height: 95%;
}
		
#foot {
background:#000; 
width:100%;
margin-top:-26px;
height:23px;
padding-top:2px;
border-top:2px solid #FF9900;
text-align:right;
color: #ff9900;
font-size:10px;
}

a:link {text-decoration: none; font-weight:bold; color:#ff9900; font-size:12px;}
a:visited {text-decoration: none; font-weight:bold; color:#ff9900; font-size:12px;}
a:active {text-decoration: none; font-weight:bold; color:#ff9900; font-size:12px;}
a:hover {text-decoration: underline; font-weight:bold; color:#FFF; font-size:12px;}
</style>

</head>

<body>
<div id="content">
[MEDIA=youtube]frameborder[/MEDIA]
</div>
<div id="foot">
 <div style="float:left; margin-left:5px;">Created by: Geoff Maggi</div><div style="margin-right:5px;"><a href="http://www.spraguehs.com/staff/teacher-webpages.php">Back to Sprague</a></div>
 </div>
</body>
</html>
```
Meh, i wrote this last year. Shame to see how messy my coding used to be


----------



## icp_nz (Apr 5, 2011)

Haha thanks mate will have a look over that tomorrow and try and get it to work.
Had a look at the link, looks good! But I still need it to look like the original website showing the header, menu etc, is that harder/not possible to do?


----------



## Laxer (Dec 28, 2010)

icp_nz said:


> Haha thanks mate will have a look over that tomorrow and try and get it to work.
> Had a look at the link, looks good! But I still need it to look like the original website showing the header, menu etc, is that harder/not possible to do?


its certainly possible, in the example i linked to i have a footer.

Just have the structure of your site, remove your content area and replace it with the iframe.

Might be interesting with the scroll bar though =/


----------



## icp_nz (Apr 5, 2011)

Are you very familiar with wordpress? I know it's possible to edit there themes and CSS, but to what extent? Is it possible to scrap everything except the main post column? i.e. not showing the menu, header, or any of that other stuff and just the post column or the post column and a left menu? To make it look like it "fits" the page more?

Don't have experience with wordpress 

Cheers


----------



## Laxer (Dec 28, 2010)

I have limited experience with wordpress, i have installed it on a server before and set things up but nothing more.

However, it is open source so yes it is possible.

The problem you will run into tho is you will have to create a whole new page to embed the frame in then manually link it as wordpresses database wont naturally detect it.

If you need help i will gladly assist you through the process.


----------



## icp_nz (Apr 5, 2011)

Hi again, ok yea I haven't worked with wordpress at all before.
Only have very limited knowledge on it.

What do you mean by I'll need to create a whole new page? Do you mean a whole new wordpress page or a whole new webpage on the website?? Manually link it? Wordpress database won't detect what?

I work for a small NZ based web design company, and have a client wanting a blog set up. My boss always said it's better to online and find good forums and website to research and learn from as self-taught is the best-taught. If you head over to http://icp.freevar.com/whf/blog.html that's the test page, you can see I've got the wordpress blog to sit in there ok, but you'll also see what I mean by it looks a bit rude with the Home,About,Contact menu still there and the big grey divider. If we could get rid of those, and the "Josh - Whitehead Fitness Blog" heading that would be AWESOME as then it would only show the posts and the little column on the right with whatever he wants to add there.

Thanks in advance 
If it's easter time in America at the moment too, I hope you're having a great one and not working too much like me!


----------



## Laxer (Dec 28, 2010)

I misunderstood your question so sorry for that.

I was thinking you were working in wordpress and wanted a page where you embedded something else 

making CMS do some of these things can become a mess as im sure you learned from my last post 

-------------------------------------

back on topic.

I am not sure of an easy way to do what you want.

I know it can be done by going to your theme and manually editing style css setting everything you don't want to not be visible.

I would do some searching for themes that already have these disabled.

I was able to find this: Easy WordPress Theme For iframe Facebook Fan Page Tabs

I am sure with some manipulating you can easily get it to work


----------



## icp_nz (Apr 5, 2011)

Ok, I don't think that iframe for facebook would work thought would it? Didn't really get his video either..

With the css styles, editing those would only edit how things look though right? So if I deleted the navigation styles and attributes wouldn't they still be visible but just look default? To get rid of them fully don't I need to be able to alter a template page or index page or something?

Do you know how I do this?

Thanks again - and no worries about mis-understanding the Q mate, all good!


----------



## Laxer (Dec 28, 2010)

I believe the one for facebook would work. if you watched the video, there are options for template without x x and x.

and what i meant by doing it in css, if you make them "invisible" they will still be there just not visible to the users.


you can't just alter one page as its all webbed together. easiest way to do it is to edit the css file from your theme


----------



## icp_nz (Apr 5, 2011)

O ok.

I added this to the CSS:

#header{
visibility:hidden
}
#header_inner {
visibility:hidden
}
.nav{
visibility:hidden
}
#title{
visibility:hidden
}

------------

Previewed it, seemed to work, although it is saying to save this I/the customer needs to purchase the custom CSS upgrade?? I don't know where his current blog is hosted, but I'm guessing it's hosted at wordpress, so to be able to edit the CSS etc I need to get him to host it where the website is going to be hosted so the whole blog is uploaded and located at the same hosting location as the website?


----------



## Laxer (Dec 28, 2010)

I would host it at the same place as the website, Installing wordpress is pretty simple.

Moving WordPress « WordPress Codex


----------



## icp_nz (Apr 5, 2011)

Hi there

The website is now live, and I have installed a fresh new wordpress on the same domain. I've set the menu and header and everything to hidden, and put an attribute in the wrapper tag to set the margin-top to -300px which makes the first post and everything sit up nice and high.

But, I'm having trouble getting it to work the way I want it. Which code do I need for the iframe to make it so the actual website page snaps to the size of the wordpress blog length? They're on same server/domain now so it's possible isn't it? It's installed in /blog/. The way I've got it now, when there are 2+ posts it creates a scroll bar on the iframe which pushes everything to the left so it doesn't line up anymore with my websites header.

How do I make the scroll bar come up for the webpage itself, not in the iframe? So it will push everything over equally?

I'm using the coding you posted in post #5.

Thanks mate 
Try get back to me as soon as possible if you have time as I need it sorted in next few days 

Thanks


----------



## Laxer (Dec 28, 2010)

if its on the same domain you can run a javascript to get the height.

Personally i would look at doing a php include.


----------



## icp_nz (Apr 5, 2011)

Ok, do you know what javascript I can use? And what code I need?
Will the scroll bar always be just for the iframe? Or can you make it for the whole page so it's like both the iframe and my normal website header and menu above the iframe are "one"?

I don't have any knowledge regarding php include.


----------



## icp_nz (Apr 5, 2011)

Ok, I've got it looking how I want it, height set to 72% and width to 100%. Looks good, but only on my screen, if I resize the browser window and shrink the height of it, the scroll bar stays same size so the smaller in heigh I make the browser window the less of the scroll bar you can see, it doesn't automatically stick to the window like your's does.

Any idea how I can make that happen? I've looked at your code and can't see where the issue is.

Thanks mate


----------



## Laxer (Dec 28, 2010)

did you hide the body scroll bar?


```
html,body {
padding:0px;
margin:0px;
height:100%;
overflow: hidden;
}
```
Can you provide me a link so i can check it out?


----------



## icp_nz (Apr 5, 2011)

Yea sure have.

Sure, Here is the link. When the window is resized smaller (in height) the scroll bar slowly goes further and further out of the window vertically at the bottom.

Any idea's?

Thanks


----------



## Laxer (Dec 28, 2010)

I see the problem, I also see why it is doing it but i am unable to solve it.

In 800x600 you can still see the scroll bar.

I think the best solution would be to run a javascript using ("screen.height")

essentially what the script would do is:

document.getElementById(iFrameName).style.height=screen.height-175 + "px";

I chose 175 because it is the height of your header.


----------



## icp_nz (Apr 5, 2011)

Cheers. Unable to solve it? Do you know why your page doesn't do it but this one does?

I looked for that javascript and found one but it didn't work, made the iframe REALLY short. Could you point me to the right place to find that script please?

document.getElementById(iFrameName).style.height=screen.height-175 + "px";
Is that what needs to be placed in the .js file or in the .html webpage code? Sorry I'm new to js so still learning as I experiment. 

Thanks


----------



## icp_nz (Apr 5, 2011)

Hold on, think I got it sorted. Check out the link again.
Does that look all good to you?

I had to use this just below the </body> tag:

<script>
document.getElementById("blog").style.height=screen.height+17 + "px";
</script>

The "-175" didn't work for some reason, still had the scroll bar, trial and errored until it was right and it turned out to be +17.

========
EDIT: Just checked in Firefox, IE, Chrome, and Safari, works fine. But in all of them when I drag the width of the browser in it does some funny stuff, any idea what that is? Is there any way to make it stay the same width instead of doing that funky stuff once it goes inside the width of the width of the webpage itself?


----------



## Laxer (Dec 28, 2010)

I noticed this too, i think it has something to do with the width being set to 100%

try instead removing it and adding


```
document.getElementById("blog").style.width=screen.width + "px";
```
to the javascript.

As for the issue, the problem is the browser was reading the scroll bar as if it was at the very top of the window. this is why in mine it worked and in yours it didn't shrink correctly.

I believe the issue you are having now is because the actual page is x-px wide. while the iframe is 100% wide. when the browser gets really short the iframe becomes smaller then the header and is set to 100% then reset everytime you scroll.

I think manually setting the width like i suggested above will fix this although i am not sure.


----------



## icp_nz (Apr 5, 2011)

Just tried it and as I thought it didn't work, because that's making the iframe the width of the screen so as soon as you "restore down"/make the window smaller in width from being maximized it puts a bottom scroll bar there - I'm guessing that's why?


----------



## Laxer (Dec 28, 2010)

hmmmmm

scratch that solution lets try this one.

add this to your css:

```
#blog{
width:100%;
min-width:600px;
}
```
please note that min-width can be adjusted.


----------



## icp_nz (Apr 5, 2011)

Done! Got it sorted - your may have worked too?

Just had to set the width of the iframe to the maximum width on the page which was the header.

style="width:980px;" - in the iframe tag

Looks good in IE, FF, Chrome, and Safari. Just need to change the wordpress CSS to make the background the same colour as the page background as you can see the two strips, one on each side, between the end of the wordpress width and the end of the header width.

Does it look all good on your PC ?


----------



## Laxer (Dec 28, 2010)

Looks great here.

I am glad we were able to get this sorted out.

If you have any other questions feel free to fire away.

If you think we have solved this please mark the thread as "solved" using the drop down menu "thread tools" at the top of the page.


----------



## icp_nz (Apr 5, 2011)

Oh shoot.
Just realised that when you click on something in the wordpress iframe it doesn't resize the whole browser so it stays the same height no matter what the content of the iframe does (whether it gets larger or smaller).
Is there anyway to re-load the whole page when the iframe changes pages so the auto-height bit can re-adjust?
Hmm..didn't even think about this! Surely there's a fix?


----------



## Laxer (Dec 28, 2010)

icp_nz said:


> Oh shoot.
> Just realised that when you click on something in the wordpress iframe it doesn't resize the whole browser so it stays the same height no matter what the content of the iframe does (whether it gets larger or smaller).
> Is there anyway to re-load the whole page when the iframe changes pages so the auto-height bit can re-adjust?
> Hmm..didn't even think about this! Surely there's a fix?


this is what i was trying to solve before you got the +17.

the problem is right now the iframe has the height of the users resolution.

What this will do if the page expands beyond this is create a scroll box.

What i would do is use the css i provided before to remove the scroll bar from the body.

then subtract the height of your header and footer from the iframe in the javascript and set the scroll to that with the css i provided two posts ago except with min-width: set to 960px.


----------



## icp_nz (Apr 5, 2011)

Tried that and it didn't work, scroll bar continued way below the window.
And it wouldn't work anyway would it? Because it's running of the height of the screen resolution - when you resize it smaller than maximised the scroll bar just goes off the screen.

Ah this is so confusing.


----------



## Laxer (Dec 28, 2010)

icp_nz said:


> And it wouldn't work anyway would it? Because it's running of the height of the screen resolution - when you resize it smaller than maximised the scroll bar just goes off the screen.


The scroll bar should adjust, javascript is client sided scripting and should be able to adjust on the fly. we could add a timer but we must think.

how many people will visit your page, then resize there browser? I find it unnecessary.

If my fix doesn't work here is another: Auto reSizing Iframe height in the Page


----------



## icp_nz (Apr 5, 2011)

No I agree not many would resize the browser after going to the website. But, what if the user doesn't browse with the browser maximized? Then they would never see the whole scroll-bar or page.

Will check out that auto resizing iframe after lunch - cheers.


----------



## icp_nz (Apr 5, 2011)

Just took a quick look now actually and:

"We will make use of this callResize() in Child page"

How do I add anything to the child page? It is on the same domain yes but what page do I add it to inside the /blog/ (wordpress) folder? I can't add it to the CSS for the wordpress blog, or can I? Sorry for the dumb question but I really don't know


----------



## Laxer (Dec 28, 2010)

icp_nz said:


> Just took a quick look now actually and:
> 
> "We will make use of this callResize() in Child page"
> 
> How do I add anything to the child page? It is on the same domain yes but what page do I add it to inside the /blog/ (wordpress) folder? I can't add it to the CSS for the wordpress blog, or can I? Sorry for the dumb question but I really don't know


I would just add it to the header.

Even though the header isn't being displayed it should be included in every page thus the javascript would be ran every time.


----------



## icp_nz (Apr 5, 2011)

to the header in the CSS right?


----------



## icp_nz (Apr 5, 2011)

Oh wait no duh that won't work, where do I add the javascript to be in/with the header so it runs on every page?


----------



## Laxer (Dec 28, 2010)

probably in the header.php file i would think....


----------



## icp_nz (Apr 5, 2011)

Where abouts is that located? Is it in the blog directory itself? Is it the "wp-blog-header.php' file?

If so, I tried it before and couldn't get it to work.
Inside the file looks like this:

<?php
/**
* Loads the WordPress environment and template.
*
* @package WordPress
*/

if ( !isset($wp_did_header) ) {

$wp_did_header = true;

require_once( dirname(__FILE__) . '/wp-load.php' );

wp();

require_once( ABSPATH . WPINC . '/template-loader.php' );

}

?>


----------



## Laxer (Dec 28, 2010)

sorry, i actually had to go open my folder to find it.

go to wordpress/wp-content/themes/YOURCURRENTTHEME/header.php

paste the script right above the </head> using the appropriate markups.


----------



## icp_nz (Apr 5, 2011)

That's alright.
Thanks.
But - it didn't work, it makes the iframe quite small.

Do you know a similar way that is written in proper english? Guessing for that person english isn't their first language.

Ahh this is turning out to be a LOT harder then I'd thought it was going to be! - assumed it would be a semi-straight forward thing because assumed that loads of people would have wanted to do it before. All the ways I've tried just won't work!


----------



## icp_nz (Apr 5, 2011)

Really? Is no one able to help with this?

I've found another way pulling the files direct from the wordpress blog, but now as you can see from this page that the middle 2 posts don't show the date properly, any idea's why?? Seems strange to me. View source code for more info.

Please let me know as soon as possible anyone!
Thanks


----------



## icp_nz (Apr 5, 2011)

Really? Is no one able to help with this?

I've found another way pulling the files direct from the wordpress blog, but now as you can see from this page that the middle 2 posts don't show the date properly, any idea's why?? Seems strange to me. See below for used php coding:

On very first line of page:
<?php
// Include WordPress 
define('WP_USE_THEMES', false);
require('./blog/wp-load.php');
query_posts('showposts=-1');
?>

Where the posts show:
<center><div style="width:900px; text-align:left;"> 
<?php while (have_posts()): the_post(); ?>
<div style="border:1px solid #E4E4E4;background-color:#F4F4F4;padding:10px 10px 0 10px">
<h2 class="blogtitle"><?php the_title(); ?></h2>
<p class="date">• Posted on <?php the_date(); ?> by <?php the_author(); ?></p>
<div class="blogpost"><p><?php the_content(); ?></p></div>
<?php comments_popup_script(830, 515); ?>
<p><?php comments_popup_link('No comments', '1 comment', '% comments', 'comments-link', 'Comments are off for this post'); ?></p></div><br/><br/>
<?php endwhile; ?>
</div></center>


Please let me know as soon as possible anyone!
Thanks


----------



## icp_nz (Apr 5, 2011)

Sorted!

Needed: 
<?php the_time('l, F jS, Y') ?>
Instead of the current date tag.

Getting to know this wordpress stuff now!
Cheers for the help Laxer but think I'm sorted now. Iframe's suck pretty much , this way works really nice and can pull whatever you want. Was just the java popup for the comments that took a while to figure out and the styling.

Cheers
Hope this thread can help others!


----------



## Laxer (Dec 28, 2010)

icp_nz said:


> Getting to know this wordpress stuff now!
> Cheers for the help Laxer but think I'm sorted now. Iframe's suck pretty much , this way works really nice and can pull whatever you want. Was just the java popup for the comments that took a while to figure out and the styling.
> 
> Cheers
> Hope this thread can help others!


I would have suggested this earlier if they were both on the same domain, glad you were able to get everything working.

Sorry i wasn't able to get back to you sooner i had a busy start to the week.


----------



## icp_nz (Apr 5, 2011)

Cheers.

Just hope I don't need to show more like the search box and archived categories etc, although both of those should be possible? But just will have to be shown in a popup window right? Not really as cool looking as an iframe but will have to do.


----------



## Laxer (Dec 28, 2010)

Both of them should be possible, you will just have to find the code in wordpress to implement it.


----------

