CODEWITHSUNDEEP
phpjavascriptjqueryhtmliframe
Rummy
Rummy

Reputation: 125

How is the iFrame with Header Preview Achieved?

I know this is a general question, but I can't get a true answer on Stackoverflow or searching google. How do I make a page with a fixed header for logo and links and an iFrame of a given URL. The closest I've come across is this iFrame with Fixed Header. What I really want to achieve is this example on CodeCanyon. The first link gives a decent answer, but the page has two scroll bars. Thanks in advance!

EDIT: I want to make the iFrame stretch to the height of the page :)

Upvotes: 0

Views: 395

Answers (3)

James Stott
James Stott

Reputation: 3064

You could do

<html>
    <head>
    </head>
    <body>
        <div style="height:(x)px; width:100%; position:absolute; top:0; bottom:0; z-index:2;">
            The logo and links come here
        </div>
        <div style="width:100%; height:100%; position:absolute; top:0; bottom:0; z-index:1">
            <iframe src="xx.html" style="margin-top:(x)px; width:inherit; height:inherit"></iframe>
        </div>
    </body>
</html>

Upvotes: 1

Pedro Estrada
Pedro Estrada

Reputation: 2404

The examples you linked are using jquery to dynamically adjust the height.

//function to adjust height of iframe
var calcHeight = function () {
    var headerDimensions = $('#header-bar').outerHeight(true);
    $('#preview-frame').height($(window).height() - headerDimensions);
}

$(document).ready(function () {
    calcHeight();
});

$(window).resize(function () {
    calcHeight();
}).load(function () {
    calcHeight();
});

This is the code i used to dynamically adjust the height.

you can see it here in jsfiddle http://jsfiddle.net/QQKc4/11/

Upvotes: 1

Nishant Kaushal
Nishant Kaushal

Reputation: 286

You would have your HTML something like this...

<html>
<head>
</head>
<body>
<div style="height:[[some value you want in px]]"; width:100%;>
The logo and links come here
</div>
<iframe src="[[the url to load]]" style="width:100%;"></iframe>
</body>
</html>

Note - The inline styles can be moved to a stylesheet, and for the iframe, you'll need to calculate the window height minus the header div height with javascript/jQuery and apply the height to the iframe

Upvotes: 1

Related Questions