CODEWITHSUNDEEP
javascriptjqueryhtmlcss
sanity
sanity

Reputation: 35772

How do I get an IFRAME to occupy the right half of a web page?

I realize that there are many questions explaining how to get two DIVs to appear side-by-side, but I've tried most of what they recommend, and nothing seems to work.

On the page http://www.lastcalc.com/ I want the DIV with id "worksheet" (and all of its contents) to occupy the left half of the page, and the IFRAME with id "helpframe" to occupy the right half.

Currently I'm trying this:

DIV#worksheet {
    float:left;
    width:50%;
}

IFRAME#helpframe {
    float:left;
    width:50%;
}

But the result is that the #helpframe is underneath the #worksheet DIV.

I would also like to be able to use JQuery to hide the helpframe and when I do, the worksheet DIV will expand to occupy the entire page.

How can I achieve this?

Upvotes: 1

Views: 4533

Answers (1)

Jasper
Jasper

Reputation: 75993

Just absolutely position the iframe to the right-top:

#helpframe {
    position : absolute;
    top      : 0;
    right    : 0;
    height   : 100%;
    width    : 50%;
}

You can hide the iframe using jQuery like this:

$(function () {
    $('#some-button').click(function () {
        $('#helpframe').hide();
        $('#worksheet').width('100%');
    });
});

There are also some pre-made animations you can use to show/hide elements: fadeIn/fadeOut/toggleFade/slideIn/slideOut/toggleSlide.

Upvotes: 2

Related Questions