I was wandering though just taking it a bit further, how you could extract data from an individual cell in a table row and insert it into an iframe.

In fact I have in my source html, a table with three columns in one row which I would like to insert the individual cells of the row into three corresponding adjacent iframes,

Even better would be to be able to be to have a few rows in the table source and be able to pick a row and its cells and contents (and insert them into the iframes) but according to links on the main page.

For instance if I had a links called chair and seat and in the table two rows - clicking on chair would insert the cells' content of the first row into the iframes, and clicking on seat would instead insert the next row's contents into the iframes and so on.

I tried a few things on my test server, but I don't know how well (if at all) it would work in a production setting. Anyway, I set up a directory named "iframes" which stored three htm files - iframe1.htm, iframe2.htm, and iframe3.htm.

Thank you ever so much for your prompt and informative reply - wish I had your skills.

I may have given you the wrong scenario and made it complicated - perhaps a quick explanation might help - the plan is to use this on a CD application and so have no access to a database or dynamic language. I'd like to avoid having to compose multiple source files to fill the iframes.

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):

I *think* I have an idea of what you're wanting to do. What I did was modify the frame.html bit and hide the iframe itself since its contents, I don't think, are needed. If they are, we can try something else.

The look isn't the best thing in the world, but hopefully, the functionality is what you need. Also, since this would rely on javascript in order to work, you would probably want to add a <noscript> message for users in case any have it scripting disabled.

You're a marvel. Excellent. It doesn't look too bad and it comes pretty close to what I had in mind and visualised. Thank you.

Well, almost.

Please bear with me as I have a couple of questions and some factors in my design which affects the approach that you have taken.

DesignThe area that I have available to show the contents of the contents of the iframe is quite large width wise but restricted length wise (900x300 px). Which is why I wanted to use an iframe in the first place.

The table fits in there no problem but the contents of the components / assembly cells can vary and and be quite lengthy which might stretch the table's length beyond 300px even if I adjust the text size, at present set at 12px which readable and would not want to make any smaller.

Can the contents be written instead to divs or iframes?

Reasons why1. The styling for the table comes from frame.html but in your solution I would need to also style the table on the main page as well whereas if it was in an iframe it comes over already styled.

2. Could I instead of a table on the main page substitute three adjacent boxes (divs) thus giving me greater control on their styling, dimensions and positioning and use the ids that you've used for the divs (for example <div id="img"> <div id="com"> <div id="asm">) to bring the contents over?

Does the same apply for iframes? Can you write from an iframe to another iframe?If I have an iframe with id"com" sitting in the second box will it show the show the content of cell2 i.e.:<div><iframe id="com" src="iframes/frame.html"></iframe></div>

3. If using divs I could then add a scroll to the boxes if needs be to account for the variable lengths of the cells and also use an h1 header for the th headers and style it accordingly. If using iframes then it already caters for scrolling.

4. The rationale behind having the image resting in its own div container is so that I can then style it independently but also add a lightbox / magnifying or similar effect.

5. Will the links still work if divs / iframes are used instead of the table?

This for my own enlightenment and educationThis probably an elementary thing for you and I hope you don't mind my asking but the types if that's what they are called, "img","com", "asm", "chdr" that you've used used in document.getElementById("img").innerHTML statements do they have a special meaning?

If they are where would I go to find a list and explanation of their meanings and functionality.

I realise that I am probably causing you huge headaches and probable frustrations with my incessant inquiries but can I once again thank you for your patience and the unselfish, free sharing of your knowledge and skills. I am learning heaps just from studying you code.

Nah; I'm just a guy who tries to repay all those who helped me by helping others. :)

I'll try and answer your questions the best I can starting with design, but pure html has never really appealed to me; I've always liked the scripting side of things. My presentation pages are basic at best. :P

Using divs in place of iframes would be fine as far as I'm aware. It would probably be fine to use divs in place of tables as well; however, I *think* it may prove impractical to include style properties in frame.html. Because of the way innerHTML works, it's possible to lose formatting altogether on the tags. innerHTML will retrieve the contents between the opening and closing target tag, but not the actual tag.

With what I've done, something like <td width="200" align="center">chair heading</td> would have no effect on formatting. However, by using something like <td><p>chair heading</p>&lt/td> you could use a selector to style p anyway you want or even create a pseudo-class

For example, using main page style tag or perhaps <link rel="stylesheet" type="text/css" href="style/main.css"> if you have a style sheet.

As far as the questions go, I'm not sure if you can read/write to embedded iframes as I've never tried it. As long as the source isn't offsite or in a sub domain, I *guess* it's possible. My understanding is trying to manipulate an iframe that is not on the same domain will produce an "access denied" sort of error. If you meant having three iframes to represent each part within frame.html, then you should be ok doing that.

You can make a scrolling DIV by setting its height and overflow properties. For example, <div style="height: 100px; overflow: auto"></div>

I've never really dabbled with lightbox or such effects, so you're on your own there. :)

If you mean links from frame.html, then I haven't tested something like that, but I would suspect using a javascript href type link *would* work once it's loaded provided the function is defined in the main page. Try it using the try { ... } catch(err) { alert(err); } syntax.

