0

Resize horizontally AND vertically synchronously :

You have two resizable elements: One is supposed to resize vertically. The other one

horizontally with the resizable widget - alsoResize (Def: You use it to resize one or more

elements synchronously with the resizable element).

So when you resize the horizontal element, it should resize in width only. The vertical

element should be resizable in height only.

I have tried everything what was suggested here (and more) :

https://stackoverflow.com/questions/3628194/how-to-resize-only-horizontally-or-vertically- with-jquery-ui-resizable

Here is my try (Thanks for fixing, user):

http://jsfiddle.net/LtHt9

<html>

    <lang="en">


    <header>

      <meta charset="UTF-8">

      <link rel="stylesheet"     
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css"/>

      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
      <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>


    </header>

    <body>

    <div class="cross">
       <div id="horizontal">
          <h3>HORIZONTAL</h3>
          <div id="vertical">
             <h3>VERTICAL</h3>
          </div>
       </div>
    </div>



  <style>

    body {

       background-color: gray;
       width: 100%;

        }

    #horizontal { 
       width: 280px; 
       height: 2px;
       background-color:white;
       position: relative;
       left: 540px;
       top: 400px;

        }

     #vertical { 
        width: 2px; 
        height: 550px; 
        background-color:white; 
        position: absolute; 
        left: 140px;
        top: -260px;

         }

     #horizontal h3, #vertical h3 { 
        text-align: center; 
        margin: 0; 

         }

      .cross {
         position: absolute;
         height: 20px;
         width: 200px;

         } 

    </style>


    <script>

        $(document).ready(function () { 


            $( "#vertical" ).resizable({
                    alsoResize: "#horizontal",
                    handles: "n , s"       
                });



            $( "#horizontal" ).resizable({
                     handles: "w , e"
                }); 


            });


     </script>


     </body>

    </html>

Hope, I was clear enough.

Community
  • 1
  • 1
user3606781
  • 1
  • 1
  • try http://jsfiddle.net/LtHt9/ is wrong? – user3401335 May 06 '14 at 09:55
  • Hey, thanks for fixing the fiddle! Its not wrong bro. It’s not what I am looking for. Let me try to explain what my intention is : For instance - when you resize / enlarge the vertical line (in height only), the horizontal line should respond to that by resizing / enlarging itself , too. When you minimise the vertical line, the horizontal line should minimise (in width only) at the same time as well. The interaction would look like as if you make a cross bigger or smaller by dragging either the vertical or horizontal line. – user3606781 May 06 '14 at 23:54

0 Answers0