Offset a webpage position inside iframe

Question

I have an iframe pop-up that is supposed to load a form.

The form is part of a larger page and contains some input fields.

In this case, the iframe which loads it (and is limited to about 1000px wide) acts as a "window" into a different page.

Is there a way to align not the iframe but the content itself when it loads in it? I want to load the whole entire html document inside the iframe but with an offset so that the iframe window shows just the fields that would normally be cutoff on a side or on the bottom or something, seeing how the iframe size is limited but the page being displayed is not.

Answer 1

There are several ways to do this, you can include an id in the url like: http://somesite.com/yourpage#anchor

This works but if you do not own the site you iframe (like some sort of custom video site with no iframe integration) you can do it via css with an empty offseted div before: http://aldebaranwebdesign.com/blog/how-to-position-a-page-within-an-iframe/

Your CSS:

#outerdiv
{
width:446px;
height:246px;
overflow:hidden;
position:relative;
}

#inneriframe
{
position:absolute;
top:-412px;
left:-318px;
width:1280px;
height:1200px;
}

The html:

<div id='outerdiv'>
<iframe src="http://www.siteto integrate.com/" id='inneriframe' scrolling=no></iframe>
</div>