iframe height problem & oncontextmenu event never triggered

Thomas · Jan 26, 2004

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("content").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("oncontextmenu", 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?

DJ WIce · Jan 26, 2004

Look at my script:

http://djwice.com/contextmenu.html

I made an IFRAME contextmenu that dynamically changes size and that is
always on top of all elements. The functions in the contextmenu are browser
dependend.
MSIE als works with the + and - on the Num/Lock part of you keyboard.

It needs testing in Mozilla, tested in MSIE 5+ and NN 7.

Wouter

: 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("content").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("oncontextmenu", 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?

DJ WIce · Jan 26, 2004

About the height problem:

MSIE counts the border as outside the body.
NN/Mozilla counts the border as inside the body.

So if you have a border of 1px, MSIE asks you to add 2 pixels in height.
other browsers will show 2 lines below your border if you do that.

An other thing I found;
If you change focus in NN to a child, the events that you catched in the
parent will not be handled after that change via your function but via the
normal event handling of the browser.

so:

oncontextmenu=New function("child.focus();return false;");

will focus your child AND will open the browsers default contextmenu in NN
(not in IE).

Wouter

: 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("content").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("oncontextmenu", 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?

Thomas · Jan 27, 2004

DJ WIce said:
About the height problem:

MSIE counts the border as outside the body.
NN/Mozilla counts the border as inside the body.

So if you have a border of 1px, MSIE asks you to add 2 pixels in height.
other browsers will show 2 lines below your border if you do that.

An other thing I found;
If you change focus in NN to a child, the events that you catched in the
parent will not be handled after that change via your function but via the
normal event handling of the browser.

so:

oncontextmenu=New function("child.focus();return false;");

will focus your child AND will open the browsers default contextmenu in NN
(not in IE).

Wouter

Thank you, I didn't know of this function. But I definitely want to
open my own context menu on the right mouse click. Right now, only the
browser menu opens. And still the iframe doesn't trigger oncontextmenu
at all.

DJ WIce · Jan 27, 2004

: Thank you, I didn't know of this function. But I definitely want to
: open my own context menu on the right mouse click. Right now, only the
: browser menu opens. And still the iframe doesn't trigger oncontextmenu
: at all.

So look at the code at my website..

Wouter

explorer crash after switching to designMode	1	Jan 25, 2004
Dynamic iFrame height, not working in ie without refresh.	0	Mar 1, 2007
URL problem inside an IFRAME	0	Sep 18, 2008
IFRAME height problem... anybody, help?!?	1	Jul 2, 2005
Retrieving the height of the content inside an Inline Frame (IFrame).	1	Dec 19, 2005
IE + Iframe popup problem	1	Apr 18, 2007
I Need Help with making a function that draws in a canvas using location data.	1	Dec 17, 2021
Calculate height of iframe problem in asp page with external link	1	Nov 7, 2005

iframe height problem & oncontextmenu event never triggered

Thomas

DJ WIce

DJ WIce

Thomas

DJ WIce

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads