Extract data from table to iframe

June 4, 2010 at 10:09:05
Specs: Windows XP
Hi

Please see this post:

How to extract data from HTML tags - http://www.computing.net/answers/we... ". I tried to reply to it but it was closed.

I've got my page working really well following Shutat's directions. Thank you.

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.

Hope that makes sense.

Thank you very much for your kind assistance in advance


See More: Extract data from table to iframe

Report •

#1
June 9, 2010 at 00:17:05
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.

<html>
<head>
<script type="text/javascript">

function insCell(val, frm) {

   try {

      var doc = document.getElementById("ifrm" + frm).contentWindow.document;

      if(doc.getElementById("test") == null || doc.getElementById("test") == undefined) {
         var d = document.createElement("div");
         d.id = "test";
         doc.body.appendChild(d); 
         delete(d);
      } 

      doc.getElementById("test").innerHTML = val;

   } catch(err) {
      alert(err);
   }    
}

</script>
</head>
<body>
<iframe id="ifrm1" src="iframes/iframe1.htm" width="500" height="100"></iframe>
<iframe id="ifrm2" src="iframes/iframe2.htm" width="500" height="100"></iframe>
<iframe id="ifrm3" src="iframes/iframe3.htm" width="500" height="100"></iframe>

<div style="float: right; position: absolute; top: 10px; left: 540px">

<table border="1"><tbody>
<tr>
<td onmouseover="insCell(this.innerHTML, 1);">cell 1</td>
<td onmouseover="insCell(this.innerHTML, 2);">cell 2</td>
<td onmouseover="insCell(this.innerHTML, 3);">cell 3</td>
</tr>
</tbody></table>
</div>

</body>
</html>

As far as the links go, I'd suspect you could replace my mouseover bit with a js function for your hyperlink that would get the desired cell. Maybe something like

<a href="javascript:getCell(target_iframe_id, target_cell_number);">chair</a>

function getCell(i_frm, cell_num) {

   try {

      var doc = document.getElementById(i_frm).contentWindow.document;
      var d = document.getElementsByTagName("td")[cell_num - 1].innerHTML;

      if(doc.getElementById("test") == null || doc.getElementById("test") == undefined) {

         var ele = document.createElement("div");
         ele.id = "test";
         doc.body.appendChild(ele);
         delete(ele);
      }

      doc.getElementById("test").innerHTML = d;
      delete(d);
      delete(doc);
   } catch(err) {
      alert(err);
   } 
}

Not really tested, but hopefully, it will be of some use.

HTH



Report •

#2
June 9, 2010 at 05:53:49
Hello Shushat

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

<table width="614" border="0" cellspacing="4" cellpadding="4">
<caption align="left">
Chairs
</caption>
<tr>
<th width="234" scope="col">Chair1 Image</th>
<th width="139" scope="col">Components</th>
<th width="193" scope="col">Assembly</th>
</tr>
<tr id="chair1">
<td align="center" valign="top">
"img src="chair.jpg" width="192" height="172" alt="chair1" /" (have taken the <> to show the info)
</td>
<td valign="top">Office chair kit<br />
12 mm open end wrench </td>
<td valign="top">
Step 1<br />
1. Install the casters into the 5 Star Base.<br />
2. Then install the Pneumatic Lifter into the 5 Star Base.<br />
3. Apply the smallest cone first and the largest last.

etc....</p></td>
</tr>
<tr id="chair2">
<td>image for chair 2</td>
<td>components for chair 2</td>
<td>assembly instructions for chair 2</td>
</tr>
<tr id="chair3">
<td>image for chair 3</td>
<td>components for chair 3</td>
<td>assembly instructions for chair 3</td>
</tr>
</table>

To make it easier to begin with (I hope) - let's use just the one iframe on the main page.

<iframe id="ifrm1" src="iframes/frame.html" width="500" height="100"></iframe>

It loads the whole table into the iframe. However:

