Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iframe to Only Show a Certain Part of the Page

Tags:

html

jquery

css

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.mywebsite.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 ?

Thanks.

EDIT : DEMO

[ Thanks to Pointy ]

like image 455
MANnDAaR Avatar asked Jul 17 '10 15:07

MANnDAaR


People also ask

Can you iframe a specific part of page?

Set the iframe to the appropriate width and height and set the scrolling attribute to "no". If the area you want is not in the top-left portion of the page, you can scroll the content to the appropriate area.

Can I crop an iframe?

No. The Same Origin Policy prevents you from manipulating the iframe in any way, including the scroll position. this way, you can adjust the portion of the iframe that is visible on the page. However, the whole page still gets rendered, and this approach is not immune to influences like scrolling inside the iframe.

Is it possible to use iframe in div segment?

In order to make your embedded iframe responsive, you need to wrap the iframe in a div and apply inline css. Follow these simple steps: Get the iframe embed code and paste in into your HTML page. Set the height and the width attributes of the iframe tag to 100%

Why you shouldn't use IFrames?

Iframes Bring Security Risks. If you create an iframe, your site becomes vulnerable to cross-site attacks. You may get a submittable malicious web form, phishing your users' personal data. A malicious user can run a plug-in.


1 Answers

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.mywebsite.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.

like image 125
Pointy Avatar answered Sep 18 '22 21:09

Pointy