Hi there,
I have an iframe which is editable (designMode = "on") and want to
resize it dynamically as the content grows (e.g. more lines of text is
in there) and there the struggle starts.
I fill the iframe with content (<body> tag and so on and also insert a
<div> tag, inbetween is the content that should be modified).
Now if the event "overflow" or "underflow" is triggered the iframe
resizes. I extract the offsetHeight of the <div> layer inside the
iframe and set the height of the iframe to that height. It seems to
work, but only if I add to the <body> of the iframe a border: 1px
dashed. and only if the scrollbar is activated (scrollbar="auto|yes"
of the iframe).
I dont't want to see the ugly scrollbar, so I add 2px additional on
the iframe.height. Then the iframe grows as expected, but the
shrinking doesn't work if the height was mofidied with " + 2". My
code:
function resizeEditArea() {
newHeight = iFrame.contentWindow.document.getElementById("cont ent").offsetHeight;
iFrame.height = newHeight;
// iFrame.height = "" + (newHeight + 2);
/* this scales up, but not down the iframe, problem is, that the event
"underflow" is never triggered
*/
return false;
}
The iframe is created in this way:
iFrame = document.getElementById("editArea");
iFrame.height = editAreaHeight;
iFrame.width = editAreaWidth;
// iFrame.scrolling = "no"; must be enabled otherwise no event is
triggered
editArea = iFrame.contentWindow.document;
iFrame.contentWindow.addEventListener("overflow", resizeEditArea,
false);
iFrame.contentWindow.addEventListener("underflow", resizeEditArea,
false);
// iFrame.contentWindow.addEventListener("onscroll",
resizeEditArea, false); has no impact
iFrame.contentWindow.addEventListener("oncontextme nu", mouseClick,
false);
editArea.write(doc);
resizeEditArea();
editArea.close();
editArea.designMode = "On";
iFrame.contentWindow.focus();
Can anyone help?
Thomas
Another question is: Why is the event "oncontextmenu" never triggered,
if I click the right mouse button in the iframe?