I'd really like to be able get the contents of only the first row (I have given it an id "chair1") from the table and only have that displayed in the iframe from a link "Chair One".

Another link "Chair Two" would only bring up the contents of row 2 (id "chair2"), link "Chair Three - only the contents of row 3 (id "chair3" )and so and so forth.

I am using id to identify the row from what I've read from other posts but if there is a more efficient method please use it.

Are you with me? It that possible?

It would be great if the caption and table header row were to be permanently displayed and for only the chair row contents to change dependent upon the link clicked.

I hope that this a little clearer and once again send you my appreciation and thanks for your all your help and assistance.

Jean


Report •

#3
June 9, 2010 at 13:53:17
No worries; glad to help if/where I can. :)

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 main page

<html>
<head>

<style type="text/css">
   iframe { width: 1px; height: 1px; border: 0px }
   <!-- hide the contents of the iframe //-->
</style>

<script type="text/javascript">

var idoc;

function getIFrame() {

   try {

      idoc = document.getElementById("ifrm").contentWindow.document.body.getElementsByTagName("table")[0]; 
      getCell('chair1');
  
   } catch(err) {

      idoc = null;
   }
} 

function getCell(cell_id) {

   if(idoc != undefined && idoc != null) {

      var htm = idoc.getElementsByTagName("tr")[cell_id];
      document.getElementById("img").innerHTML = htm.getElementsByTagName("td")[0].innerHTML;
      document.getElementById("com").innerHTML = htm.getElementsByTagName("td")[1].innerHTML;
      document.getElementById("asm").innerHTML = htm.getElementsByTagName("td")[2].innerHTML;
      document.getElementById("chdr").innerHTML = "Chair " + cell_id.substr(cell_id.length - 1);
   }
}

</script>
</head>
<body onload="getIFrame()">

<a href="javascript:getCell('chair1');">chair 1</a>
<a href="javascript:getCell('chair2');">chair 2</a>
<a href="javascript:getCell('chair3');">chair 3</a>

<table width="614" border="1"><caption align="left">Chairs</caption>
<tr>
<th id="chdr" width="234" scope="col"></th>
<th width="139" scope="col">Components</th>
<th width="193" scope="col">Assembly</th>
</tr>
<tr>
<td id="img" valign="top" width="234"></td>
<td id="com" valign="top" width="139"></td>
<td id="asm" valign="top" width="193"></td>
</tr>
</table>

<iframe id="ifrm" src="iframes/frame.html"></iframe>

</body>
</html>

The frame.html page

<table width="614" border="0" cellspacing="4" cellpadding="4">
<tr id="chair1">
<td align="center" valign="top">
<img src="chair.jpg" width="192" height="172" alt="chair1">
</td>
<td valign="top">Office chair kit<br />
12 mm open end wrench </td>
<td valign="top">
Step 1<br />
1. Install the casters into the 5 Star Base.<br />
2. Then install the Pneumatic Lifter into the 5 Star Base.<br />
3. Apply the smallest cone first and the largest last.

etc....</p></td>
</tr>
<tr id="chair2">
<td>image for chair 2</td>
<td>components for chair 2</td>
<td>assembly instructions for chair 2</td>
</tr>
<tr id="chair3">
<td>image for chair 3</td>
<td>components for chair 3</td>
<td>assembly instructions for chair 3</td>
</tr>
</table>

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.

HTH


Report •

Related Solutions

#4
June 9, 2010 at 21:29:31
Wow! Fantastic Shushat

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.

Design
The 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 why
1. 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 education
This 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.

It is truly very much appreciated. Ta very much.

Jean


Report •

#5
June 11, 2010 at 05:40:32
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></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.

<style type="text/css">

   #div_assembly     { position: absolute; top: 10px; left: 500px }
   #div_assembly p   { background-color: blue; color: yellow; text-align: center;
                       padding: 2px; border: 1px solid #000 }
   #div_assembly .p2 { font-family: monospace; teletype; font-size: 10px;
                       text-align: left; padding-left: 5px }
   ...
