jQuery Dimension Methods part1

Hello guys, welcome to our series jQuery. In the last segment, we saw how to manipulate CSS with the help of jQuery. That is what we covered in the last segment.

Let’s move on with our segment. our today's segment is about jQuery Dimensions Method, basically dimension means like x and y, the coordinates we refer to as dimension sometimes.

2D, 3D etc are dimensions but if we talk about in terms of jQuery, then the dimensions are related to width and height. because in the x axis, width is there and when we talk about y axis, the vertical one, it gives us height.

Means if we compare the word dimension with x and y, then in the x axis, let’s say any division, input field or any control or any element of HTML, then what we get on the x axis is that size or length gives us width.

And when we check on y axis or vertical one then what we get is height.

Therefore, the width and height we get, width and height is on the x and y axis that is 2 dimensional and as a result, this method is called the dimension method.

I am repeating why we call it the dimension method because it returns the width and height.

So, let’s look at the next slide, except width and height, there are also few methods like inner width, inner height, outer width, and outer height in jQuery dimension methods. So, we will look at six methods in this video.

Basically, if we look, all the methods are related to width and height. By seeing this, you must have gotten an idea what it all returns. So, if we look from the broadness, it returns width and height in all.

We will come to know what inner width and outer width is when we will understand along with the method, so now let’s start with the width.

The first method is the width. What does it return basically? So width, whatever element we select that means whatever our selector is there that selector or element width will be returned to us.

Means all of the jQuery methods we have seen in HTML, CSS, we have seen two types of methods in it.

The first method was to get the value and the second had the same name but it sets the value. In the same way, the width method is also the same.

Under the parenthesis without parameters, if we execute the method, then the current division or element that we had passed in the selector it will get the width of it means it will tell us how much width is there.

If we pass any value as a parameter so whatever value we have given in the selector that value will be set.

So basically, there are two tasks, the first one is to get width, meaning if we have passed without a parameter, then it will return the element width and on the other hand for to set width, it will set the value for so and so which we have passed it.

So basically, width helps for both get and set. It is a very simple method.

Here, the most important thing to remember is, if you have normal written, let say selector, if in your DOM has one or more div then what will get method do meaning get method of width what will do here is whatever the first matching div tag or the first matching selector is present, then it will return the value.

For example, if we have taken more than one div, suppose five div and here inside selector I will write as dollar div dot width then whatever the first div will be it will get the value of it.

Listen carefully, the first div value would get. But in the case of a set, it's otherwise. If you write dot width to any div then all the divs in that DOM, all the values would be set.

Means if we are performing get, so whatever the first matched element would be focus on first matched number of elements from that first element's width I'll get. But if you are performing a set, then all the divs value would get set.

Let see with an example, the first example would be to get div width.

So for that firstly, we will open the sublime text. In the sublime text after setting HTML… example.. width…and here we will ,take get…. We will add here a script where we will write our script.

And now we will add a library which we would do every time for each program to run the jQuery.

So, we have successfully added the jQuery Library and now here we will write the script.

In the body, we will give our example heading. So here I'll take” h one” tag and here an “example to get width using width…” and now save the program.

Because it is to get the width. So, I will give the name “to get underscore width”. And now basically what we are going to do is what we want to do is get div width.

So, what we will do is I will generate a div by taking div here to div hashtag id…. equal to id one this name we will give and now inside this we won't add any element but to this we will give style “hashtag id one”

And in this I will add width… let say hundred pixel, height… hundred pixel, ….background colour…. cyan. These three things I have added.

Then this div will look in cyan colour. And finally, I will save the program and run the program.

This is our program. Every program we align it to the centre so that's why “body…. text align center” and here margin zero auto. Save and reload…

So here it is in the centre now. So, as you can see, I have made these divs and I have assigned height and width both hundred and hundred pixels.

So basically, with the help of the width method I will know how to get width from the same.

 So, what I will do is I will add a button right here. So we will add a button here as Every time on button click we fire an event so that is click….

Here is our id BTN one ….you can take any id not because I have taken BTN one so you will also take the same dollar document dot ready….

In this will come our function…. button one…. dot…. function…..

If our button is clicked once, then we have to get the width of this division.This is a very simple program. Dollar here our id that is of div one we can pass that.. hashtag id one… dot width…

