Question

I am working on iframes, and I need to show a certain portion of the page [say, the top right ] in an iframe with about 300px width and 150px height.

Example:

Say I wanted to put an iframe of www.example.com/portfolio.php on a page, but have the iframe sized to only show the "portfolio-sports" section at the top right.

How can I achieve this?

DEMO

[Thanks to Pointy]

Answer 1

An <iframe> gives you a complete window to work with. The most direct way to do what you want is to have your server give you a complete page that only contains the fragment you want to show.

As an alternative, you could just use a simple <div> and use the jQuery "load" function to load the whole page and pluck out just the section you want:

$('#target-div').load('http://www.example.com/portfolio.php #portfolio-sports');

There may be other things you need to do, and a significant difference is that the content will become part of the main page instead of being segregated into a separate window.