Entry
How to rewrite a relatively positioned element (in NN4 particularly)?
Feb 13th, 2000 06:49
Martin Honnen,
NN4's dhtml implementation has some bugs, in particular regarding
relatively positioned content. When you try to rewrite the content of
such an element with the standard
var l = document['layerId'];
l.document.open();
l.document.write('some new content');
l.document.close();
that new content might not show up or show up in the wrong place.
The workaround is to use a new Layer element placed on top of the
relatively positioned element and document.write to that new Layer
instead. The following page contains a function
rewriteLayer
which provides the workaround, you just need to pass the layer id (or
the complete path to the layer for nested layers) and the new content
as the arguments. The rewriteLayer function also contains
(straightforward) IE4/5 and NN6 code to make it cross browser.
To demonstrate the code works the page below contains two relatively
positioned example elements, one as a direct child of BODY, one
contained in an absolutely positioned element which gets moved around.
<HTML>
<HEAD>
<STYLE>
#container {
position: absolute; visibility: visible;
width: 225px;
left: 0px; top: 80px;
}
#message { position: relative; width: 160px }
#relativeEl { position: relative; }
</STYLE>
<SCRIPT>
function rewriteLayer (idOrPath, html) {
if (document.layers) {
var l = idOrPath.indexOf('.') != -1 ? eval(idOrPath)
: document[idOrPath];
if (!l.ol) {
var ol = l.ol = new Layer (l.clip.width, l);
ol.clip.width = l.clip.width;
ol.clip.height = l.clip.height;
ol.bgColor = l.bgColor;
l.visibility = 'hide';
ol.visibility = 'show';
}
var ol = l.ol;
ol.document.open();
ol.document.write(html);
ol.document.close();
}
else if (document.all || document.getElementById) {
var p = idOrPath.indexOf('.');
var id = p != -1 ?
idOrPath.substring(idOrPath.lastIndexOf('.') + 1)
: idOrPath;
if (document.all)
document.all[id].innerHTML = html;
else {
var l = document.getElementById(id);
var r = document.createRange();
r.setStartAfter(l);
var docFrag = r.createContextualFragment(html);
while (l.hasChildNodes())
l.removeChild(l.firstChild);
l.appendChild(docFrag);
}
}
}
</SCRIPT>
<SCRIPT>
var left = 0;
function moveContainer () {
left += 50;
if (document.layers)
document.container.left = left;
else if (document.all)
document.all.container.style.pixelLeft = left;
else if (document.getElementById)
document.getElementById('container').style.left = left + 'px';
}
var c = 0;
</SCRIPT>
</HEAD>
<BODY>
<A HREF="javascript: rewriteLayer('relativeEl', 'Kibology ' + ++c);
void 0">
rewrite layer
</A>
|
<A HREF="javascript: rewriteLayer
('window.document.container.document.message', new Date()); void 0">
rewrite nested layer
</A>
|
<A HREF="javascript: moveContainer(); void 0">
move
</A>
<BR>
<SPAN ID="relativeEl">Kibology 0</SPAN>
<div id="container">
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>Kibology for all</td>
</tr>
<tr>
<td>
<div id="message"><script>document.write(new Date())</script></div>
</td>
</tr>
</table>
</div>
</BODY>
</HTML>