"asm," "com,", "img,", and "chdr" are the identifiers for various elements. Their names could be anything you'd like them to be. I named them to indicate - assembly, components, chair image, and chair header.

I've just realised that I've not been using your proper name, sorry, I must go and get some new glasses.

Thank you ever so much for that.

After much trial and error I've got the divs working complete with formatting and styling. Good one.

Can I bother you just a little longer?

I am now attempting as you say to "having three iframes to represent each part within frame.html" and I am stuck. (There is no domain issue)

I have three iframes and named them id="ifrmimg", id="ifrmcom" and id="ifrmasm" .

Don't know if I am going in the right direction to do that but from my research I've discovered that one can access parent elements from within a child and vice versa or use document.body to access the invisible frame contents.

I am using the latter and have this code:

ifrmimg.document.body.innerHTML= ifrm.document.body.innerHTML;

that works but it transfers the whole content rather than each part.

Whichever method I use, I need to access each part of content that represents each cell value brought over from the table. Is this held in an array? Any ideas on how this can be achieved?

Or is it more effective to get the content directly from frame.html but the the same problem arises (at least for me and my limited knowledge) of how to capture each part and load it into the individual iframes. Have tried this without success:document.getElementById("ifrmimg").innerHTML = htm.getElementsByTagName("td")[0].innerHTML;

With my question about an external js using the first example, do I keep the body onload statements as is in the main document or can it be incorporated into the js file, just in case I have multiple onloads to cater for.

The function loadFrames accepts a style sheet as an argument; however, a style could just as easily be applied to three seperate vars if each iframe needed its own style, and remove the style_sheet as an argument.

With the onload event, I've only ever used a single function that calls any support functions that may also be needed.

I've tried your latest solution but somehow I don't think that you can style the contents of the iframes that way. At least It doesn't seems to work for me. I think that it's because you're loading blank.html into the three frames and and it doesn't contain any styling.

The styling I think has to come from the file that you load into the iframe as it is an exact replica of the page that you are fetching. I made ifrmimg visible by giving it a width of 820px and a height of 220px so that I can see what it looks like compared to the three other frames and linked blank.html, main.html and frame.html to the same external stylesheet (frames.css) but the styles are not being carried over to the 3 iframes.

Also for some reason the images are not coming through, it shows in ifrmimg but not in the three frames even though the link is correct.

I have a zip file that I can send you to show you what I mean - changed the contents of frame.html to better reflect a real world situation - it's easier if you see it in action than my trying to describe it to you. If you send me a PM with an email address to send it to I 'd be happy to forward it to you.

Something like that. IE, as usual, doesn't like forming a string from an array it seems. Haven't found a fix for it yet, but the above appears to work in Firefox and Opera, which is all I've got to test with. :)

The images not showing up is *probably* a paths issue. With the iframes, paths would be relative to where the iframes.html files are located.

main.htmliframes/frame.htmliframes/blank.htmlimages/chair.jpg

If you've got <img src="images/chair.jpg"> in the iframe, then to the iframe, it would look in iframes/images/chair.jpg. Try <img src="../images/chair.jpg">

I've given the table in frame.html an id of asd. It loads the row contents into a table which is formatted by frame.css.

Don't know if you might be able to adapt it to fetch the individual cells in the row and to then insert them into the iframes instead of a table and then to have links like you did in your original code to update them according to the row chosen.piment

Well done, you must be extremely pleased to have solved it. I am. You're a marvel, hope that you didn't spend the whole weekend on it.

I did try to give it a go myself but I could not work out the proper syntax for using the append and clone methods and frankly got completely and terribly confused. I notice that you've used innerHTML instead.

You'll find that if you link the stylesheet to all the htmls then it works pretty well.

Talking of which - I am not letting you off the hook so easily despite your triumph - I've been experimenting a bit and added this code to cell2 of the first row in frame.html:

I didn't have much luck using clone, so I kept the innerHTML instead. Your topic is the first time I've seen clone, but it's a curious method to say the least. IE6, in particular, didn't seem to like it.

I don't quite follow you with the div for the image. If you're trying to set it under the head, then you'll probably get an error... as I recall, the iframe wouldn't have loaded frame.html, so getElementById wouldn't have an object yet... I don't think anyway.

If you keep it inside of the function for the two other iframes, it should just be a matter of document.getElementById("divimg").innerHTML = document.getElementById("frm").contentWindow.document.getElementById("asd").getElementsByTagName('tr')[target] .getElementsByTagName("td")[0].innerHTML;

This trips me up all the time too; don't forget that document.getElementById("divimg") alone is the div object - to set the contents within it, use .innerHTML

I *think* you're going to need to create a table within blank.html so that you can add the properties from that TD. I tried something like

The information on Computing.Net is the opinions of its users. Such
opinions may not be accurate and they are to be used at your own risk.
Computing.Net cannot verify the validity of the statements made on this
site. Computing.Net and Compnet Ventures, LLC hereby disclaim all responsibility
and liability for the content of Computing.Net and its accuracy.