Tag: JavaScript

A few times I needed to have a page where I have an iframe (I know, I know – it is bad design, but sometimes you need to sacrifice!) with header to the top. I tried many different CSS hacks, but could not get it right. Then I came around pageY(), tiny function created by John Resig (jQuery author), which helps to resolve this particular problem brilliantly:

    function ResizeIFrame() {
        var buffer = 40; //scroll bar buffer
        var height = document.documentElement.clientHeight -
            pageY(document.getElementById('ifrm')) + buffer;
        height = (height < 0) ? 0 : height;
        $('iframe#ifrm').css('height', height + 'px');
    }

    function pageY(elem) {
        return elem.offsetParent ? (elem.offsetTop + pageY(elem.offsetParent)) : 
            elem.offsetTop;
    }

Where ‘ifrm’ is ID of iframe.

The only thing we need now is handing load and resize events:

    window.onload = window.onresize = ResizeIFrame;

This could not be simpler!