JordanBlackler
asked on
How to adjust the height of an iFrame dynamically
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.
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.
Greg Alexander
Could you post the script you have now?
ASKER
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>
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>
<div><iframe width="100%" border="0" frameborder="0" src="thePage.html" height="100%"></iframe></d
</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...
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>
<div><iframe width="100%" border="0" frameborder="0" src="thePage.html" height="100%"></iframe></d
</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...
ASKER
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.
"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.
ASKER
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.
Not sure, you'll have to try it. I think it adds the scroller to the DIV, outside of the iframe...
change autoHeight to true
or set the div to a height of 100%
??
or set the div to a height of 100%
??
ASKER
Forgot mention this also. It's a secure website. So i get this message onload.
securityWarning.JPG
securityWarning.JPG
ASKER
nevermind about the security warning, i was referencing the .js file from an external site.
ASKER
Actually James, that codes doesn't adjust the iframe height. I need to adjust the iframe height after the results are displayed.
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.
ASKER
Is there anything in jQuery that can check the iframe constantly to see if the size has changed?
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
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.
I'm not really sure what you are talking about - is it on a script you are using or something?
ASKER
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.
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.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
went a different direction