You get a bonus - 1 coin for daily activity. Now you have 1 coin

Scaling Elements - Resizable Interaction

Lecture



Interaction Resizable adds manipulators to the element, moving which the user can scale the element by resizing it. Some browsers automatically provide this option for text areas, but the Resizable interaction provides the ability to scale this for any element in the document. An example of using this type of interaction, which is implemented using the resizable () method , is shown below:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery UI</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script> <link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/sunny/jquery-ui.css"> <style type="text/css"> #astor, #lily {text-align: center; width: 150px; float: left; margin: 20px} #astor img, #lily img {display: block; margin: auto} </style> <script type="text/javascript"> $(function() { $('#astor').resizable({ alsoResize: "#astor img" }); }); </script> </head> <body> <div id="astor" class="ui-widget"> <div class="ui-widget-header">Астра</div> <div class="ui-widget-content" style="padding:10px"> <img src="http://professorweb.ru/downloads/jquery/astor.png" /> </div> </div> <div id="lily" class="ui-widget"> <div class="ui-widget-header">Лилия</div> <div class="ui-widget-content" style="padding:10px"> <img src="http://professorweb.ru/downloads/jquery/lily.png" /> </div> </div> </body> </html> Запустить пример 

In this example, two div elements are created, each containing an img element and text. In the script, one of them is selected, and the resizable () method is applied to it (using the parameter alsoResize, which will be described later). The jQuery UI library adds a manipulator to the selected element that allows you to change the vertical and horizontal dimensions of the element, as can be seen in the figure. In the figure, the element is represented with an increased height and a reduced width:

  Scaling Elements - Resizable Interaction

Configuring Resizable Interaction

To configure the Resizable interaction, the properties described in the table below are used. Interaction Resizable depends on the interaction Draggable. This means that in addition to the settings in the table, you can use the Draggable interaction settings, including such as delay, distance, grid, and containment.

Resizable interaction properties
Property Description
alsoResize The selector used to select elements whose dimensions should change simultaneously with the dimensions of the element to which the Resizable interaction is applied. The default value is false, it means the absence of such elements.
aspectRatio If the value of this option is true, the element will be resized with the aspect ratio preserved. The default is true.
autoHide If the value of this option is true, then the manipulators become visible only when the mouse pointer is over the element. The default is false.
ghost If the value of this option is true, then when the element is resized, the translucent contours will be visible, reflecting the new element dimensions. The default is true.
handles Determines where the manipulators will be located. Supported values ​​are shown below.
maxHeight Specifies the maximum height to which the element can be resized. The default value is null, it means no restrictions.
maxWidth Specifies the maximum width to which the element can be resized. The default is null.
minHeight Specifies the minimum height to which the element can be resized.
minWidth Specifies the minimum height to which the element can be resized.

Simultaneous resizing of other elements

In my opinion, the most common option in setting up the Resizable interaction is the alsoResize option. With its help, you can define additional elements whose dimensions will change simultaneously with the size of the element to which the resizable () method has been applied. I use this option mainly to provide synchronous resizing of elements along with the size of their parent elements.

We already used this feature in the previous example, defining the simultaneous resizing of the img and div elements. First of all, let's see what happens if the option withResize is not used. The corresponding code is shown in the example below:

 $(function() { $('#astor').resizable(); }); 

If the alsoResize option is not used, only the dimensions of the div element are changed. The dimensions of the elements contained in it remain unchanged. What happens when this is shown in the figure:

  Scaling Elements - Resizable Interaction

Sometimes this is exactly the result that I need to get, but personally I use the option alsoResize in almost all cases of using Resizable interactions. In this parameter, I like the fact that the selection of suitable elements is not limited to the contents of the element whose dimensions change. With this option, you can specify any other element, as shown in the example below:

 $(function() { $('#astor').resizable({ alsoResize: "img, #lily" }); }); 

In this scenario, the selection of elements is expanded to include other div and img elements. Thus, when resizing a single div element, jQuery UI will resize four elements at once. The result is shown in the picture:

  Scaling Elements - Resizable Interaction

Restriction of permissible limits for resizing elements

You can limit the resizing limits of scalable elements by using the maxHeight, maxWidth, minHeight, and minWidth options. The values ​​of these options can be numbers expressing the number of pixels, or null. An example of using these settings is shown below:

 $(function() { $('#astor').resizable({ alsoResize: "#astor img", maxWidth: 200, maxHeight: 150 }); }); 

The default setting for minHeight and minWidth is 10 pixels. With smaller values, jQuery UI will not be able to display the handles, which means that the user will not be able to increase the size of the element again. Therefore, lower values ​​should be used with caution.

Manipulator placement

Using the handles option, you can determine which edges and corners are allowed to move to resize the element. As the value of this option, you can specify all (all edges and corners are moved) or any combination of compass points (n, e, s, w, ne, se, nw, sw) defining individual edges and corners.

You can specify multiple values ​​separated by commas. The default value is e, s, se, which means that the lower right corner (se), as well as the right (e) and lower (s) edge will be moved. The diagonal movement manipulator is displayed only in the lower right corner and only if the value of the handles option contains se. When you hover the mouse pointer over other edges or corners, the appearance of the pointer will change, displaying the possible directions of movement of this edge or fragile.

An example of using the handles option is shown below:

 $(function() { $('#astor').resizable({ alsoResize: "#astor img" }); $('#lily').resizable({ alsoResize: "#lily img", handles: "n, s, e, w" }); }); 

In this scenario, a Resizable interaction is applied to both div elements, and for one of them a non-standard set of manipulators is defined:

  Scaling Elements - Resizable Interaction

Comments


To leave a comment
If you have any suggestion, idea, thanks or comment, feel free to write. We really value feedback and are glad to hear your opinion.
To reply

Scripting client side JavaScript, jqvery, BackBone

Terms: Scripting client side JavaScript, jqvery, BackBone