I haven't worked on anything for a while which prompted me to think back to certain things I considered making in the past. During the summer, when I was working on Reef Some, I made a mod for the forums that would resize images to a custom width and/or height and allow you to see the original. There are a number of modifications that exist for this already but most of them are broken in some way, but still kind of work, or are done very poorly.

I installed one such mod to test it out. The mod resized images to a size determined by a size set in the admin control panel. It then wrapped some tags around that image and made it into a highslide type link where you could view the full size in a highslide popup. The problem with this is that it not only destroyed any tags that were already surrounding it but it also destroyed the way images behave with text. For example, I could embed an image right here and while it may exceed my line height it does not break the text onto new lines. This behavior and the use of any existing tags (such as anchors) is something I wanted to preserve.

I tried a number of different methods to create such a system. Perhaps my most successful one was a system where a double click would resize the image but a single click would follow any existing links. This worked for the most part but browsers kept blocking my links as popups because I had to set it on a timer and because I wanted them to open in a new window/tab. The images needed both a click and a double click event trigger but the click event trigger doesn't wait to see if the click is actually part of a double click. So you can imagine the kind of hackiness that was used in this method.

After that I moved onto some other project. I made the mod that resized the images, even implementing a method for users to set their own custom size, but they were not able to resize them back to their original size. Now, 4 months later, I came up with the idea to make a context menu for each image. That way a menu can popup and you can either choose to resize the image or follow the link. Then I made it!

and I have proof!

Go on, click them! Neat huh? You can already guess what the "custom resize" button is for. I still have no idea how I am going to implement that. I already looked into the resize function that comes with jqeury but I found it to be extremely laggy when used on images, especially images with lots of pixels. I might either have to get inventive or go the simple route and just create a little popup where you can enter the dimensions yourself. One thing that really slowed me down was compatibility problems with both Firefox and IE. I pretty much developed the entire thing in Chrome. The Firefox bugs were fairly easy to flush out but getting the mouse position in IE took me about 15 more minutes than it should have!

The culprit:
// set menu position to where mouse is
div.style.top = /*@cc_on!@*/false ? (document.documentElement.scrollTop+e.clientY)+'px' : (window.pageYOffset+e.clientY)+'px';
div.style.left = /*@cc_on!@*/false ? (document.documentElement.scrollLeft+e.clientX + 15)+'px' : (window.pageXOffset+e.clientX + 15)+'px';

I realized that IE uses different functions to find the scroll position of the page, document.body.scrollTop, but what I did not realize is that they changed when you added a doctype. What is the reason for this?! Internet explorer was behaving up to this point. I finally found the answer on stack overflow, thankfully.

Once I figure out how to go about the custom resize thing I will try to put it on a live forum and then maybe release it as a mod for everyone else to use.