<img src="images/company-picture-brochure/picture.jpg" style="z-index:1; cursor:pointer; position:relative; left: 150px; top: 150px;" id="main-pic-2" /> $("#main-pic-2").resizable({ handles: 'n, e, s, w, ne, se, sw, nw', aspectRatio: true, start: function(e,ui) { if (jQuery(e.originalTarget).hasClass("ui-resizable-se")) { aspectRatio: false; } }, stop: function(e, ui) { var pwidth = ui.size.width; var pheight = ui.size.height; savePicResolutionToDb(pwidth); } });

Codes above allow user use mouse to drag the button to resize the image, but above codes have many bugs :

bug 1 : The image sometime doesn't show up on screeen. Why? Reason is the image must have html width and html height. (not css width and not css height). If you don't know the height of image. Browser nowaday apply height to image automatically, if you want to get the height of image that given by browser, u can use the code below : var mainPicHeight = $(this).height(); //get height $("#main-pic-2").height(mainPicHeight); //set height

bug 2 : You cannot get the image height given by browser. Why? Reason is your code start run when the image is not finish load yet. How to use jquery wait image finish loaded then only start get image height? Use the codes : $("#main-pic-2").load(function(){ // wait the picture finish load then only jquery can get the height. var mainPicHeight = $(this).height(); //get height $("#main-pic-2").height(mainPicHeight); //set height })

bug 3 : Now your image always show up on screen, good job. But Resize button sometime doesn't show up on the Image. Why? It is because event is fired before you attached a handler to listen for it (e.g. loading from cache). You need to check if it's loaded and fire it yourself, like this: $("#main-pic-2").load(function(){ //wait the picture finish load then only jquery can get the height. var mainPicHeight = $(this).height(); //get height $("#main-pic-2").height(mainPicHeight); //set height }).each(function() { if(this.complete) $(this).load(); });

Finally full codes with bug free : $("#main-pic-2").load(function(){ //wait the picture finish load then only jquery can get the height. var mainPicHeight = $(this).height(); //get height $("#main-pic-2").height(mainPicHeight); //set height $("#main-pic-2").resizable({ handles: 'n, e, s, w, ne, se, sw, nw', aspectRatio: true, start: function(e,ui) { if (jQuery(e.originalTarget).hasClass("ui-resizable-se")) { aspectRatio: false; } }, stop: function(e, ui) { var pwidth = ui.size.width; var pheight = ui.size.height; savePicResolutionToDb(pwidth); } }); }).each(function() { if(this.complete) $(this).load(); });