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="aut o|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.contentW indow.document. getElementById( "content").offs etHeight;
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.getEle mentById("editA rea");
iFrame.height = editAreaHeight;
iFrame.width = editAreaWidth;
// iFrame.scrollin g = "no"; must be enabled otherwise no event is
triggered
editArea = iFrame.contentW indow.document;
iFrame.contentW indow.addEventL istener("overfl ow", resizeEditArea,
false);
iFrame.contentW indow.addEventL istener("underf low", resizeEditArea,
false);
// iFrame.contentW indow.addEventL istener("onscro ll",
resizeEditArea, false); has no impact
iFrame.contentW indow.addEventL istener("oncont extmenu", mouseClick,
false);
editArea.write( doc);
resizeEditArea( );
editArea.close( );
editArea.design Mode = "On";
iFrame.contentW indow.focus();
Can anyone help?
Thomas
Another question is: Why is the event "oncontextm enu" never triggered,
if I click the right mouse button in the iframe?
