JOOMLA FICTION LAB
  • Frequently Asked Questions component for Joomla! 1.7/2.5
    • MVC Architecture
    • Access Control Levels (ACL)
    • Integrated Search
    • SEF urls
    • jQuery Library
    • Extended Configuration Options
  • Login & Registration module for Joomla! 2.5+
    • More than 1,500 display combinations
    • Captcha support
    • 4 display types
    • Many themes to choose from
    • Customizable tooltips
    • Powered by jQuery & jQuery UI

Minitek Commercial Extensions

Minitek Free Extensions

Joomla Tutorials

  • 1
  • 2
  • 3
How to truncate text over a specified character limit in Joomla
How to truncate text over a specified character limit in Joomla
When you want to display only a certain amount of characters of a text...
How to load the parameters of a Joomla module inside an external php file
How to load the parameters of a Joomla module inside an external php file
With this code you can load the parameters of any Joomla module inside...
How to load the Joomla framework inside an external file
How to load the Joomla framework inside an external file
In some cases, like when you are accessing an external php file throug...
How to modify the Joomla generator tag
How to modify the Joomla generator tag
Joomla generates a meta tag that is included in the head section of th...
How to redirect using the Joomla API
How to redirect using the Joomla API
You can use the Joomla API to easily redirect to another url and displ...
How to embed a video inside a Joomla 1.7 article
How to embed a video inside a Joomla 1.7 article
In this tutorial I will show you how to configure Joomla so that you c...
How to get the component parameters from within a model
How to get the component parameters from within a model
In this tutorial I will show you how you can get the parameters of a J...
How to use .htaccess in WAMP
How to use .htaccess in WAMP
In WAMP server, if you turn on Search Engine Friendly URLs in Joomla a...
How to create new fields in any position of a K2 item
How to create new fields in any position of a K2 item
In K2 you can easily add extra fields in a K2 Item by using the "Ext...

More Tutorials

  • 1
  • 2
How to block direct access to php file called by ajax function
How to block direct access to php file called by ajax function
In php you can emulate an ajax request by inserting a proper header. ...
How to dynamically resize a div with javascript and jQuery
How to dynamically resize a div with javascript and jQuery
When you are designing a website, in some cases you will find your sel...
How to strip specific words from a string with php
How to strip specific words from a string with php
With this simple php script you can remove any specified words from a ...
How to reset or clear a form with jQuery
How to reset or clear a form with jQuery
With the jQuery Form Plugin you can easily clear the form elements by ...
How to create an iframe-wrapper in Joomla with dynamic height
How to create an iframe-wrapper in Joomla with dynamic height
In Joomla you can insert an iframe inside the component area using the...
How to create a BACK LINK with Javascript
How to create a BACK LINK with Javascript
You can easily provide a link back to the previous page to your visito...
(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 7640 times
Published in Javascript Scripts
More in this category: « How to create a BACK LINK with Javascript

Add comment


Security code
Refresh