Auto height iframe content script

JavaScript
1

Hey. I’m making a wordpress theme that will have a SMF forum incorporated into one of the pages.

I’ve decided to use an iframe that calls in the forum (which is in the same domain), after trying several of the auto height scripts, including ones I used before with success, I got nothing.

I’m not sure if it’s a wordpress thing, but the scripts I’m so familiar with just don’t want to work.

Since forums change their height with all the different pages, this is an essential script for me. The only script (a new one) that somewhat works is the following:


<script language="javascript" type="text/javascript">
 function resizeIframe(obj)
 {
   obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
   obj.style.width = obj.contentWindow.document.body.scrollWidth + 'px';
 }
</script>

which eventually gets called with:


onload='javascript:resizeIframe(this);'

inside the iframe tag.

Now, this seemed to work just fine, but now the height of the page gets added the more I browse. if for example i go to a topic with a lot of replies (meaning, a long page height), and I browse back to the index page, that extra height isn’t gone.

You can see what I mean here:
cudamine.com/wordpress/?page_id=39

I was wondering if there is something that can be done to this script to stop this and properly resize the iframe.

The other script I’ve used was:
lost-in-code.com/programming/jquery-auto-iframe-height/

which worked great as you can see here:
cudamine.com/santa-maria/forum.php

2

I don’t see any scrollbars. That issue is new to me?

I’m using the new FF beta and everything looks just fine there.
On Chrome, I get that height space issue.
On IE, not even bothering.

3

I can’t see what’s wrong. I clicked a few links in the forum and the resizing seemed to happen OK.

I can see a few problems though. For a start, there is no need to use the javascript: pseudo-protocol especially in an onload attribute. It is sometimes used in href attributes (so links will execute some javascript) but that’s a terrible practice anyway. The double scrollbars on the right (FF 3.6.10) are horrible, horrible. And the whole idea of using iframes is pretty bad. It’s messy and the fact I can’t see the address bar every time I click is a serious enough flaw in my opinion.

4

Little bump, ok, so i returned to my original script, I just don’t want to believe something that is working fine in one page, doesn’t work on some other.

As you can see, it is fully working on this html page:
cudamine.com/santa-maria/santa2/

But on the wordpress php page, it doesn’t:
http://cudamine.com/wordpress/?page_id=39

The code is the same with the exception of how I call the scripts in the php page header:

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/jquery.js"></script> 
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/jquery.autoheight.js"></script>

I need to this because of the way wordpress calls the header, index and footer pages.

A layout would look like this:

<?php get_header(); ?>
<?php get_index(); ?>
<?php get_footer(); ?>

Since this is a custom page, I have:


<?php
/*
Template Name: Forum
*/
?>
<?php get_header(); ?>
<div id="wordp">
<iframe id="myframe" name="myframe" class="autoHeight" frameborder="0" scrolling="no" src="http://cudamine.com/santa-maria/forumsmf/index.php" width="100&#37;"></iframe>
</div> 
<?php get_footer(); ?>

this is driving nuts right now, wordpress forums don’t seem to have many answers, I’m not sure if it’s my small knowledge with js and php that is the cause of this, maybe I need to call the script in a different way? I have no clue.

edit:
I know the script uses no jquery, by the way ;).

5

I just checked it on FF 3.6.10 and I still don’t see any dual scrollbars :(…

I’m not very good with js, so I don’t really understand about the so called “pseudo-protocol”, this is not my script. As for the Iframe itself, i also hate using them, it’s a pain in the butt, but I’m not familiar with any SMF to WP bridges, nor do i have any idea where to start making my own forum skin that calls for WP functions. it’s a cheap escape but oh well.

I’m only really looking into getting this fixed on chrome. I might be pushing it a bit far here, but sitepoint is always my last hope! I can’t seem to find any other script that does this, so maybe a few tweaks on this one could make it browser friendly…