</style>
On the main page, it might look something like

<div id="div_assembly"></div>


In frame.html
<tr id="chair1">
   ...
   <td>
      <p>Step 1</p>
   </td>
   <td>
      <p class="p2">
         1. Install the casters into the 5 star base.<br />
         2. Install the Pneumatic Lifter into the 5 Star Base.<br />
         3. Apply the smallest cone first and the largest last.
      </p>
   </td>
</tr>

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.

Lastly, here's a few links that may help DOM specification, javascript kit DOM, and w3schools. I use the last site quite a bit when I need to find what a tag is for and whatnot.

HTH


Report •

#6
June 12, 2010 at 19:21:56
Hello Shutat

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;

and

document.getElementById("ifrmimg").innerHTML = document.getElementById("img").innerHTML;

Help!!!


Report •

#7
June 12, 2010 at 19:33:23
Sorry one other question

How would I go about putting your code into a js file so that it can be accessed by multiple files.

Cheers.

Jean


Report •

#8
June 12, 2010 at 22:17:11
hello again piment.

The iframe has proven itself to be a formidable adversary. :P The following *seems* to work in IE6 and the old mozilla firebird browsers, but not in firefox or opera.

<html>
<head>
<script type="text/javascript"><!--

   function loadFrames(target) {      

      document.getElementById("ifrmimg").contentWindow.document.body.innerHTML =       
               document.getElementById("ifrm").contentWindow.document.
               getElementsByTagName("tr")[target].
               getElementsByTagName("td")[0].innerHTML;

      document.getElementById("ifrmcom").contentWindow.document.body.innerHTML =       
               document.getElementById("ifrm").contentWindow.document.
               getElementsByTagName("tr")[target].
               getElementsByTagName("td")[1].innerHTML;

      document.getElementById("ifrmasm").contentWindow.document.body.innerHTML =       
               document.getElementById("ifrm").contentWindow.document.
               getElementsByTagName("tr")[target].
               getElementsByTagName("td")[2].innerHTML; 
   }

//--></script>  

</head>

<body onload="loadFrames('chair1')">

<iframe style="width: 0px; height: 0px; border: 0px" id="ifrm" src="iframes/frame.html"></iframe>

<center>
<iframe id="ifrmimg" src="blank.html" width="300" height="100"></iframe>
<iframe id="ifrmcom" src="blank.html" width="150" height="100"></iframe>
<iframe id="ifrmasm" src="blank.html" width="200" height="100"></iframe><br />
<a href="javascript:loadFrames('chair1');">chair 1</a>
<a href="javascript:loadFrames('chair2');">chair 2</a>
<a href="javascript:loadFrames('chair3');">chair 3</a>
</center>

</body>
</html>

blank.html is an empty file

I'm not sure if it's browser support or the document hasn't been fully loaded. I'll try to play around with it some more tomorrow or Monday as it's getting late for me.

As far as I'm aware, you can load the source file in one of two ways.

<script type="text/javascript" language="javascript" src="path/file.js"></script>

or 

<head>
<script type="text/javascript">

var js = document.createElement("script");
js.src = "path/file.js";
document.getElementsByTagName("head")[0].appendChild(js);
</script>
</head>

HTH


Report •

#9
June 13, 2010 at 01:14:48
Cheers Shutat

No hurry at all.

Please take your time and only attend to this at your leisure.

It's all a puzzle to me.

Found this link while surfing, don't know if it's of any help to you. I think though that he is using jQuery.

http://www.bennadel.com/blog/1592-G...

See also the reference in one of the posts to:
http://scheduler.cfunited.com/js/sc...

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.

You have great weekend and take it easy.

Many Thanks again.

piment


Report •

#10
June 14, 2010 at 05:45:00
Hi piment; I haven't used jquery before, but I *think* I may have something...

the main page

<html>
<head>
<script type="text/javascript" language="javascript" src="scripts/main.js"></script>
<link rel="stylesheet" type="text/css" href="style/main.css">  
</head>

