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 :

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 :

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:

Finally full codes with bug free :

Posted by Zac1987 on 29 March, 2016


Enter your email address:

Subscribe in a reader

Follow zac1987 on Twitter

Chatting Box


If you feel my website is informative and it is useful for you, please donate some money to support me or buy me a drink. I will continues this good works. Thank you.