www.webdeveloper.com
Results 1 to 12 of 12

Thread: Show part of webpage in iframe

  1. #1
    Join Date
    Aug 2003
    Location
    London, UK
    Posts
    14

    Show part of webpage in iframe

    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
    Lumbago
    "Real programmers don't document, if it was hard to write it should be hard to understand"

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,458
    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

  3. #3
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    Be careful showing another website in an iframe -- hiding the (website's) identifying information is copyright infringement.
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

  4. #4
    Join Date
    May 2004
    Location
    FL
    Posts
    3,447
    Quote 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.
    Lee

    ""Men occasionally stumble over the truth, but most of them pick themselves up and hurry off as if nothing ever happened."" -- Sir Winston Churchill

  5. #5
    Join Date
    Aug 2003
    Location
    London, UK
    Posts
    14
    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...
    Lumbago
    "Real programmers don't document, if it was hard to write it should be hard to understand"

  6. #6
    Join Date
    Dec 2008
    Posts
    1
    Had kinda the same issue, your css container code fixed that. Thx guys

  7. #7
    Join Date
    Sep 2012
    Posts
    1

    Smile Very Nice , A Humble Request For You!!

    Quote Originally Posted by coothead View Post
    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!

  8. #8
    Join Date
    Dec 2012
    Posts
    1

    Thumbs up

    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>

  9. #9
    Join Date
    Jan 2013
    Posts
    3
    copyright infringement. Css problem.. Couldn't find..

  10. #10
    Join Date
    Jan 2013
    Posts
    3
    Last edited by alexemil5; 02-22-2013 at 05:38 AM.

  11. #11
    Join Date
    Mar 2013
    Posts
    1

    IFRAME - search box results into new window

    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

  12. #12
    Join Date
    Mar 2012
    Posts
    1,201
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles