Introduction to the resizable with default functionality.

Kunal Asudani
A free video tutorial from Kunal Asudani
Website developer and Bestselling Instructor at Udemy.
3.1 instructor rating • 4 courses • 5,241 students

Learn more from the full course

The Complete jQuery Bootcamp : Build 20 Real Projects!

Master jQuery with the most comprehensive course! Projects , web animation , interface design , app design using jQuery.

26:29:11 of on-demand video • Updated November 2019

  • Go from a total beginner to an advanced jQuery developer.
  • Understand basic and advanced jQuery concepts : selectors , events , effects , using with ajax , traversing jQuery.
  • Understand the working of jQuery behind the scenes.
  • Gain a deep understanding of each topic with a programming example used in projects.
  • Explore how attractive interface can be designed using jQuery UI.
  • Complete Hands on to Interactions : Drag and drop , Resize , Select and Sort functionalities.
  • Practical implementation of Widgets in UI : Accordion , Date picker , Menu , Tool tip and many more.
  • Understand how mobile apps can be designed using jQuery Mobile.
  • Explore more about jQuery mobile by creating multiple app pages and connecting them.
  • Hands on to the functionalities : Adding Buttons , Icons , POPUPS , Toolbars , Panels and many more.
  • Get friendly support on any problem in less than 12 hours.
  • A certificate of completion at the end.
