Geek asks and answers

Positioning iframe content inside containing div

I have a page that I need to serve through an iframe, but I need to display only part of the page, not all.

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 the best option would be an iframe inside the containing div that has "overflow: hidden", so that it acts like an image frame. This works, but the problem is that the content I want to show is in the middle of the iframe page, and the div always assumes that 0,0 is the start of the frame. I need to position the iframe so that the div matches exactly the part of the page that I want to see.

Can I do it?

+3
source share
4 answers

margin-top margin-left iframe. :

<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>
+5

, iframe, , , , iframe src URL

iframe content HTML:

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

[more markup]

iframe:

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

- :

iframe div. iframe, , , , .

: http://jsfiddle.net/sNSMw/

+3

Trick - iframe. .

<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>

spamtech.co.uk : http://spamtech.co.uk/tips/position-content-inside-an-iframe/

+2
source 
<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>
+1
source

More articles:


All Articles