<body onload="loadFrames('chair1', 'style/frames.css')">

<iframe id="ifrm" src="iframes/frame.html"></iframe>

<center>
<iframe id="ifrmimg" src="iframes/blank.html"></iframe>
<iframe id="ifrmcom" src="iframes/blank.html"></iframe>
<iframe id="ifrmasm" src="iframes/blank.html"></iframe><br />
<a href="javascript:loadFrames('chair1', 'style/frames.css');">chair 1</a>
<a href="javascript:loadFrames('chair2', 'style/frames.css');">chair 2</a>
<a href="javascript:loadFrames('chair3', 'style/frames.css');">chair 3</a>
</center>

</body>
</html> 

main.js

<!-- 

   function loadFrames(target, style_sheet) {

      document.getElementById("ifrmimg").contentWindow.document.open();
      document.getElementById("ifrmimg").contentWindow.document.write("<HTML>");
      document.getElementById("ifrmimg").contentWindow.document.write("<HEAD>");
      document.getElementById("ifrmimg").contentWindow.document.write("<LINK REL='STYLESHEET' TYPE='TEXT/CSS' HREF='" + style_sheet + "'>");
      document.getElementById("ifrmimg").contentWindow.document.write("</HEAD>");
      document.getElementById("ifrmimg").contentWindow.document.write("<BODY>");
      document.getElementById("ifrmimg")
         .contentWindow.document.write(document.getElementById("ifrm").contentWindow.document
         .getElementsByTagName("tr")[target].getElementsByTagName("td")[0].innerHTML);
      document.getElementById("ifrmimg").contentWindow.document.write("</BODY>");
      document.getElementById("ifrmimg").contentWindow.document.write("</HTML>");
      document.getElementById("ifrmimg").contentWindow.document.close();

      document.getElementById("ifrmcom").contentWindow.document.open();
      document.getElementById("ifrmcom").contentWindow.document.write("<HTML>");
      document.getElementById("ifrmcom").contentWindow.document.write("<HEAD>");
      document.getElementById("ifrmcom").contentWindow.document.write("<LINK REL='STYLESHEET' TYPE='TEXT/CSS' HREF='" + style_sheet + "'>");
      document.getElementById("ifrmcom").contentWindow.document.write("</HEAD>");
      document.getElementById("ifrmcom").contentWindow.document.write("<BODY>");
      document.getElementById("ifrmcom")
         .contentWindow.document.write(document.getElementById("ifrm").contentWindow.document
         .getElementsByTagName("tr")[target].getElementsByTagName("td")[1].innerHTML);
      document.getElementById("ifrmcom").contentWindow.document.write("</BODY>");
      document.getElementById("ifrmcom").contentWindow.document.write("</HTML>");
      document.getElementById("ifrmcom").contentWindow.document.close();

      document.getElementById("ifrmasm").contentWindow.document.open();
      document.getElementById("ifrmasm").contentWindow.document.write("<HTML>");
      document.getElementById("ifrmasm").contentWindow.document.write("<HEAD>");
      document.getElementById("ifrmasm").contentWindow.document.write("<LINK REL='STYLESHEET' TYPE='TEXT/CSS' HREF='" + style_sheet + "'>");
      document.getElementById("ifrmasm").contentWindow.document.write("</HEAD>");
      document.getElementById("ifrmasm").contentWindow.document.write("<BODY>");
      document.getElementById("ifrmasm")
         .contentWindow.document.write(document.getElementById("ifrm").contentWindow.document
         .getElementsByTagName("tr")[target].getElementsByTagName("td")[2].innerHTML);
      document.getElementById("ifrmasm").contentWindow.document.write("</BODY>");
      document.getElementById("ifrmasm").contentWindow.document.write("</HTML>");
      document.getElementById("ifrmasm").contentWindow.document.close();
   } 

//-->

iframes/frame.html