English [Auto] Hello and welcome everyone. So now after completing the two sections which are the Greger will end the drop because we are moving on to our third section. So the third section comprises of the resizable functionality so not friends. I'm very sure that you are familiar with the resizable functionality the zooming part and many more things. So now in this section we are going through the different actions and operations that are to be performed on the resettable functionality using D'Qwell anyway. So a little introduction to the resizable. So Jake where are you where you say XML method is used to resize any element. It simplifies the method of resizing of elements and reduces time and lot of courting. This matter can be used in two forms. So this index is as follows. Dollar select a comic on death's door. Resizable comma options. So here in the breaker the options are the in the save the dollar select the combo contacts resizable action scummer parameters so the matters are the same only difference is pretty sizable. Now starting with the first method the resizable option method specifies that you can resize any given element here. The pattern is an object that specifies a behavior of the elements involved when it is asing. So the here's a syntax Dola select a comma context resizable which we have learned in the last PBT. Now for more options we can include dollar select a comma context. Dirk resizable observation. Putting a lot in between value and comma option to put a colon and well do in this way we can use any number of values with an options. Now here are the list of options which we are going to implement in our programs for as well. So any made if you set this option to it enables a visual effect during re-assessing when the mouse button is released. The default value is false. False means that it will have no effect. So anyway it is an option which can be used in the resizable in which we are going to use an app for the programs. Now here is the second option cost. So if you set this option go to a semitransparent helper element is shown for resizing. So as the name suggests a ghost is Sherdog. So the semitransparent helper element for these as this goes item will be deleted when the mouse is released. By default its value is false. Now delete this option is used to set tolerance or delay in milliseconds after that resetting or displacement will begin. By default its value is zero. So many times we have observed that after some accident we want the element do what it. So in this way we can use the delay option. Now that distance this option it specifies that the resizing will start or leave when the mouse moves a distance which is in pixels. By default it will lose when so after dragging to one pixel the elementis start resizing this can help prevent unintended resizing. When clicking on an element which means the element will be the same in the way you would auto hide it which means the automatic hiding option. So this option is used to hide the magnification icon or handles except when the mouse is over the item by default its values for as many times you have observed that whenever you click any of the corners of element it makes the sign of Arrow which means that the element can be resized to or we can use or towhead method. So now let's use the resizable functionality in the query you are bypassing Loperamide to it. So means this is the basic program of the equerry where it says it will matter. So we are moving on to our previous software to perform this using a program. So no offense here we are again on the same platform on which we have performed and disfunctions in operations. So now we can provide a data here which means basic resizable program. This is a title you can use any of this now. In the body part we are going to use some classes and IDs. So do an idea again. Now friends in this program I will show you the concept of IDs and class very clearly that how we can use the IDs in class since it is a concept of C as is. But I will make it clear in this course. So the ID I am using resizable. Let's see. And the class as usual. We use UI. Visit and content in this way and I am closing this here. So now again we are creating a ID but we are reading each tree. All we can say to now edge to is the heading tag. They are all six headings with just as well as two as three four five and six. These are the heading attributes of estimate. If you are well known to HDMI then you can easily understand. And if not then I will make you in dissent in this lecture. So now we can also include a class in this so we are using the class UI wizard and header which means in this part we are including some text. So let's take a text here. We can also use in this way or we can just read the text here. So I am telling you to is like please drag me to my address and I get resized. This is the one way in which we can write in as DML. And if you want to see that another way which is the same as we are using this spend so we can do in this will ex-Penn and we can use. So please drag me and I will get resized in this way. So we are closing a span here and very close to here. In this way we can write. So now we completed about all the extremal part which we have to use for this program so I am just reducing all the spaces without extra. And now we are moving on to the style part. Now here you have to look very carefully because I am dealing with some new concept here. How do you use the styles for C Ss in the class in the form. So C. Firstly I am making the use of you I've heard of. Let's say I am making the use of U.S. project header which means I am using a class so I have to put a dart here. So UI visit and header. So I am digging that as 150 pixel but we can dig 50 pixels for making it more convenient because when we have we will be more. Now we can use font size we can use the foreign family as any one you like and we can use the font sizes 24 pixels. We can use the font weight we can use a format where it is 200 and we can use Bordeaux. So Bardot will be solid when pixel and black. So to use a black border we have to do it this way. So now this is all about the wigs that had a part now in the same way we can use a second class says this. There is ID too we can use the ideas resizable and we can use a class so we can use the class or the board. So in this way I am using d'arte UI Whitsitt and content in this way. Now again I am doing well with 90 pixel and am taking the background background I can take color and the background color will be a light. So I can use this when I can alter the background in this when it will look good. So big grown and I can take a dog here which means this or let's light one here too so we can use this one. Ladylove. Now in this way we can use the border to make it more amazing. Borda will be solid one pixel or say two pixels and the color will be the swin. So that was sufficient for the. But now we can also use Hesh resizable. So if we are using hashtags as well then we have to remove the word from here because there is a part well as just it Weirton height itself. So we have to import it here and we have to remove it from here. So in this way we have to remove this and the resizable part we can include that. But this is the part. But just to be resized so we can dig undried pixel height we can again take hundred pixel and we can take the padding. So zero point 0.5 m which is a default. Now putting a semicolon and closing this. So now we are done with all the scissors part. So reducing all the spaces between them to make them understandability very simple. Now we are digging this part. So since we passing no parameter to it this program will be very easy for the devil to part in this way. Now we are using the function as EV-DO will do that we have to do it in all steps. So function and we are opening this brace. So now we are playing the resizable functionality. So again a dollar sign and we are applying using ID. So if we are using ID then we have to put the Hesher. So Hesh resizable You can also use Galarza no matter Dorte resizable. And since we are passing Loperamide do it so it will go you dislike. And in this way we can use this functionality. Putting a semicolon and then reducing all this business and saving it and going for the output. It's an offense where you can observe that which is very much so we can make the changes this so here I have changed the size 2 pixels the form say certain pixels and I have removed the front of it. So now I'm seeing it again and going for the output. So now you can AABs of this a sign here for resizable. So when I click on it and does it start resizing you can observe it if you want to reset it from here. You can also click on this down if you want to do this resizing. You can also take it you can also do this. You can do anything that you want to resize says you can do this like diagonally resizing. You can do anything any part of the same thing here. So friends I am sure that you understood the resizable functionality by passing no parameters to it and you enjoyed learning that he said there was functionality and the concept of how we can use the words that tired of reading glasses and the IDs together. So France will soon meet and on the next leg to get some new concept. Thank you for watching this lecture.