Give it a click:
I tried resizing live while you were dragging the image but as the image moved around as well as text that the image size affected it proved difficult to keep track of the size of the image. So I made it stationary! In my final version you can preserve the image's ratio With a press of the "Shift" key.
The ability to determine the proper height or width based on the distance of the mouse from the corner of the image took a bit of work because I did not want to resize the image to the right if it would create a horizontal scroll. So I had to find a way to resize the image while preserving the location of its right most corner.
What it would be originally:
First I had to determine the mouse position and then just subtract the location of the image from that.
What resizing to the left looks like:
The height is the same because resizing to the left or right doesn't affect that. However, to resize to the left I first had to determine where the right corner of my resizing box was and then determine how far away my mouse was from that. Then, on top of all that, I had to shift my image so it wouldn't change position while resizing. To achieve this I took the location of my resizing box plus the width of the resizing box, to get the right corner, and then subtract however wide I just made the image.
One thing that really slowed me down is that offsetLeft doesn't really mean offsetLeft, it's in fact, meaningless. So I had to create my own function to find the offset of an object.
Finding the true offset function:
The type variable determines wether to find the offset left or offset top. To find the real offset you have to go through every parent object and find the offset of that. Luckily, there's something called "offsetParent" that makes this process a little less painful.
So, I got all that working. Last thing I need to do is stick it in the vbulletin plugin system and everything should work, right? Well, works in Chrome, Firefox, Opera, Safari, and every other browser. Excluding, of course IE. As unsurprising as this may be to some it came as a complete surprise to me. I tested this in IE 8-5 and it worked flawlessly. Somehow the act of putting it on a forum breaks it. The strange thing is that the thing that seems to break it is the fact that IE isn't returning an image width or height. No image width at all. So the only thing I could come up with is to see if the script was somehow executing before IE was able to determine its width or height. No luck, so I tried using some other attribute to determine its width and height. ClientWidth and ClientHeight perhaps? Nope. Nor did any of the other ones work. I spent a great deal of time on this. What was so special about VBulletin that it broke my script in IE and how can I simulate this?
Here's my little file:
I have the max size set to that of my browser's viewport! This is nowhere near completion, I still need to iron out some things and make my max size algorithm a little more like an algorithm. If you want to take your chances you can download it here!