Get iframe content and synchronise picture

Hello

I wonder if I can pick your brains for some advice as I have searched the web intensively and can't seem to find a solution.

I am looking a developing a web based application but for a CD or DVD so don't have access to a database or dynamic languages. Neither do I want to use tables on the main page.

On the main page, I have three boxes (divs), box1 holds a picture, the next a list of components and the last a description.

I would like to from a list of hyper links on the same page be able to dynamically change and synchronise their contents when the link is clicked. So if I have say the text "picture frame" as the link, box1 will display a picture of a it , the next box a list of components and the third instructions on how to assemble it .

I was looking at iframes for the box 2 and box 3 as the height is only 200px so that it accommodates the content if longer than the box.

For the content I was thinking of an html page with a 3 column table with in each row, the picture in the first cell, the component list in the next and the description in the last.

The question is can I retrieve the each row's content and place it into the boxes? Can I change the content according to the link being clicked and bring up the respective row's content?

The reason for a separate image box is so that I can use a lightbox implementation or magnifying effect, the iframes inside the divs is so that I can get rounded boxes or different backgrounds.

Any help will be very much appreciated as it looks like I might also need some scripting which is not my strong point.

Thank you in advance.

Plenty of help here. (http://www.exitfegs.co.uk/Sources.html)

Use the search facility.

Frank

Thank you Frank

There's certainly a lot of info there which is why it's taken a while to respond.

Still can't work out how to fetch data from a table and insert it into an iframe, perhaps one of your JavaScript gurus can point me in the right direction,

Cheers

I div will extend in height to accomodate the content, providing you don't give it a height. The program that I gave you "Sources" - has three columns which expand automatically as I add more sites to the list.

I found this on Google. (http://www.dyn-web.com/tutorials/iframes/refs.php)

If you make a start and show us some code, you will proably get some more help. People do like to see a framework.

Frank

Thanks again, Frank

My JS skills are very elementary but this is what I've got so far. The basic idea is to have an external html page that contains the data that I want fetched and imported into an iframe/div on the main page.

I'd like to avoid having to compose multiple source files to fill the iframe.

So I thought that the easiest solution would be to have a table sitting in an external html page that contains all the data. Something like this (frame.html):

<table width="614" border="0" cellspacing="4" cellpadding="4">
<caption align="left">
Picture Frames
</caption>
<tr>
<th width="234" scope="col">Picture Frame Image</th>
<th width="139" scope="col">Components</th>
<th width="193" scope="col">Assembly</th>
</tr>
<tr id="picframe1">
<td align="center" valign="top">
<img src="picframe.jpg" width="192" height="172" alt="chair1" />
</td>
<td valign="top">Frame moulding<br />
Mitre box <br/>Handsaw<br />etc... </td>
<td valign="top">
Step 1<br />
Determine the desired picture frame dimensions. Remember to use the mat, not the picture, as a guide to determine the finished dimensions.<br />
Step 2<br />
Choose picture frame moulding, builder's moulding or lumber for your frame. Picture frame moulding can be obtained at framing stores, art stores and larger craft shops. Builder's moulding and lumber can be found at your local home improvement store.<br />
Step 3<br />
Measure the width of your chosen framing material and multiply this number by 8. Add to this measurement the length of each side of your desired frame. Divide the total inches by 12 (most wood material is sold by the foot). Purchase this amount of framing material plus a few inches extra in case of a cutting error.<br />
etc...</td>
</tr>
<tr id="picframe2">
<td>image for picframe2</td>
<td>components for picframe2</td>
<td>assembly instructions for picframe2</td>
</tr>
<tr id="picframe3">
<td>image for picframe3</td>
<td>components for picframe3</td>
<td>assembly instructions for picframe3</td>
</tr>
</table>

Main Page:
<div>
<iframe id="ifrm1" src="frame.html" width="500" height="200"></iframe>
</div>

No problems there - but it loads the whole table into the iframe.

What I would like to be able to do is on the the main page when links are clicked:

Picture Frame 1 (link) - only loads content of row 1 (id picframe1) into iframe
Picture Frame 2 (link) - only loads content of row 2 (id picframe2) into iframe
Picture Fame 3 (link) - only loads content of row 3 (id picframe3 into iframe

Also to have the caption and header row contents permanently displayed in the iframe and only for the picture frame row contents to change when the respective link is clicked.

It would something like this:

Picture Frames (caption)
Image| Components| Assembly (header row)
Image picframe1| Components picframe1| Assembly picframe1 (contents row1)

Once I get that sorted out I am hopeful that I will be able to then extend the technique to fetch the individual cell contents from each row and import each cell's content into individual adjacent iframes / divs.

Else cell1 which contains the picture goes into a div and cells2 and 3 into an iframe. The idea being to separate the image into its own container so as to be able to implement a lightbox feature for the image div.

Hopefully that makes sense.

piment

PS - The Source page reference that you gave me - I can't get the search to work - I typed iframes into the box and hit the enter key but nothing happened.