<table>
<tr id="chair1">
<td>
<img src="chair.jpg" width="192" height="172" alt="chair1">
</td>
<td><p>Office chair kit</p><br />
12 mm open end wrench</td>
</div>
<td valign="top">
<p>Step 1</p>
1. Install the casters into the 5 Star Base.<br />
2. Then install the Pneumatic Lifter into the 5 Star Base.<br />
3. Apply the smallest cone first and the largest last.<br />
4. Add something else.<br />
5. next step.<br />

etc....</p></td>
</tr>
<tr id="chair2">
<td>image for chair 2</td>
<td>components for chair 2</td>
<td>assembly instructions for chair 2</td>
</tr>
<tr id="chair3">
<td>image for chair 3</td>
<td>components for chair 3</td>
<td>assembly instructions for chair 3</td>
</tr>
</table>

style/frames.css

p {
   background-color: #000000;
   color: #ffffff;
   font-family: teletype;
   font-size: 16px;
   text-align: center }

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.

frame.html should contain basic tags and then set styles using css.

Thanks for the weekend well wish; I hope your went well.

HTH


Report •

#11
June 15, 2010 at 19:13:30
Thank you Shutat

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.

Cheers

piment



Report •

#12
June 17, 2010 at 06:56:11
It does seem like the latest code is somewhat problematic. I've got an idea that *should* work across browsers, but will be a lot more effort.

The first part is spoofing a style sheet by using an array. In the main.js file, perhaps something like

var styles = new Array(number of tags expected to style);
styles['p'] = new Array();
styles['p'] = { bgc: "some color", other attributes if any };
styles['div'] = { style attributes };
styles['tag_name'] = { ... };

Create vars for each of the four iframes. In main.js perhaps

 
var frm1 = null;
var frm2 = null;
var frm3 = null;
var ifrm = null;

function init() {

   ifrm = document.getElementById("ifrm").contentWindow.
             document.body;
   frm1 = document.getElementById("ifrmimg").
             contentWindow.document; // note body is excluded
   frm2 = document.getElementById("ifrmcom").
             contentWindow.document;
   frm3 = document.getElementById("ifrmasm").
              contentWindow.document;
}

function loadFrames(target) {

   var td1 = document.getElementsByTagName("tr")[target].
                 getElementsByTagName("td")[0].
                 getElementsByTagName("img")[0];
   var td2 = document.getElementsByTagName("tr")[target],
                 getElementsByTagName("td")[1];
   var td3 = document.getElementsByTagName("tr")[target],
                 getElementsByTagName("td")[2];
   ...

Here's where things get interesting. In the frame.html, you can use the <br /> to split your headings and body, but it seems to create an issue for IE 6, at least.

continued loadFrames(target)

   // set the image
   frm1.body.innerHTML = '<img src="' + td1.src +
      '"  width="' + td1.width + '" height="' + td1.height +
      '" alt="' + td1.alt + '">';
   
   // set the components window
   var tmp = td2.innerHTML.toLowerCase.split("<br>");
   var hdr = frm2.createElement("p");
   var bdy = frm2.createElement("p");

    // assign attributes
    hdr.id = "td1_hdr"; // not required, but may be handy
    hdr.style.backgroundColor = styles['p'].bgc;
     // other styling attributes
    hdr.innerHTML = tmp[0]; // should be heading, title, etc

    frm2.body.appendChild(hdr);

    // assign bdy attributes the same way.
    frm2.body.appendChild(bdy);

    // assembly is a bit more involved

    tmp.length = 0; // wipe out the array
    tmp = td3.innerHTML.toLowerCase().split("<br>");
    hdr = frm3.createElement("p");
    bdy = frm3.createElement("p"); 

    // apply styling attributes as before
    hdr.innerHTML = tmp[0];

    tmp.shift(); // get rid of first element.
    tmp.join("~");
    var s = tmp.replace(/~/g, "<br />");
    bdy.innerHTML = s;

    frm3.body.appendChild(hdr);
    frm3.body.appendChild(bdy);
}

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.html
iframes/frame.html
iframes/blank.html
images/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">


