Sep
7th

Internet Explorer: Resizing Images in Web-based HTML Editor

Thanks for stopping by my personal blog on Marketing Technology! Over 50,000 visitors a month find my content worth returning for, so don't forget to subscribe to the Marketing Technology Blog RSS feed or to the Marketing Technology Email to have new content sent directly to your inbox. You may also find my other business blog helpful, Social Media Domination.

We had an interesting issue come up with an inline HTML editor at my work. The editor is very robust and is nicely built with Javascript so that it doesn’t require any downloads or plugins. However, the one thing that we notice is that Internet Explorer doesn’t play well with image resizing within the editor (which is based in a textarea).

Here’s an example, using TinyMCE’s editor:
http://tinymce.moxiecode.com/example_full.php?example=true

If you open this editor in Firefox, you’ll notice that dragging the image maintains the aspect ratio of the image:

TinyMCE

However, in Internet Explorer, it doesn’t maintain the aspect ratio at all. Is it possible to constrain the dimensions of the image as it’s dragged in Internet Explorer? I’ve scoured the net and I’m coming up empty on this one! Has anyone worked around this issue by getting the properties back from the DOM object and then properly proportioning the completed image? Any tips or tricks would be appreciated!

RSS feed | Trackback URI

2 Comments »

Comment by no imageDouglas Karr (SezWho)
2006-09-12 13:35:02

Just a follow-up… one of our great troubleshooters, Marc, identified that he could utilize a keypress event to modify the image and maintain the aspect ratio after a drag event. Here are some resources he passed on:

MSDN 1
MSDN 2
MSDN 3

Rate this:
2.9
 
Comment by no imageAmit (SezWho)
2008-02-04 11:25:02

Hi,

I have faced the same issue.

Can you please help me solve it ?

Thanks in advance !

Rate this:
1.6
 
Name (required)
E-mail (required - never shown publicly)
URI
Your Comment (smaller size | larger size)
You may use <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> in your comment.

My Comment Policy: I moderate comments. Please be patient:

  • Spam will happily be destroyed.
  • Use your real name, not some keywords. Otherwise it will be destroyed.
  • Mean comments aren't necessary. If I don't post them I will reply personally to let you know why.
  • Lewd comments will be edited, I don't want my readers leaving because of offensive content.
Great debate, criticism and colorful commentary is always appreciated and approved!