Scroll an IFRAME Content to a Predefined Position

css, micro tutorial, web development, , , ,

IFRAME Source

Usually when you use an IFRAME tag to link an external source the page that’s referenced by the SRC attributes is loaded at the top left corner. This is the default behavior, but sometimes you’d like to show to your users not the entire page from the top left corner, but to show only part of the external page instead.

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>


Example with the awesome Yahoo! Homepage:

Related posts:

  1. Scroll the page with JavaScript
  2. CSS default position value
  3. remove iframe border on IE
  4. jQuery CSS functions. Part 1 – offset()
  5. cssText and how it can be very very useful

28 thoughts on “Scroll an IFRAME Content to a Predefined Position”

  1. Wow, that works perfectly and quickly! Thank you so much!

    I want to have about 8 frames on a page for personal use, just to check various weather sites, tv guides, etc. And use that page an my home page.
    Other than adding multiple CSS entries, is there a way to define the site and location in the wordpress post creation page?

  3. Hey there,

    Just a question, how do you combine both codings? I dont know alot about this..
    Is it this way?

    Also, how do you know what pixels you have to pick? (E.g. I want a part of a site, how do I see what the pixels is where it starts??

  5. Hello!!
    This the best explanation, I ever seen on the subject. Simple, crystal clear and right to the spot.
    I am a web analyst (not a full time web designer) and I’ve been searching the web for several hours before finding your page. There are people out there that recommends using JavaScript or Flash to do this (unbelievable).

    By the way, your website is a gem.

    Cheers and many thanks
    Luca

  9. Hi,

    i have problem to display my page in the iframe, can you look at my code

    i used your both css for my frame containing div tag and frame.
    but it does not work well, my page right part is hiding.

    can you help my any more?

     <div style="width: 100%; overflow: hidden;">
    <div class="divColumnLeft" style="width: 12%; float: left; height: 100%;">
      <asp:Menu ID="tabsMenu" runat="server" Orientation="Vertical" StaticEnableDefaultPopOutImage="False"
        CssClass="vTabMenu" DynamicSelectedStyle-CssClass="vTabActiveStyle" OnMenuItemClick="Menu1_MenuItemClick"
        StaticMenuItemStyle-CssClass="vTabInActiveStyle">
        <Items>
          <asp:MenuItem Text="List" Value="0" />
          <asp:MenuItem Text=" Detail" Value="1" Selected="true" />
        </Items>
      </asp:Menu>
    </div>
    <div id="my-div" style="width: 88%; float: right; min-height: 510px;">
      <iframe id="iFrame" runat="server" clientidmode="Static" width="100%;"
        height="510" src="ABC.aspx"></iframe>
    </div>
  </div>

    i have removed my style and try your css, but it does not work with divs.
    can you help me?

    Thanks

  10. I used this and it worked great! The only thing I can think of that would be better would be to allow scrolling to the point where certain text is found. The web page I am going to is located on the net and not in my domain so other javascript scrolling functions I have tried to use will not work. I get an error something about being unauthorized. The web page is really a text documnet and it is updated daily. The concern I have with this cool little tool is that if they make a format change to the document, I have to start over finding the correct pixel coordinates. But for now, I will use this and I thank you for putting this out there!!!

  11. Sorry, but I can’t see your example within this page.
    I tried with Chrome, Firefox and Safari but… nada!

  14. Been looking for a solution to this, and yours is by far the simplest and most elegant. Thank you.

  15. elegant solution, clearly explained. Several other sites said this was impossible to do cross-domain. it even works in ie7. Nice work

  20. Works like a charm – thank you! We will be using this shortly on our site once we have finished testing in several browsers. Elegant and simple!

  22. Nossa meus parabéns vendo agora era tão obvio o código, como nunca pensei em usar um position, obrigado 😀

  23. I really could cry from hapiness! After spending hours of trying to load cross domain content, i found this article and just display the part of the page i want. Many many thanks!

  26. You really shouldn’t use yahoo.com as example, as this page doesn’t show. The iFrame in your example is blank because yahoo has x-frame-options set to deny.

  28. Extremely useful. Solved a problem I have been banging my head over for weeks, which is getting a pdf served through iframes and cookies with no direct way to scrape the pdf. Instead, I have to load a frameset page with three frames, but I don’ want to show the top frame or the left frame, only the pdf frame. This should please the client!

Leave a Reply

Your email address will not be published. Required fields are marked *