CODEWITHSUNDEEP
cssiframepositioning
user1149499
user1149499

Reputation: 583

positioning content of an iframe within a containing div

I've got a page which I need to serve via an iframe, but I need to only display part of the page, not the whole thing.

My current code is:

<div style="display:block;overflow:hidden;width:500px;height:350px;">
<iframe height="350px" scrolling="no"
src="http://my/page/i/want/to/show/part/of/here/" width="500px"></iframe></div>

I thought that the best option would be to serve the iframe within a containing div that has "overflow:hidden" so that it acts like a picture frame. That works, but the problem is that the content I want to show is in the middle of the iframe page and the div is always assuming that 0,0 is the start of the frame. I need to position the iframe so that the div is exactly over the part of the page I want to be visible.

Can I do this?

Upvotes: 4

Views: 50325

Answers (4)

l0g1kaL
l0g1kaL

Reputation: 21

Trick is all in the iframe style parameters. Placing in additional containers will help with alignment requirements.

<div style="border: 1px solid red; width: 70px; height: 20px; overflow:  
hidden;"><iframe style="width: 400px; height: 800px; margin-top: -200px; 
margin-left: -200px;" src="http://www.amazon.co.uk/product-reviews
/B0051QVF7A/ref=cm_cr_dp_see_all_top?ie=UTF8&showViewpoints=1&
sortBy=bySubmissionDateDescending" width="320" height="240"></iframe>
</div>

Credit to spamtech.co.uk for the help and examples: http://spamtech.co.uk/tips/position-content-inside-an-iframe/

Upvotes: 2

krisrak
krisrak

Reputation: 12952

Use negative values for margin-top and margin-left to position the iframe. Look at the code below:

<div style="display:block;overflow:hidden;width:500px;height:350px;">
<iframe style="margin-top:-100px;margin-left:-100px" height="350px" scrolling="no"
src="http://my/page/i/want/to/show/part/of/here/" width="500px"></iframe></div>

Upvotes: 8

Thiwanka
Thiwanka

Reputation: 91

<iframe name="itunes" src="http://itunes.apple.com/us/album/threads/id509846713&quot; frameborder="0" width="500" height="600" onload="window.frames['itunes'].scrollTo(250,250)"></iframe>

Upvotes: 2

Faust
Faust

Reputation: 15404

In the content to appear within the iframe, if you can set an element with an id that marks the very top of the portion of content you want to peak through, then you can set the iframe's src attribute with that anchor on the url

iframe content's HTML:

[a bunch of markup/stuff that you don't want to show]
....
<div id="topOfVisibleArea"></div>

[more markup]

iframe tag:

<iframe height="350px" scrolling="no" 
src="http://my/page/i/want/to/show/part/of/here/#topOfVisibleArea" 
width="500px"></iframe>

UPDATE -- BETTER APPROACH:

Or you can just use absolute positioning on the iframe within the div. You'll need the iframe's height and width to be wider and taller in than the window you're fitting it in to accomodate the offsets.

See this example: http://jsfiddle.net/sNSMw/

Upvotes: 3

Related Questions