JOOMLA FICTION LAB
(2 votes)

How to create an iframe-wrapper in Joomla with dynamic height

How to create an iframe-wrapper in Joomla with dynamic height
Wednesday, 08 February 2012 18:41
In Joomla you can insert an iframe inside the component area using the wrapper component. You can also set the iframe height when you create the wrapper menu item however you must insert a specific value for the height.

So what can you do if you need the iframe to resize dynamically according to the web page being wrapped?

100% iframe height won't work


You would expect that if you inserted the value 100% for height, that would give you a dynamic resizing. However this is not the case.

This will only give you an iframe with a static height of about 150px.



Using Javascript to work this out


1. Copy the file components/com_wrapper/views/wrapper/tmpl/default.php to
templates/your_template/html/com_wrapper/wrapper/
2. Open the file templates/your_template/html/com_wrapper/wrapper/default.php
3. Replace the function iFrameHeight() with the new function below:

function pageY(elem) {
    return elem.offsetParent ? (elem.offsetTop + pageY(elem.offsetParent)) : elem.offsetTop;
}
var buffer = 0; //scroll bar buffer
function iFrameHeight() {
    var height = document.documentElement.clientHeight;
    height -= pageY(document.getElementById('blockrandom'))+ buffer ;
    height = (height < 0) ? 0 : height;
    document.getElementById('blockrandom').style.height = height + 'px';
}
document.getElementById('blockrandom').onload=iFrameHeight;
window.onresize = iFrameHeight;

With this new function the iframe height will be dynamically resized and take the size of the wrapped page.

Did this work out for you or did you experience any problems?
Let us know in the comments below.





Read 7629 times
Published in Javascript Scripts
More in this category: « How to create a BACK LINK with Javascript

Add comment


Security code
Refresh