iframe to Only Show a Certain Part of the Page

Question

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

User · Answer

I got this work good for me    lt div style  border  3px solid rgb 201  0  1   overflow  hidden  margin  15px auto  max-width  736px   gt   lt 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   gt   lt  iframe gt   lt  div gt    Is this working for you or not let us know   Source  http   www dimpost com 2012 12 iframe-how-to-display-specific-part-of html

User · Answer

Somehow I fiddled around and some how I got it to work    lt iframe src  http   www example com inside  width  100   height  100   align  center   gt  lt  iframe gt    I think this is the first time this code has been posted so share it

User · Answer

An  lt iframe gt  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  lt div gt  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

User · Answer

I needed an iframe that would embed a portion of an external page with a vertical scroll bar  cropping out the navigation menus on the top and left of the page   I was able to do it with some simple HTML and CSS     HTML   lt div id  container  gt       lt iframe id  embed  src  http   www example com  gt  lt  iframe gt   lt  div gt    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

User · Answer

lt div style  position  absolute  overflow  hidden  left  0px  top  0px  border  solid 2px  555  width 594px  height 332px   gt   lt div style  overflow  hidden  margin-top  -100px  margin-left  -25px   gt   lt  div gt   lt iframe src  http   example com   scrolling  no  style  height  490px  border  0px none  width  619px  margin-top  -60px  margin-left  -24px    gt   lt  iframe gt   lt  div gt   lt  div gt

User · Answer

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  Refer to this question   Scrolling an iframe with javascript   I believe you ll only be able to scroll it if both pages are on the same domain

User · Answer

lt div style  border  2px solid  D5CC5A  overflow  hidden  margin  15px auto  max-width  575px   gt

User · Answer

Assuming you are using an iframe to import content available to the public but not owned by you into your website  you can always use the page anchor to direct you iframe to load where you want it to   First you create an iframe with the width and height needed to display the data    lt iframe src  http   www mygreatsite com page2 html  width  200px  height  100px  gt  lt  iframe gt    Second install addon such as Show Anchors 2 for Firefox and use it to display all the page anchors on the page you would like display in your iframe  Find the anchor point you want your frame to use and copy the anchor 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 the copied web address with anchor point as your iframe source  When the frame loads  it will show the page starting at the anchor point you specified    lt iframe src  http   www mygreatsite com page2 html anchorname 1  width  200px  height  100px  gt  lt  iframe gt    That is the condensed instruction list  Hope it helps

[jquery] iframe to Only Show a Certain Part of the Page

Examples related to jquery

Examples related to html

Examples related to css