Search code examples
javascriptjqueryhtmljquery-uijquery-ui-resizable

Jquery resizable() showing resize icon but not resizing

I have a page with two resizable divs. The first one works properly, the second one shows the resize icon but doesn't get resized.

This is my html:

<html>
    <head>
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="css/jquery-ui-1.10.4.css">
        <script src="js/jquery-1.10.2.js"></script>
        <script src="js/jquery-ui-1.10.4.js"></script>
    </head>
    <body>
        <div id="page">
            <img id="img_site_top" src="site_top.png">
            <div id="img_header" style="position: absolute; left: 7px; top: 7px; background-image: url(header.png); width:980px; height:106px;">
                <a id="img_logo" class="jqDrag" style="position:absolute; top: -11px; left: 0px; width:350px; height:107px; background-image: url(logo.png); background-size: 100% 100%;background-repeat: no-repeat; border: 1px solid white">
                </a>
            </div>
            <img id="img_site" src="site.png">
            <img id="img_welcome_panel" src="welcome_panel.png">
        </div>
    </body>
    <script>
        $(
            function(){
                $('#img_logo').draggable().resizable({ aspectRatio: true }); //works
                $('#img_header').resizable(); //doesn't work: shows the icon, but doesn't resize.
            }
        );
    </script>
</html>

Result:

enter image description here

Where:

  • The first resize is applied to the light brown box ($('#img_logo'))
  • The second resize is applied to the light blue box ($('#img_header')), although it may seem it's applied to the gray box.

Demo here

What am I missing? Why the first box just works and the second doesn't?

Solution

  • Try changing the order of initialisation. Demo: http://jsfiddle.net/GCu2D/77/ . Replace this :

     $(function(){
            $('#img_logo').draggable().resizable({ aspectRatio: true }); //works
            $('#img_header').resizable(); //doesn't work: shows the icon, but doesn't resize.
  });

    With: 

     $(function(){                
            $('#img_header').resizable();
            $('#img_logo').draggable().resizable({ aspectRatio: true });

   });