Give it a click:
as dignissim, justo malesuada placerat porttitor, eros libero rutrum ante, eget faucibsequat. Fusce fermentum, nisi nec porttitor interdum, mauris ipsum porta diam, non tempor velit tellus vel ante. Aliquam felis diam, aliquet u
t vestibulum pharetra, suscipit ac velit. Ut vel lectus sem. Ut pulvinar, sem id luctus luctus, tellus 
neque dignissim risus, ut euismod dui eros quis magna. Mauris sed elementum nisl. Nam viverra egestas magna, a euismod nulla viverra in.
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:
mouseposY = ie ? (document.documentElement.scrollTop+e.clientY) : (window.pageYOffset+e.clientY);
mouseposX = ie ? (document.documentElement.scrollLeft+e.clientX) : (window.pageXOffset+e.clientX);
new_img.height = (mouseposY - rez_div.offsetTop);
new_img.width = (mouseposX - new_img.offsetLeft);
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:
new_img.height = (mouseposY - rez_div.offsetTop);
// wherever the rezbox is plus its width gets the right corner of it minus the mouse position gets how far you are from that position
new_img.width = (rez_div.offsetLeft + mxwidth - mouseposX);
// manually setting the image location, rezbox plus its width minus however big the image already is
new_img.style.left = rez_div.offsetLeft + mxwidth - new_img.width+'px';
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:
// ob is object to get offset of, type is top or left: left = 0 top = 1
function realOffset(ob, type){
if(type == 0){
offLeft = ob.offsetLeft;
//alert(ob.nodeName+' - '+ob.offsetLeft);
while(ob != document.body){
ob = ob.offsetParent;
offLeft += ob.offsetLeft;
//alert(ob.nodeName+' - '+ob.offsetLeft);
}
return offLeft;
}
else{
offTop = ob.offsetTop;
while(ob != document.body){
ob = ob.offsetParent;
offTop += ob.offsetTop
}
return offTop;
}
return false;
}
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?
After a while of tinkering with that I realized that I'd like this script on every website. I was tired of huge images I had to scroll past. So that was the answer to my IE problem. To forget about it completely and instead make a Chrome extension, which proved incredibly easy. Somehow Google made creating extensions in Chrome near effortless, an extension can be made entirely in javascript and to load it into chrome all you have to do is make a tiny little file that tells chrome what to do with it.
Here's my little file:
{
"name": " Resizer thing",
"version": "1.0",
"description": "The resizer thing I made.",
"content_scripts": [
{
"matches": ["http://*/*"],
"css": ["css.css"],
"js": ["rezbox.js"]
}
]
}
First couple of lines are pretty self explanatory. The whole "content scripts" thing is telling chrome where my files are and what I want to do with them. Basically, I tell it to match every possible url (starting with http) and then include a css style file and my javascript to resize images. To automatically resize images I wait until the page loads and then I run through every image on the page.
onload = function(){
for(i in document.images){
poo(document.images[i]);
}
}
mh = window.innerHeight;
mw = window.innerWidth;
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!
consectetur adipiscing elit. Quisque tincidunt sagittis mi 
sit amet pellentesque. Nulla tristique ligula eget augue lobortis porttitoreget nec lacus. Etiam porta mauris sit amet felis suscipit eu mattis neque ullamcorper. Suspendisse ut enim vitae nisi gravida rhoncus. Sed at diam ut elit 
molestie commodo.
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.
Over the summer I helped my friend Ludnix with a project he was working on called Reefsome. His idea was to create a reef keeping website where hobbyists could get together and share their knowledge and their hard work! Other websites like this exist, and are fairly popular, but both he and I felt like they were all very poorly executed and had some major problems with their interface. A lot of sites used portals that came with their forum software to create a front page that was integrated with their forums. We wanted to integrate the main site with the forums, but a portal system was out of the question, so I developed my own set of hooks that interfaced with our vBulletin forum software to create a truly seamless integration.
The gallery uses a pretty heavily modified version of my own Saurdo Gallery. Using my forum integration we created an environment where people could make their own personalized galleries and be able to easily post their images on the forums. One way I did this was to create a special version of the gallery that was meant to open in a tiny window from the forums. Much like the existing attachment systems in vBulletin, my system acted like the attachment system right down to the "click to add to post" buttons. Go check out the gallery!
This of course required some modification to the forums. Something that I actually became quiet comfortable with once I learned how to properly use vBulletin's hook system. I actually ended up creating a number of custom modifications for the forums. Everything from user set "max image display size" options to the aforementioned attachment system thing.
The website is pretty much finished and now everyone is just working on adding content to it. So if you have a saltwater aquarium or want to go check out my handy work then go visit Reefsome.com!