We help IT Professionals succeed at work.

How to adjust the height of an iFrame dynamically

JordanBlackler
JordanBlackler used Ask the Experts™
on
Hello All -

I'm using javascript and my site is inside a sharepoint environment. I'm able to adjust the height of the iframe onload with a function so that there are no scroll bars on the iFrame.

Inside the iFrame is a search webpart. When the "Search" button is pressed it uses AJAX to load the results right below. Which in turn lengthens the iFrame and adds scroll bars. I called the function from a button i created to test if it works after the results have displayed. It does, iFrame height adjusted, scroll bars gone.

But i don't wan't it to work by manually pressing a button, I would like it to somehow run the same function after the results have be displayed. I'm unable to modify the AJAX. I've tried sticking the function at the end of the OnClick event of the "Search" button, but it doesn't work.

I think i explained it well enough, if not let me know and i can try to do a better job. Thanks in advance.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Greg AlexanderLead Developer

Commented:
Could you post the script you have now?

Author

Commented:
Here you go, let me know if you would like anything else.
<script type="text/javascript">
<!--
function changeHeight()
{
var _height=
document.getElementById('iFrameSearch').contentWindow.
document.body.scrollHeight;

document.getElementById('iFrameSearch').height=_height;
}
//-->
</script>


<iframe width="100%" scrolling="no" border="0" frameborder=0 id="iFrameSearch" src="websiteHere" onLoad="changeHeight();" height="100%">  
</iframe>

//The css below is inside the iframe page.
<style type="text/css">
body {
overflow-x: hidden !important;
overflow-y: hidden !important;
} 
</style>

Open in new window

Commented:
You might be able to do this with a jQuery accordion, set with "no auto height"
http://jqueryui.com/demos/accordion/#no-auto-height

So in your page you would have the script (referencing the jQuery install)
<script type="text/javascript">
      $(function() {
            $("#accordion").accordion({
                  autoHeight: false,
                  navigation: true
            });
      });
      </script>

and then the div:

<div id="accordion">
      <h3><a href="#section1">Title</a></h3>
      <div><iframe width="100%" border="0" frameborder="0" src="thePage.html" height="100%"></iframe></div>
</div>

you could tell the page how tall you want the DIV to be and when the inside text gets to be too tall it will automatically add the scrollbar...

Author

Commented:
Thanks james -
"when the inside text gets to be too tall it will automatically add the scrollbar..."
Does it add the scroll bar to the iFrame or Parent window? Want to stay away from scroll bars on iFrames.

Author

Commented:
James - I gave it a try. It does expand, i removed the scroll bars from the iFrame. The problem is once it expands, the parent window doesn't have scrolls bars. There is no way for me to scroll the search results.

Commented:
Not sure, you'll have to try it.  I think it adds the scroller to the DIV, outside of the iframe...

Commented:
change autoHeight to true
or set the div to a height of 100%

??

Author

Commented:
Forgot mention this also. It's a secure website. So i get this message onload.
securityWarning.JPG

Author

Commented:
nevermind about the security warning, i was referencing the .js file from an external site.

Author

Commented:
Actually James, that codes doesn't adjust the iframe height. I need to adjust the iframe height after the results are displayed.

Commented:
Yeah I'm sorry I don't know - there has to be a way with jQuery or JavaScript, something that can post back to the browser and resize the iframe element.  I never use iframes for that reason.  SharePoint is limited when it comes to this kind of stuff, but maybe there is something else you can do like make the search box a form that sends the info to another page instead of embedding content.

Author

Commented:
Is there anything in jQuery that can check the iframe constantly to see if the size has changed?
Commented:
I'm looking, and trying to see if I can use Javascript to resize or even get the properties.  
Read here: http://www.dyn-web.com/tutorials/iframes/hidden.php

"This tutorial previously included code to set the height of an iframe to the height of the document loaded into it so the regular window scrollbars could be used. That code worked reasonably well for most browsers until standards compliant mode needed to be taken into account.

Attempts to update that code have been abandoned due to insurmountable browser incompatibilities. However, one can accomplish much the same effect by using a hidden iframe, and then transferring the iframe document's content into a div. Read on and view the example for a demonstration and more information."
Commented:
You might look into DHTML instead.  Probably cleaner and cross-browser when you do it right.  
Here's a great link:
http://www.dynamicdrive.com/dynamicindex8/index.html

Author

Commented:
Thanks for the help.

One last thing, when i hit the search button, an animated gif appears and when the search results display, it goes away. Is there any clues or anything to work with the fact the image goes away once the results are shown.

Commented:
I'm not really sure what you are talking about - is it on a script you are using or something?

Author

Commented:
I didn't program this search webpart. When you click the "Search" button and gif becomes visible and shows that it is loading the results, as soon as it is done searching the image does away and the results are displayed.

I didn't know if there was something with ajax or jquery that could check for the image and then run my own script after that.
Commented:
Yeah I'm not really sure, since it's in that search webpart and is nothing that we've worked on here.  Might be a SharePoint thing too.  You can try viewing the page source and see if it references something in that search, probably in JavaScript in an external file or something.  If you find that image on your server you could replace it with something else too, since it's probably just calling an image off the SharePoint server.
thanks for the help. I ended up going in a different direction.

Author

Commented:
went a different direction