Show part of webpage in iframe

**Lumbago** · 06-01-2006, 02:27 AM

Hi people,

I need to display parts of another website on my own website in an iframe. There is a particular secion of this site that I'm interested in that's i.e. 100px wide and 400px high and is always placed 350px from the top and 100px from the left. Is it possible for me to have an iframe of 100x400 that displays this exact position on the underlaying website?

Thanx in advance

**coothead** · 06-01-2006, 05:58 AM

Hi there Lumbago,

this will work in Firefox 1.5 and IE 6 but not, unfortunately, in Opera 8.5.

Code:

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
#container{
    width:100px;
    height:400px;
    border:1px solid #000; 
    overflow:hidden;
    margin:auto;
}
#container iframe {
    width:200px;
    height:750px;
    margin-left:-100px;
    margin-top:-350px;   
    border:0 solid;
 }
-->
</style>

</head>
<body>


<div id="container">
<iframe src="http://www.w3schools.com/css/default.asp" scrolling="no"></iframe>
</div>


</body>
</html>

coothead

**KDLA** · 06-01-2006, 07:09 AM

Be careful showing another website in an iframe -- hiding the (website's) identifying information is copyright infringement.

**LeeU** · 06-01-2006, 09:21 AM

Originally Posted by KDLA

Be careful showing another website in an iframe -- hiding the (website's) identifying information is copyright infringement.

Yes, that's why you see the "turn off this frame" in many other sites that do it. If there is no option, it could cause you problems.

Also, the Web site may have some JavaScript at the top to prevent this from happening. I do it in all my sites.

**Lumbago** · 06-02-2006, 07:48 AM

Thanx alot fellas...I'm actually gonna use it to display a service status column from a local webserver on our intranet so the copyright issues aren't a problem. The "source" website is on another network and I need a quick hack...

**BishopB** · 12-09-2008, 11:58 PM

Had kinda the same issue, your css container code fixed that. Thx guys

**BsA1226** · 09-26-2012, 12:18 AM

Originally Posted by coothead

Hi there Lumbago,

this will work in Firefox 1.5 and IE 6 but not, unfortunately, in Opera 8.5.

Code:

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
#container{
    width:100px;
    height:400px;
    border:1px solid #000; 
    overflow:hidden;
    margin:auto;
}
#container iframe {
    width:200px;
    height:750px;
    margin-left:-100px;
    margin-top:-350px;   
    border:0 solid;
 }
-->
</style>

</head>
<body>


<div id="container">
<iframe src="http://www.w3schools.com/css/default.asp" scrolling="no"></iframe>
</div>


</body>
</html>

coothead

very Nice But Please tell me any way by which i can apply IFRAME to show a specific part of web page and also alongwith this i can stop media streaming on source web page.
Thanks!

**shuvogm** · 12-23-2012, 12:38 AM

Hi there
I found a way to iframing a specific area of a webpage here [display a specific part of a website using iframe]

There is the code...

HTML Code:

<div style="position: absolute; 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://www.centricle.com/tools/html-entities/" scrolling="no" style="height: 490px; border: 0px none; width: 619px; margin-top: -60px; margin-left: -24px; ">
</iframe>
</div>
</div>

**alexemil5** · 01-03-2013, 12:52 AM

copyright infringement. Css problem.. Couldn't find..

**alexemil5** · 02-22-2013, 05:29 AM

Originally Posted by alexemil5

copyright infringement. Css problem.. Couldn't find..

MCTS:.NET Framework 3.5, Windows Presentation Foundation Applications Certifications // Testking MCTS:.NET Framework 4,Service Communication Applications Microsoft tutorials

**Mastre** · 03-29-2013, 01:33 PM

Thanks guys, I managed to get my search box from my main site to appear in an iframe on some other micro sites. I just can't get the search box results displayed in New Window.
I embedded;
#container{
width:100px;
height:400px;
border:1px solid #000;
overflow:hidden;
margin:auto;
}
#container iframe {
width:200px;
height:750px;
margin-left:-100px;
margin-top:-350px;
border:0 solid;

I embedded above in my site CSS and the following adopted for the iframe which worked seamlessly.

<div id="container">
<iframe src="http://www.w3schools.com/css/default.asp" scrolling="no"></iframe>
</div>

How do I make the results appear in NEW WINDOW. I shall appreciate if you could help.

Cheers

**jedaisoul** · 04-01-2013, 02:21 PM

The easy and reliable way to show part of a web page in an Iframe is to use position:absolute and overlay the parts of the iframe you do not want to display (copyright allowing) with divs with a higher z-index.

Thread: Show part of webpage in iframe

Thread Tools

Display

Show part of webpage in iframe

Very Nice , A Humble Request For You!!

IFRAME - search box results into new window

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions