Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I disable _moz_resizing?

I am using nicEdit editor and I have added my own custom image resizing script to it. But I want to disable the default _moz_resizing that appears in Firefox.

I wanted to have finer control over the image being resized. ( Eg: Allow only the image to resize and inherit the width of the parent container. )

So I wrote a custom script. But since Firefox has its own image resizing control (_moz_resizing) how do I disable it? If there is no way to do so, I have a very simple workaround where I detect if Firefox and turn off my custom script and use the _moz_resizing instead.

But I won't have fine-grained control and I will have to rely on there being browser bugs in Firefox. :(

like image 567
Shripad Krishna Avatar asked May 25 '10 03:05

Shripad Krishna


1 Answers

In Firefox, the native image resizing controls can be disabled using the enableObjectResizing command. This command must be executed after designMode has been set to "on".

document.designMode = "on";
document.execCommand('enableObjectResizing', false, 'false');

Once the native resizing controls are disabled, you should not see the _moz_resizing attribute appear. It shows up as a side effect of the native controls, but the presence or value of the attribute does not directly affect the controls themselves. Its only purpose is to trigger a thin black outline around the element being re-sized.

Most in-browser rich text editors use an iframe to display their content. If the CSS position of this iframe changes (say, from static to absolute), it will undo the effects of the enableObjectResizing command. The command may be repeated to turn the native controls back off again. This is very confusing, as there is no indication that this should be the case, but it is. If enableObjectResizing is not working for you, be sure you are setting it after you set any CSS position values.

Also note that the "enableObjectResizing" command will affect the resizers for images AND absolutely positioned elements, if any such exist within the editable content area.

I have prepared a minimal test page the illustrates a working example of this.

like image 138
Chris Nielsen Avatar answered Sep 20 '22 05:09

Chris Nielsen