How to Display Only a Certain Div Within an Iframe

Can an iframe only show a certain part of the page?

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.

Is it possible to display only a certain div within an iframe?

This is the CSS and html code to accomplish the task:

<style>
#outerdiv
{
   width:446px;
   height:246px;
   overflow:hidden;
   position:relative;
}

#inneriframe
{
   position:absolute;
   top:-412px;
   left:-318px;
   width:1280px;
   height:1200px;
}
</style>
<div id="outerdiv">
    <iframe src="2.html" id="inneriframe" scrolling="no"></iframe>
</div>

Try this out: http://jsfiddle.net/57MRn/

How does this work
The iframe is moved up within the outerdiv until only the within div is shown.

Show only certain divs in an iframe

If you have control of the IFRAME's contents, then add a parameter to your frame's url tag, such as

/myiframesite?hidedivs=true

Then, in the web page within the iframe, read the url parameter, and make the page behave as you direct.

If you don't have control, good luck.

How to do the above

You can easily find how to read url parameters by googling just that. A quick search found this page.

From reading that post, you can copy out this example code:

function getQueryParam( name ){
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");  
  var regexS = "[\\?&]"+name+"=([^&#]*)";  
  var regex = new RegExp( regexS );  
  var results = regex.exec( window.location.href ); 
   if( results == null )    return "";  
  else    return results[1];
}

Then you could use it like:

var doHideDivs = getQueryParam('hidedivs');

Then, if doHideDivs is true, hide your divs.

If you are stumped on hiding your divs, then you should do a basic Javascript tutorial before getting so ambitious on such an exact task as this.

How do you put only a certain section of a website into an iframe?

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>

iframe showing only a particular part

It seems like you just need to tweak your inline CSS a bit. For example:

<div style="border: 1px solid rgb(201, 0, 1); overflow: hidden; margin: 15px auto; width: 675px;"> 
<iframe scrolling="no" src="http://teamiwatefsu.blogspot.com/2014/09/jsfiddle-demo-div-display-inline-block.html" style="border: 0px none; margin-left: 13px; height: 954px; margin-top: -422px; width: 660px;"> 
</iframe> 
</div>

This appears to match the picture you provided.

I changed the margin-left, margin-top, and width of the iframe. I also changed the div's max-width to a simple width with a different value.

I figured the values for all these using Firebug. I highly recommend familiarizing yourself with browser developer tools such as that (all modern browsers include some kind of "developer tools" these days) that let you play with these things "live" until you find the tweaked CSS you like.

JSFiddle: http://jsfiddle.net/cnmteg76/2/