Recently we had to implement both FileKing and BookingWizz on one of our clients websites. The problem was that he already had a custom made CMS from which he wanted to manage bookings and files. To avoid unnecessary integration time we decided to create 2 new sections in the CMS and then insert an iframe to manage fileking and bookingwizz inside. We knew that even though iframe would work – whenever content inside the iframe would get longer than the iframe\’s "height" attribute we would get vertical scroll. There was no actual way of making the height of the iframe "liquid" with simplt HTML or CSS (setting it to 100% for example, wouldn’t work). We thought that now, when we have jQuery – there had to be a solution for this….

After browsing the web – we found the solution written on javascript (even without jQuery).The only thing which was left for us to do is basically login integration of the CMS with our login part of the script, which also took just couple of minutes. Usually when you login to some CMS it creates a session (at least CMS we were working with did that) so all we had to do is check in the login page of the fileKing and bookingWizz if session of the CMS equals to successful login (specific to CMS) – then we took the login parameters of the admin record and created needed session variables for our scripts.

With this piece of code you literally can integrate our scripts into your CMS within an hour (considering that you have PHP/HTML knowledge)
If you will be using this method to integrate such iframe for something else it is Important to note that iframe content must be local, otherwise javascript will not get the height of the iframe contents.

1. Your iframe code should be like this:
<iframe src="/filemanager/index.php" width="100%" frameborder="0" scrolling="auto" class="autoHeight" name="your_name" id="your_id" border="0"></iframe>

2. After inserting this iframe code, add following javascript closer to the </body> tag:
<script language="JavaScript" type="text/javascript" src="autoheight.js"></script>

3. Your javascript file should contain following code:

function doIframe(){
    o = document.getElementsByTagName(\’iframe\’);
    for(i=0;i<o.length;i++){
        if (/\\bautoHeight\\b/.test(o[i].className)){
            setHeight(o[i]);
            addEvent(o[i],\’load\’, doIframe);
        }
    }
}

/* USE FOLLOWING FUNCTION IF YOU NEED TO SET HEIGHT FOR ALL iFRAMES ON PAGE.
!JQUERY LIBRARY MUST BE LOADED BEFORE USING THIS FUNCTION!*/
function doIframe_all(){
    $("iframe").each(function(){
        if (/\\bautoHeight\\b/.test(this.className)){
            setHeight(this);
            addEvent(this, \’load\’, doIframe);
        }
    });
}

function setHeight(e){
if(e.contentDocument){
e.height = 35 + e.contentDocument.body.offsetHeight;
} else {
e.height = 35 + e.contentWindow.document.body.scrollHeight;
}
}

function addEvent(obj, evType, fn){
    if(obj.addEventListener)
    {
    obj.addEventListener(evType, fn,false);
    return true;
    } else if (obj.attachEvent){
    var r = obj.attachEvent("on"+evType, fn);
    return r;
    } else {
    return false;
    }
}

if (document.getElementById && document.createTextNode){
 addEvent(window,\’load\’, doIframe);   
}

Article was written to show you (our customers) how you can easily integrate our php scripts into 3rd party CMS.

Credits:
Original plugin was created by somebody from mobius.tw and autoheight.js file was referenced on this link http://lib.mobius.tw/jquery/myplugin/iframe_autoHeight/api.htm however link is dead for long time now. Referenced plugin was found here: http://www.lost-in-code.com/programming/jquery-auto-iframe-height/