Report •

#13
June 17, 2010 at 18:42:20
Wow

You've got my hair standing on end. Thanks a lot for the effort that you are putting into this.

Dont' know if this is of any help but, I discovered this function the other day:

<html>
<head>
<script language="JavaScript" type="text/javascript">
function totbl(){
document.getElementById("totbl").appendChild(document.getElementById("frm")
.contentWindow.document.getElementById("asd").getElementsByTagName('tr')[0]
.cloneNode(true));
}
</script>
<link href="style/frame.css" type="text/css" rel="stylesheet" media="screen"/>
<head>
<body onLoad="totbl()">
<iframe id="frm" src="frame.html"></iframe>

<table id="totbl"></table>
</body>
</html>

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


Report •

#14
June 17, 2010 at 22:35:35
I *think* I've got now... at least on the browsers I have to test with. :P Can't believe I made it harder than it needed to be either. :|

Use the main page to set the styling attributes of the iframes such as hiding the source of frame.html etc, and then frame.css to style the individual components within the three iframes.

To keep it simple, I kept all files in the same path.

<html>
<head>
<script language="JavaScript" type="text/javascript">

function totbl(target) { 

   document.getElementById("ifimg")
     .contentWindow.document.body.innerHTML = document.getElementById("frm")
     .contentWindow.document.getElementById("asd").getElementsByTagName('tr')[target]
     .getElementsByTagName("td")[0].innerHTML;

   document.getElementById("ifcom")
     .contentWindow.document.body.innerHTML = document.getElementById("frm")
     .contentWindow.document.getElementById("asd").getElementsByTagName('tr')[target]
     .getElementsByTagName("td")[1].innerHTML;     

   document.getElementById("ifasm")
     .contentWindow.document.body.innerHTML = document.getElementById("frm")
     .contentWindow.document.getElementById("asd").getElementsByTagName('tr')[target]
     .getElementsByTagName("td")[2].innerHTML;     
}
</script>

<head>
<body onLoad="totbl('chair1')">

<iframe id="frm" src="frame.html"></iframe>
<iframe id="ifimg" src="blank.html"></iframe>
<iframe id="ifcom" src="blank.html"></iframe>
<iframe id="ifasm" src="blank.html"></iframe>

<a href="javascript:totbl('chair1');">chair 1</a>
<a href="javascript:totbl('chair2');">chair 2</a>
<a href="javascript:totbl('chair3');">chair 3</a>

</body>
</html>

blank.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="frame.css">
</head>
<body>
</body>
</html>

frame.html should be modified a bit in order to differentiate between any headings and the main descriptive parts. For example, I used h1 to set off the headings.

<table id="asd">
<tr id="chair1">
<td>
<img src="chair.jpg" width="192" height="172" alt="chair1">
</td>
<td><h1>chair kit</h1>
12 mm open end wrench</td>
<td valign="top"><h1>Step 1</h1><br />
1. Install the casters into the 5 Star Base.<br />
2. Then install the Pneumatic Lifter into the 5 Star Base.<br />
3. Apply the smallest cone first and the largest last.<br />
4. Add something else.<br />
5. next step.<br />
</td>
</tr>
<tr id="chair2">
<td>image for chair 2</td>
<td>components for chair 2</td>
<td>assembly instructions for chair 2</td>
</tr>
<tr id="chair3">
<td>image for chair 3</td>
<td>components for chair 3</td>
<td>assembly instructions for chair 3</td>
</tr>
</table>

As a test, I used this for frame.css

body { background-color: #eee;
       color: #000;
       font-size: 9pt;
       text-align: left;
       padding-left: 10px }

h1 { font-family: teletype;
     font-size: 16pt;
     font-weight: 900;
     text-align: center }

HTH


Report •

#15
June 21, 2010 at 01:00:09
What can I say - TERRIFIC, Shutat, bloody marvellous!!!!

It's working in IE8, FF 3.6, Opera and SWare IRon (Chrome), Haven't got Safari.

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:

