Question

I’m using CSS’s resize property to resize a div element in FF, Safari, and Chrome, but since this property doesn’t work in IE and Opera, I am forced to find a backup in case one of these two browsers is being used, so I’m using a combination of Jquery and javascript, to ask a function I found online, here: Browser resize support code
. Unfortunately, this is the code I fear isn’t working in my test to see if it would work.

Here’s my test code: My code

var unsupported = (function()
{
    var div = document.createElement('div'),
    vendors = 'Khtml Ms O Moz Webkit'.split(' '),
    len = vendors.length;
    return function(prop)
    {
        if( prop in div.style ) return true;
        prop = prop.replace(/^[a-z]/, function(val)
        {
            return val.toUpperCase();
        });
        while(len--)
        {
            if ( vendors[len] + prop in div.style )
            {
                return false;
            }
        }
        return true;
    };
})();
if( unsupported('resize') )
{
    $("#elementtoresize").append('<img class="resizer" src="resizer.png"/>');
    var r = true;
}
$(".resizer").mousedown(function(e){
    if(r)
    {
        var Xoffset = this.parentNode.offsetLeft + this.parentNode.offsetWidth - e.clientX;
        var Yoffset = this.parentNode.offsetTop + this.parentNode.offsetHeight - e.clientY;
        r = false;
    }
    $(".resizer").mousemove(function(e){
        this.parentNode.offsetWidth = e.clientX + Xoffset - this.parentNode.offsetLeft;
        this.parentNode.offsetHeight = e.clientY + Yoffset - this.parentNode.offsetTop;
    }
    $(".resizer").mouseup(function(){
        r = true;
    }
}

It additionally requires an image in the same folder as the script, preferably 10×10 or smaller to be used as the icon for resizing the div element, but not only does the resizing not work, the image doesn’t even display, which is what leads me to believe that the variable for checking the CSS is what’s causing the problem, because without it the image is never appended inside the div element. But since I didn’t write the code and there were no other codes I could find for checking to see if the specific CSS property is supported, I have no way of really finding the error. If you’re going to try testing the code, you’ll also need this bit of code inside the style tag.

.resize
{
z-index:2;
position:absolute;
right:5;
bottom:5;
}

Any help fixing the code would be appreciated!

Answer 1

That code is wrong in many ways, including syntax and approach.

First of all, you should use a library like Modernizr for testing feature support. Anyway, if you’re going with this code, try not changing just parts of it. The function unsupported fails because you didn’t change all of it’s return points. In the future, wrap the original function if you really need to use new naming. Like unsupported = function (x) { return !supported(x); };

Moreover, the original function you used was incomplete. While it didn’t affect your particular case, I took the liberty to improve it. Find it here: http://jsfiddle.net/mihaibirsan/NCs5J/

Second, the resizing code was really messy. When you pass functions as parameters, don’t forget to close the parenthesis of the function call! Also, using global variables is absolutely bad—avoid at all costs! Besides, since you’re using jQuery, why not wrap the functionality in a nice little jQuery function? You can find the code here: http://jsfiddle.net/mihaibirsan/Rty3R/8/

So your code should come down to the bits and pieces pasted before (without the testing code), plus the following line:

if (!supported('resize')) $("#elementtoresize").resizable();

I hope this helps! If it pleases you, please accept the answer! I do this for the points!