Question

I’m looking to put only a small part of a website into an iframe. How would I do this? Usually when I set up a iframe for a website (lets say yahoo) it gets the whole website… Lets say I only wanted a small portion of the website, how would I do this?

Is it possible to put margins on an iframe of a website?

I’m looking to put an iframe of a website on my website. (if that makes sense)

Thanks in advance 😀

Answer 1

In most of the cases the reference is external and you don’t have control over the external page. Thus you’ve to scroll the IFRAME content to the desired position. This of course is impossible. Yeah, there are some JavaScript hacks, but they’re all a bad solution, because the scrolling occurs only after the page is loaded.
The Solution

You can wrap the IFRAME into a div and scroll the DIV content using absolute TOP and LEFT CSS properties.

Here’s an example:

#my-div
{
    width    : 400px;
    height   : 200px;
    overflow : hidden;
    position : relative;
}

#my-iframe
{
    position : absolute;
    top      : -100px;
    left     : -100px;
    width    : 1280px;
    height   : 1200px;
}

Here you have one DIV with dimensions 400x200px. Now by moving the IFRAME within it you can position it on the right place.

<div id="my-div">
<iframe src="http://www.example.com" id="my-iframe" scrolling="no"></iframe>
</div>