This function will return the get width. Where do we have to make this width visible? So lets say variable… value …equal to whatever our value is and we will make it alert so “alert… div value… is value.” …

Now we will save and reload the program. You can see the button over here.

We will shift the button below this… And here br tag….. We have done it because our program looks proper.

So here the button and div have been placed correctly and now I will click. So whenever I click, it shows an alert saying div value is hundred means the div width is getting to us.

So earlier we have seen in the slide that whenever we get with the help of width, the first matching div value will be returned.

So let say, instead of id one, I will give a div and now I will reload it.

After clicking, the very first div value is getting to me. Now again, here I will add a new div in which… style…  width… equal to… where we can add… two hundred  pixels, height two hundred pixels…and background colour as light-blue… and save.

So, as you can see there are two divs, the big one and the small one. We have kept two divs. And if now I click on the click button, then which div width I get is what we will see now.

So, I will click, then it will show that the div value is two hundred. Ok.

Again, I will click and again two hundred values are showing which indicates that if we have placed one or more div’s in a program then which div’s value will we get is the very first div occurring.

In my current program there are two divs then out that whichever is my first div its value will be returned that is two hundred. So, this is the get method.

So, let say with the help of width method, how to set the value of any div using the same method? So how will we do that?

So, the same program I will copy and paste over here. And here Example to set width we will do.

As of now, I will remove the variable. We will keep id as it is. And Example to set width.

And here we took div, we will keep it as it is. And if I save this program as “set underscore… width “and run the program.

So now exactly the same program is visible. In this second sorry the first div i will give margin zero.. auto …so that it also comes to centre. Here both the div’s are centred now.

Here one BR tag and this is our both divs.

Now what I want to do is whenever I click this button, a particular width value should be set for both.

Currently, the first div’s width value is two hundred pixels and the second div’s width value is  hundred pixels.

So, what I will do is I will do something so that both div’s widths are updated to fifty pixels.

 So, in that case what i have to do is Dollar div width fifty fifty pixel fifty only. I have passed the value.

And now if the save and reload and run the program and click on the button then what happens?

My both the div’s height remains the same i.e. First div two hundred and second div  hundred.

But the width decreased to fifty pixels. It means whenever we use the width method to get value, then whatever the first matching div is there, the width will be returned to us.

 But for the set operation, then in our document inside the DOM how many numbers of divs are available, those all width values will be updated. So, in the set case, the first matching scenario does not exist but all the div’s values will be updated like this one.

So this is our width. After width here comes height. The concept of height is exactly the same as the concept of width.

What does height method to do? Height method returns the very first matching div or any element its height will be returned to us.

Like it is written here "selector height" And if we pass the value in that method that means in our DOM whatever elements that are divs are there or any input control its height will be set.

 Means whichever width related things are done by width method, exactly the same way does the height method for height related things.

So the program we have written for the width, we will copy the same and paste it here. Here instead of width, we will write height and here our method will be updated to height.

All of the rest things I am keeping as it is except the labels I'll do it height. Saving the program… get….height and now I will run the program.

So this is our program, same like we made it there but in this case we will get height. What we have alert here is div value is, value won't come here… height will come.

We will change this in the previous program too. So I'll save this in” get height” And now again save the program and reload it.

And after clicking here div height is two hundred. But which div? The only very first matching div’s height.

So here the first matching div is light blue in color. So light blue color height is returning the value that is two hundred pixels.

Exactly the width does, the same height method does too but it does for height related things height method.

Now If we want to set the height, the same program we wrote for width we will write here only change we have to do is keywords. (7 seconds pause,typing)

Here heights… and here also… height. …Saving the program “set underscore height” and now I will run the program.

This is our program and now if I click the button then both the height should decrease it to fifty pixels. Click.

Both the heights are now decreased to fifty pixels. Now, again I will repeat. On button click height of both the div will decrease So this is reduced.

So this was a program related to width and height.

How we can manipulate both height and width with the help of get and set operations.

But the method name will be the same, just the difference is if we want to get then we will not pass any parameter or value and if we want to set, the values or parameter will be passed by us.

So this was the set and get for width and height method. For this segment, we will keep it till width and height.

After this segment we will continue the same dimension methods but in that we will take the rest of means that whatever method is related to inner or outer we will cover in the next segment.

Thank you!