Entry

How do I dynamically create a new layer in another frame?

How do I dynamically create a new layer in another frame?

Mar 6th, 2000 02:00
Martin Honnen,

Please read
http://www.faqts.com/knowledge-base/view.phtml/aid/1540/fid/128/lang/en
first on how to dynamically create layers. This entry just adds what 
you need to change to create layers in other frames.
So what is window/frame dependant on the code we saw in the above entry?

For NN4 you need to make sure the Layer object you create is created in 
the other frame. To do that you call
  var layer = new parent.frameName.Layer(200, parent.frameName);
Then you can script the layer object as shown in the previous knowledge 
base entry. Make sure there is enough space reserved in the other frame 
to let the layer show up.
http://www.faqts.com/knowledge-base/view.phtml/aid/1532/fid/128/lang/en
shows how.

For IE4/IE5 you create the html as shown but then insert it into the 
document body of the other frame
  parent.frameName.document.body.insertAdjacentHMTL('beforeEnd', html);

Using the www.w3.org DOM methods supported in IE5 and NN6 we need to 
make sure that we create all elements in the correct frame by using
  var element = parent.frameName.document.createElement('TAGNAME');
instead of
  var element = document.createElement('TAGNAME');
and
  var textNode = parent.frameName.document.createTextNode('text');
instead of
  var textNode = document.createTextNode('text');
and then we need to of course insert the element in the document body 
of the other frame 
  parent.frameName.document.body.appendChild(element);

Here is the complete example from the previous knowledge base entry 
rewritten to create the layer in the frame called output:

  var layer = parent.output.document.createElement('DIV');
//then you manipulate that element with DOM methods setting the position
  layer.style.position = 'absolute';
//the coordinates
  layer.style.left = '100px';
  layer.style.top = '200px';
//the dimensions
  layer.style.width = '200px'; layer.style.height = '200px'
//the background color
  layer.style.backgroundColor = 'lime';
//You add content by creating further HTML elements
  var h1 = parent.output.document.createElement('H1');
  h1.appendChild(parent.output.document.createTextNode('Kibology for 
all'));
//and adding those as childs to the layer
  layer.appendChild(h1);
//Finally you add the layer to the document (body):
  parent.output.document.body.appendChild(layer);

Finally for NN6's methods to parse in html into a document fragment we 
need to make sure that we create the range in the correct frame

  var html = '<DIV STYLE="position: absolute;';
  html += ' left: 100px; top: 200px;';
  html += ' width: 200px; height: 200px;';
  html += ' background-color: lime;';
  html += '">';
  html += '<H1>Kibology for all<\/H1>';
  html += '<\/DIV>';
so after creating the html we call
  var range = parent.frameName.document.createRange();
then position the range as needed in the other frame
  range.setStartAfter(parent.frameName.document.body.lastChild);
create the document fragment as before
  var docFrag = range.createContextualFragment(html);
which can be added with DOM methods to the document (body) of the frame
  parent.frameName.document.body.appendChild(docFrag);