By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,905 Members | 894 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,905 IT Pros & Developers. It's quick & easy.

iframe height problem & oncontextmenu event never triggered

P: n/a
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?
Jul 20 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
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
"Thomas" <ts********@hotmail.com> wrote in message
news:77*************************@posting.google.co m...
: 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?
Jul 20 '05 #2

P: n/a
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
"Thomas" <ts********@hotmail.com> wrote in message
news:77*************************@posting.google.co m...
: 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?
Jul 20 '05 #3

P: n/a
"DJ WIce" <contextmenu @ djwice.com> wrote in message news:<bv**********@news.tudelft.nl>...
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.
Jul 20 '05 #4

P: n/a
: 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
Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.