Full Screen Iframe

Question

I am looking for a CSS solution that will let me to display a few horizontal full-screen iframes in one page.

I can do the jQuery myself, I just need couple of iframes to be in one page so I can click 'next' and the next iframe will be full screen. (So the iframes should be floated)

Thanks!

Answer 1

Use iframeclass on the iframes to make them appear on top of each other, then use jQuery to set the z-index to show which is "on top"

.iframeclass {
    position: absolute;
    top: 0; left: 0;
    width:100%;
    height:100%;
}

note: in order for height: 100%; to work, the PARENT object must have a height set. ie:

body {
    height:100%;
}

Second note, please be aware that whilst this answers your question, its not how I'd recommend doing what I think you are trying to achieve, I'd recommend loading each frame's content into a single div with ajax as and when you need it. The iframes will ALL load their content on page load.