Pages

Ads 468x60px

Social Icons

Featured Posts

Search

How to create page with header and iframe covering rest of the page

Thursday, 26 August 2010

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!

1 comment

  1. I read a lot of interesting articles here. Probably you spend a lot of time writing,
    i know how to save you a lot of work, there
    is an online tool that creates readable, google friendly articles in minutes,
    just search in google - laranitas free content source

    ReplyDelete

 

Most Popular