www.webdeveloper.com
Results 1 to 11 of 11

Thread: How do you get iFrames to scroll with the content of a web page?

  1. #1
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    175

    How do you get iFrames to scroll with the content of a web page?

    I made a test page for loading images and placing them on a web page using iFrames. Unfortunately, when I transferred the code to a real web page, the iFrame does not scroll with the page as the page is scrolled.

    Here is the page I am working on:
    http://www.lawrence-nv.us/Taylor/landscapes

    To see the image just click on either the word "One" or "Two" on the left side of the page.

    How do I get the iFrame to scroll with the page?

    Or, is there a better way of viewing different images on a web page when clicking on a link?

    Lawrence
    Larry

  2. #2
    Join Date
    Mar 2011
    Posts
    1,136
    First of all, you don't want to use position:fixed for the <div> that contains your <iframe>. You probably don't need any positioning at all, but if you do need it, use position:absolute. That will fix your scrolling problem.

    Second, the pages being loaded into your <iframe> consist entirely of a single image. It would be simpler and faster to replace the <iframe> with an <img> tag and have your JavaScript change the img.src to select new images when the user clicks on the links.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    175
    Quote Originally Posted by rtrethewey View Post
    First of all, you don't want to use position:fixed for the <div> that contains your <iframe>. You probably don't need any positioning at all, but if you do need it, use position:absolute. That will fix your scrolling problem.

    Second, the pages being loaded into your <iframe> consist entirely of a single image. It would be simpler and faster to replace the <iframe> with an <img> tag and have your JavaScript change the img.src to select new images when the user clicks on the links.
    Thanks Rick,

    My knowledge of JavaScript is pretty limited. However, I will give this a try.

    I am designing this website to help a starving artist friend.

    Lawrence
    Larry

  4. #4
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    175
    I have been working so close to this project that I did not explain my problem correctly.

    The reason I need to use an iFrame is because I don't want to just load an image, but a small web page that contains an image, text explaining the image, and a PayPal "Buy Now" button so viewers can order individual paintings.

    What I want to do is to be able to open an iFrame inside of a div which I can control its location on the page, and have it scroll with the rest of the content on the page.

    What I need is to know and understand the javascript code which will allow loading of the iFrame (inside a div) when a thumbnail image is clicked. I have spent the whole day searching the internet for information to help me do this, but I can't find anything.

    I would appreciate any help I can get that will get me started in the right direction on this project.
    Larry

  5. #5
    Join Date
    Mar 2012
    Posts
    1,278
    You do not need to use JavaScript.
    - As mentioned above, do not use position: fixed.
    - Give the iframe an id, and use standard anchors with the target set to the id of the iframe.
    This will allow the iframe to scroll with the page, and load dub-pages dynamically into the iframe.

    <div>
    <iframe id="pic1">
    IFrames are not supported by your browser
    </iframe>
    </div>
    <div>
    <a href="mysubpage.html" target="pic1">click here</a>
    </div>

  6. #6
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    175
    Thanks for the help. I would love if I could get something as simple as this to work.

    Unfortunately I can't even understand how this works. I put the following code into my web page:
    <div>
    <iframe id="1.html">
    IFrames are not supported by your browser
    </iframe>
    </div>
    <div id="test">
    <a href="1.html" target="pic1.jpg">click here</a>
    </div>
    When I run this and click on the "Click here" it opens the 1.html as a new page and I can't see my original page.

    Here is the code I used for the test div:
    #test{
    position: absolute;
    top: 500px;
    width: 375px;
    height: 500px;
    }
    If you want to see the page in action, you can see it here:
    http://www.lawrence-nv.us/Taylor/lan...s/index1.shtml

    I had hoped the image would be inside this as this is the size of the 1.html page.

    Can you tell me what I am doing wrong, and send me to a link that will explain your code?

    Edit: I just noticed that it is opening up a new page when I click on the "click here" link instead of loading it on top of my original page.
    Last edited by lkeeney; 03-13-2013 at 01:51 PM.
    Larry

  7. #7
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    175
    Thanks again for your help. I found an on-line video tutorial that helped me understand the code. This is the code I am using and it works great.

    <iframe id="1.html" width="500" height="500" name="test1" id="test1" scrolling="no">
    IFrames are not supported by your browser
    </iframe>
    </div>

    <br />
    <a href="1.html" target="test1">Photo 1</a>

    <br />
    <a href="2.html" target="test1">Photo 2</a>
    Larry

  8. #8
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    175
    More problems. I was so excited to see my iFrmes allowing me to change images, I neglected to look at the bottom of the page.

    What has happened is my iFrame had pushed the rest of my page down instead of placing the new content on top of the existing page. The thing I find confusing is it pushed the background image of the page down. The background is the background for my content DIV which is the same DIV that holds the iFrame code.

    Does anyone know how to solve this issue?

    http://www.lawrence-nv.us/Taylor/landscapes/index.shtml
    Last edited by lkeeney; 03-13-2013 at 05:40 PM.
    Larry

  9. #9
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    175
    I solved my problem.

    Thanks for your help.
    Larry

  10. #10
    Join Date
    Mar 2012
    Posts
    1,278
    Quote Originally Posted by lkeeney View Post
    Thanks again for your help. I found an on-line video tutorial that helped me understand the code. This is the code I am using and it works great.
    MY code was not intended to be used "as is", it just showed the principle. Anyway, you've got it working, but you've still got errors:

    You have got two IDs declared for the Iframe "!.html" and "Test1" and a name. What you should have is either a name or an ID, and a SRC. The src attribute defines the default content of the iframe when the page loads. This also acts to reserve the space for the iframe, That should solve your problem

  11. #11
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    175
    Thanks.

    I have made many changes, and have the page working as I want now. I have a little clean up to do yet on the layout, but I just submitted this page to the artist for her comments before I continue.

    http://www.lawrence-nv.us/Taylor/landscapes/index.shtml
    Larry

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