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

This site is best viewed in a modern browser with JavaScript enabled.

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

lkeeney

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

rtrethewey

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.

lkeeney

rtrethewey;1255039 wrote:
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

lkeeney

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.

jedaisoul

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>

lkeeney

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/landscapes/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.

lkeeney

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>

lkeeney

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

lkeeney

I solved my problem.

Thanks for your help.

jedaisoul

lkeeney;1255247 wrote:
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

lkeeney

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