<td id ="comp1" width="280" valign="top" class="mover" onmouseover="style.backgroundColor='#84DFC1';"
onmouseout="style.backgroundColor='#84C1DF'" >
<h5 class="bblue">Components</h5>

In frames.css:
.mover {border: 1px #000000 solid;}
and
.bblue{background-color: #84C1DF;} (as a background for the H5)

Looks and works OK in the parent iframe id="frm" but in iframe id="ifcom" , oddly the background comes though OK but not the border, neither is the mouse over transferred.

So if you needed "copy" styles and/or had events contained within the td tag of individual cells, would you then have to get its outerHTML for it to display in the secondary iframe?

Can I pose you one last challenge, if you're up to it?

Substitute a div to hold the image but keep the iframes for the components and assembly in the one function.

I've tried putting a div id="divimg" in the main page and changed:

document.getElementById("ifimg") to document.getElementById("divimg")

but it does not seem to work, the whole function breaks down and nothing is displayed.

Thanks a million again and as they say in Australia, Goodonya Mate, Beautie.


Report •

#16
June 22, 2010 at 09:12:18
Back for more mayhem are you? :P

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

blank.html

 <html>
<head>
<link rel="stylesheet" type="text/css" href="frame.css">
</head>
<body>
<table>
<tbody>
<tr>
<td id="blank"></td>
</body>
</html>

In the main page, I did something like

function totbl(target) { 

   var ele = document.getElementById("frm")
             .contentWindow.document.body
             .getElementsByTagName('tr')[target]
             .getElementsByTagName("td")[1];

   var des = document.getElementById("ifcom")
             .contentWindow.document
             .getElementsByTagName("td")[0];

   document.getElementById("ifimg").innerHTML = document.getElementById("frm")
     .contentWindow.document.getElementById("asd").getElementsByTagName('tr')[target]
     .getElementsByTagName("td")[0].innerHTML; 

   des.id = ele.id;
   des.className = ele.className;
   des.setAttribute("align", ele.getAttribute("align"));
   des.setAttribute("width", ele.getAttribute("width"));
   des.setAttribute("onmouseover", ele.getAttribute("onmouseover"));
   des.setAttribute("onmouseout", ele.getAttribute("onmouseout"));
   des.innerHTML = ele.innerHTML;   

   document.getElementById("ifasm")
     .contentWindow.document.body.innerHTML = document.getElementById("frm")
     .contentWindow.document.getElementById("asd").getElementsByTagName('tr')[target]
     .getElementsByTagName("td")[2].innerHTML;     
}

It *appears* to work within the component iframe at least. Here's what I had in frame.html.

<table id="asd">
<tr id="chair1">
<td>
<img src="../images/chair.jpg" width="192" height="172" alt="chair1">
</td>
<td id ="comp1" width="280" valign="top" class="mover" onmouseover="style.backgroundColor='#84DFC1';"
onmouseout="style.backgroundColor='#84C1DF'" >
<h5 class="bblue">Components</h5>
12 mm open end wrench</td>
<td valign="top"><h1>Step 1</h1><br />
1. Install the casters into the 5 Star Base.<br />
2. Then install the Pneumatic Lifter into the 5 Star Base.<br />
3. Apply the smallest cone first and the largest last.<br />
4. Add something else.<br />
5. next step.<br />
</td>
</tr>
<tr id="chair2">
<td>image for chair 2</td>
<td id ="comp1" width="280" valign="top" class="mover" onmouseover="style.backgroundColor='#84DFC1';"
onmouseout="style.backgroundColor='#84C1DF'" >components for chair 2</td>
<td>assembly instructions for chair 2</td>
</tr>
<tr id="chair3">
<td>image for chair 3</td>
<td>components for chair 3</td>
<td>assembly instructions for chair 3</td>
</tr>
</table>

Hope that helps.

Cheers, mate. :)


Report •

#17
June 24, 2010 at 17:42:08
Thank you, Shutat.

Report •

Ask Question