Hello all,
I have an iframe that I dynamically set the height to the height of the content. This works good except when there's changes in the content (such as displaying a hidden element when toggling it's container's visibility).
Can I add a listener that listens for changes to the documents height and re-set the frame height accordingly?
I am using jquery and here's what I have to dynamically set the frame height.
[text]$(document).ready(function(){
var theFrame = $('#aif2', parent.document.body);
theFrame.height(1);
theFrame.height($(document.body).height() + 30);
});[/text]
I've never added a listener before.. could I get a little help in the right direction, if it's possible?
[SOLVED] event listener? dynamically changing iframe height
Moderator: General Moderators
[SOLVED] event listener? dynamically changing iframe height
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
Re: event listener? dynamically changing iframe height
I have gotten this to work using the following
[text]var myInterval = setInterval(
function() {
setHeight()
},
1000
);
function getHeight()
{
var body = document.body,
html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
return height;
}
function setHeight()
{
var height = getHeight();
$('#aif2', parent.document.body).height(height);
}[/text]
However, it seems once an element is expanded and then reverted back to the hidden position, the documents height does not change back to the previous height. Why? Same thing with jquery rather than getting the height with pure javascript.
[text]var myInterval = setInterval(
function() {
setHeight()
},
1000
);
function getHeight()
{
var body = document.body,
html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
return height;
}
function setHeight()
{
var height = getHeight();
$('#aif2', parent.document.body).height(height);
}[/text]
However, it seems once an element is expanded and then reverted back to the hidden position, the documents height does not change back to the previous height. Why? Same thing with jquery rather than getting the height with pure javascript.
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
Re: event listener? dynamically changing iframe height
I was thinking of intervals too but hoping somebody had a better idea.
Have you confirmed that the height value changes? What are the respective values of all the scroll-, offset-, and clientHeights before and after?
Have you confirmed that the height value changes? What are the respective values of all the scroll-, offset-, and clientHeights before and after?
Re: event listener? dynamically changing iframe height
You can't add a "listener" to this, because there are no events fired when an element changes height. Repeatedly checking the height with setInterval() I think is the only way.
As a test, give the <html> element in your iframe page an outline so you can see the height. Then make your iframe way larger than necessary and see if the <html> element really is resizing or not - at least that'll help you narrow down where the problem is.
To get the height of the iframe, I believe $('html').outerHeight() should be sufficient: http://api.jquery.com/outerHeight/
If you're still having trouble, a jsFiddle would help
What does this mean? Do you have an animation to grow an element, then an animation to shrink it again? Or does the element just hide without shrinking? How does it hide? display:block or visibility:invisible?s.dot wrote:However, it seems once an element is expanded and then reverted back to the hidden position, the documents height does not change back to the previous height.
As a test, give the <html> element in your iframe page an outline so you can see the height. Then make your iframe way larger than necessary and see if the <html> element really is resizing or not - at least that'll help you narrow down where the problem is.
To get the height of the iframe, I believe $('html').outerHeight() should be sufficient: http://api.jquery.com/outerHeight/
Code: Select all
var $html;
$(function(){
$html = $('html');
setInterval(function(){
$('#aif2', parent.document.body).height($html.outerHeight());
}
,1000
);
});
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Re: event listener? dynamically changing iframe height
Hi pickle,
Your code (albeit simpler, and prettier) works the same as the code I posted above. The frame height does not change back to what it was when an element is hidden. I am hiding and showing elements using jQuery's $('element').toggle(). I believe this uses the display: none when hidden. It is initially set as display: none;. Then when it is toggled, I am guessing that it's set to display: block;.
Furthermore, even if the page inside the frame is changed and the whole function above is re-called on this new page, the iframe height stays the same as it was when I expanded the element if the new page is shorter in height. If it is longer in height, then the iframe adjusts to the new page height.
EDIT| I can fix the new page issue by doing the following:
[text]$('#aif2', parent.document.body).height(1);
$(function(){
$html = $('html');
setInterval(function(){
$('#aif2', parent.document.body).height($html.outerHeight());
}
,1000
);
});[/text]
Just setting the height to 1 and then allowing it to size itself. However, the issue still remains of the iframe height not adjusting after an element is displayed and then hidden.
EDIT2| Using my own toggle function using document.getElementById('el').style.display = 'block'/'none' does exactly the same thing as jquery's .toggle(). is there a way to reset the page height after using display: none; on an element?
Your code (albeit simpler, and prettier) works the same as the code I posted above. The frame height does not change back to what it was when an element is hidden. I am hiding and showing elements using jQuery's $('element').toggle(). I believe this uses the display: none when hidden. It is initially set as display: none;. Then when it is toggled, I am guessing that it's set to display: block;.
Furthermore, even if the page inside the frame is changed and the whole function above is re-called on this new page, the iframe height stays the same as it was when I expanded the element if the new page is shorter in height. If it is longer in height, then the iframe adjusts to the new page height.
EDIT| I can fix the new page issue by doing the following:
[text]$('#aif2', parent.document.body).height(1);
$(function(){
$html = $('html');
setInterval(function(){
$('#aif2', parent.document.body).height($html.outerHeight());
}
,1000
);
});[/text]
Just setting the height to 1 and then allowing it to size itself. However, the issue still remains of the iframe height not adjusting after an element is displayed and then hidden.
EDIT2| Using my own toggle function using document.getElementById('el').style.display = 'block'/'none' does exactly the same thing as jquery's .toggle(). is there a way to reset the page height after using display: none; on an element?
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
Re: event listener? dynamically changing iframe height
I suppose if I made my own toggle function, I could get the height of the element, and explicitly set the frame height to the html height minus element height anytime an element is hidden (or use a callback function to jquery's toggle).
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
Re: event listener? dynamically changing iframe height
Okay.. guess it's not possible. The height of the element once shown is "undefined". There's no way to subtract undefined from the page height to reset the frame height after it's hidden.
I wonder if I show all elements and then hide them on page load if the height will be set.
I wonder if I show all elements and then hide them on page load if the height will be set.
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
Re: event listener? dynamically changing iframe height
Can you alert() the height after it's calculated? Maybe the height is being calculated but just not being set properly for some reason.
What if you view the page inside the iframe, all by itself. Does the height calculation work then?
What if you view the page inside the iframe, all by itself. Does the height calculation work then?
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Re: event listener? dynamically changing iframe height
When I was alert()'ing the height it was showing undefined.. I guess it depended on the display property. I am not sure.
But I did get it working by wrapping the toggle() function and using a callback! Woohoo!
[text]function doToggle(el)
{
$('#'+el).toggle(0, function(){
$('#aif2', parent.document.body).height($('html').outerHeight() - $('#'+el).outerHeight());
});
}[/text]
[text]<a href="javascript: void(0);" onclick="doToggle('elementid');">toggle</a>[/text]
I don't know why this works even when the element isn't hidden, but it does. This has racked my brain for days.
Thanks for your help!
There is a small issue where once the frame is resized back when the element is hidden, when the setInterval function is called it adds a few pixels onto the frame height.. but only once. Not a big deal.
EDIT| For anyone reading this, the entire javascript is as follows:
[text]$(document).ready(function(){
var $html;
$('#aif2', parent.document.body).height(25);
$(function(){
$html = $('html');
setInterval(function(){
$('#aif2', parent.document.body).height($html.outerHeight());
}
,500
);
});
});
function doToggle(el)
{
$('#'+el).toggle(0, function(){
$('#aif2', parent.document.body).height($('html').outerHeight() - $('#'+el).outerHeight());
});
}[/text]
But I did get it working by wrapping the toggle() function and using a callback! Woohoo!
[text]function doToggle(el)
{
$('#'+el).toggle(0, function(){
$('#aif2', parent.document.body).height($('html').outerHeight() - $('#'+el).outerHeight());
});
}[/text]
[text]<a href="javascript: void(0);" onclick="doToggle('elementid');">toggle</a>[/text]
I don't know why this works even when the element isn't hidden, but it does. This has racked my brain for days.
There is a small issue where once the frame is resized back when the element is hidden, when the setInterval function is called it adds a few pixels onto the frame height.. but only once. Not a big deal.
EDIT| For anyone reading this, the entire javascript is as follows:
[text]$(document).ready(function(){
var $html;
$('#aif2', parent.document.body).height(25);
$(function(){
$html = $('html');
setInterval(function(){
$('#aif2', parent.document.body).height($html.outerHeight());
}
,500
);
});
});
function doToggle(el)
{
$('#'+el).toggle(0, function(){
$('#aif2', parent.document.body).height($('html').outerHeight() - $('#'+el).outerHeight());
});
}[/text]
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.