Iframe to show only a specific part of the page

Question

I am working on an iframe, and I need to show a specific part of the page [for example, top right] in an iframe with a width of about 300 pixels and a height of 150 pixels.

Example:

Let's say I would like to place an iframe www.mywebsite.com/portfolio.php on the page, but the iframe size should only be displayed to show portfolio sports in the upper right .

How can i achieve this?

Thank.

EDIT : DEMO

[Thanks Pointy]

Answer 1

An <iframe> gives you a full window to work with. The most direct way to do what you want is to provide the server with a full page containing only the fragment that you want to show.

Alternatively, you can simply use a simple <div> and use the "jQuery" download function to load the entire page and cut out only the section you need:

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

You may need other things, and the significant difference is that the content will become part of the main page and not be split into a separate window.

Answer 2

I got this job good for me.

 <div style="border: 3px solid rgb(201, 0, 1); overflow: hidden; margin: 15px auto; max-width: 736px;"> <iframe scrolling="no" src="http://www.w3schools.com/css/default.asp" style="border: 0px none; margin-left: -185px; height: 859px; margin-top: -533px; width: 926px;"> </iframe> </div> 

This works for you or will not tell us.

Source: http://www.dimpost.com/2012/12/iframe-how-to-display-specific-part-of.html

Answer 3

I need an iframe that inserts part of an external page with a vertical scrollbar, cutting out the navigation menu at the top and left of the page. I was able to do this with simple HTML and CSS.

HTML

 <div id="container"> <iframe id="embed" src="http://www.example.com"></iframe> </div> 

CSS

 div#container { width:840px; height:317px; overflow:scroll; /* if you don't want a scrollbar, set to hidden */ overflow-x:hidden; /* hides horizontal scrollbar on newer browsers */ /* resize and min-height are optional, allows user to resize viewable area */ -webkit-resize:vertical; -moz-resize:vertical; resize:vertical; min-height:317px; } iframe#embed { width:1000px; /* set this to approximate width of entire page you're embedding */ height:2000px; /* determines where the bottom of the page cuts off */ margin-left:-183px; /* clipping left side of page */ margin-top:-244px; /* clipping top of page */ overflow:hidden; /* resize seems to inherit in at least Firefox */ -webkit-resize:none; -moz-resize:none; resize:none; } 

Answer 4

 <div style="position: absolute; overflow: hidden; left: 0px; top: 0px; border: solid 2px #555; width:594px; height:332px;"> <div style="overflow: hidden; margin-top: -100px; margin-left: -25px;"> </div> <iframe src="http://example.com/" scrolling="no" style="height: 490px; border: 0px none; width: 619px; margin-top: -60px; margin-left: -24px; "> </iframe> </div> </div> 

Answer 5

Somehow I was messing around and some, as I got it to work:

 <iframe src="http://www.example.com#inside" width="100%" height="100%" align="center" ></iframe> 

I think this is the first time this code has been published, so share it

Answer 6

Set the iframe to the appropriate width and height, and set the scroll attribute to no.

If the area you want is not in the upper left of the page, you can scroll the contents to the corresponding area. Refer to this question:

Scrolling iframe with javascript?

I believe that you can scroll it only if both pages are in the same domain.

Answer 7

Assuming you are using an iframe to import content that is publicly available but not owned by you on your website, you can always use page binding to direct you to the iframe to load where you want.

First you create an iframe with the width and height needed to display the data.

 <iframe src="http://www.mygreatsite.com/page2.html" width="200px" height="100px"></iframe> 

Insert an add-on such as Show Anchors 2 for Firefox, and use it to display all linked pages on the page that you would like to display in your iframe. Locate the snap point you want to use and copy the snap location by right-clicking on it.

(You can download and install the plugin here => https://addons.mozilla.org/en-us/firefox/addon/show-anchors-2/ )

Third use of the copied anchor web address as the iframe source. When wireframe loads, it will display a page starting with the anchor point you specified.

 <iframe src="http://www.mygreatsite.com/page2.html#anchorname_1" width="200px" height="100px"></iframe> 

This is an abbreviated list of instructions. Hope this helps!

Answer 8

 <div style="border: 2px solid #D5CC5A; overflow: hidden; margin: 15px auto; max-width: 575px;">