jQuery Dimension Methods part2

Hello guys!

Welcome to our series of jQuery.

In our last segment, of jQuery dimension methods, we covered two methods that are width and height. And today we are going to move further in the same segment, I mean in the same module.

But in today’s segment we are going to see these four methods : inner width, outer width, inner height, outer height.

First comes inner width. Actually what is the inner width? So in jQuery the inner width method returns us the inner width of the very first matched element.

So friends in our…complete jQuery course, remember one thing, either it’s html or css or its dimension related, or its wrapping, unwrapping related, anything it is.

Whenever we get anything, while we get whatever value will return, it will be of the first matched element, always.

But when we set anything, then value will be set for each and every div, each and every element.

So when we do get, the first matched element, but when we set then all the elements. You have to remember this much.

Now here also, what will the inner width method return to us? Inner width of first matched element. What is inner width, actually?

Width is the complete width of our element. But inner width, inner width skips few things.

Like, it’s written here, element without including border and margin. Means if we have given margin in our element, so no margin, margin will get skipped.

That will not be included when we get value with the help of inner width. If we have given a  border also, the border will also not be there.

Means inner width will not include two things that are border and margin. So if we use inner width, we can not do “set with the help of inner width.

Please remember this. Inner width is only used for “get’. That’s why we, to any element, will use a selector and then will use inner width. So we will only get that element's inner width.

Set is not possible with inner width. So if we do a program of it, then we can deeply understand this. Let’s say that what was our program of get width, I copy paste it here.

And I will keep only one div here... We don’t need this id. Here is the div OK. Here will come our inner.. width...  Let’s save the program.

Inner width. Here we saw that borders and margins are not considered. So first I will run this program without border and margin.

So let’s say, I have run this inner width program. Here. OK. So this is our div. On clicking this div we get, div inner width is hundred.

We have used the inner width method here. If you see, in the program we have used the inner width method. But in this program we have only given width, margin is given zero auto.

But let’s say, I remove this zero auto, I do comment as of now and my program, my div will come here.

Now I apply margin here ten pixels and simultaneously apply border, border five pixel solid black. After saving and reloading you can see my div here on screen has moved a little from the left side.

Let’s say I do, margin fifty pixels instead of ten. So you can see that my div has moved fifty pixels from top and fifty pixels from side. And a border has also been added to it.

Now if I add on this click button, go what’s coming div inner width is hundred. Means also it was hundred and now also it’s hundred.

So here which thing of mine is not added, that is margin and that border. And now if in place of inner width I simply apply width method and save it and reload it.

So what I am getting, div inner width is hundred. Means if we use width method or inner width method, we will get the same output in all the cases.

Means inner width actually gives us width only. But with a concept that the inner width border and margin are not covered.

But this…inner width of mine, here I again make it inner width. OK. So what things inner width will return to us? Without border and without margin value.

If I want inner width’s value along with border and margin so what would I do for that. For that outer width, a method named outer width I have to use.

So if I copy the same program here and paste, and replace this inner word with outer. And let’s save this program, by the name outer width.

And now I run this program, so here you can see that my div is generated with some margin and border values.

So now if I click on it, what value I am getting, one, one, zero. Means a value of ten pixels has been added in it. So what is this ten pixel?

So you can see here, I gave the border five pixels, five pixels, means from every direction I gave five pixels.

So from the left side five pixels and from the right side five pixels. That is five plus five ten, so inside my width margin didn’t get considered, margin was not added.

But my border is considered. Means outer width is such a method, that returns us value, the value that we get after width plus border.

So the border will get multiplied two times, from the left and right side border and the value of div.

So left side value plus the width of div, element plus right side border value. After combining these the value that we will get that will give us an outer width function.

So here what you have to remember, whether it’s inner width or outer width, margin won’t be considered in any case.

But if you want to know the total width along with the border, then you have to use the outer width method. Here it is important from an interview perspective also.

Sometimes this question is asked in the interview. If you need inner width, then which method will you use?

And if you only want outer width, then which method will you use? But if this question is given with a twist, interviewers can ask in this way also.

If I am to get the width of the element, or have to calculate width including the border values, which method will I use?

So in this case you need to have clarity of this concept that outer width, along with width includes both sides border and then gives the value.

So here the answer will be outer width.

If the interviewer asks, that I only need the element's width wherein border and margin are not calculated. Then what will be your answer?

So the answer should be inner width. So these are our inner width and outer width, that is whether to consider margin and border or not.

Like inner width and outer width similarly we have inner height and outer height as two other functions.

Inner height works exactly the same as outer sorry inner width does. It’s like inner width, in place  of width height.

So whatever task we have done here related to height, that will remove, sorry done related to width will get removed for height. So I, the program we did for inner width, I copy that and paste here. Here I will do height.

Here also height, here also height, here also height. Let’s save the program. Let’s say I will here do height one fifty and then I run this inner height. So this is my program.

Here margin is added from both the sides. And height is giving us some difference. So if I click here on this button, OK. I have zoomed it a little.

So that we can see it properly. On clicking we get the division's height one fifty. Means it’s the same height that we have passed. So similarly the logic of inner width is applied here as well.

Borders and margins have not been considered. So if we want border and margin to get considered, sorry not the margin, if we want output considering border. So  here I copy my outer width program and paste it here.

And in place of width I will do height, outer height, and I will save this program that is outer height. And we will run this program. So this is my program in which we see some borders.

And here also I do height one fifty pixel, so that it is more visible and we get different output. On clicking I am getting one sixty. Means one sixty that is our height and five from top and five from bottom.

Border’s height. So five pixels this border and then one fifty pixel and this five pixel again. So that is five plus one fifty plus five that is one sixty pixel output.

So this is the outer height. Here we considered four methods : one is inner width, second is inner height, then is outer width and then is outer height.

One more thing comes in our outer ones that is outer width and outer height. And that is these methods include padding. Now what is padding?

So here the outer program, the outer width and the outer height. In the outer width program, here is the div we have made, and this is my program of outer width.

In this program of outer width I will add a little padding.. upto ten pixels…. So you can see my portion has increased a little.

Means my width which is hundred pixel width plus ten pixel width increased from every direction. If we want to know how, I will inspect it. Let's take the left side, here. OK…

So this is our square area, here you can see. OK this is our program, where there, this is our square. Now here if I hover over it, you can see inside the yellow colour is the border, in something orange colour.

Then this green colour portion and then this blue, sky blue coloured my width division. So what does this orange colour portion indicate, our border. Green colour portion indicates our padding portion.

And the blue colour portion indicates our div. When I remove this, padding is given transparency that is why  even after padding, whatever will be the colour of our div will be of padding.

That is why when I hover here I see a green blue colour that is padding and width. But when I take the mouse out, then the complete portion will look sky blue colour or in cyan colour to me.

 But here you have to remember orange colour shows border, green colour shows padded portion, padding, and blue colour will show us div. I have added padding of five pixels.

Here upto ten pixels. So now I calculate its width, outer width so what output I should get? So that is border plus padding, plus the width.

Means here my total width is one double , in it ten, ten, and five, five will be added. Means that is five plus ten, plus hundred, plus ten, plus five. So if after closing I reload, click it what I am getting, earlier we were getting one one zero output.

By considering borders, but now I am getting one, one zero plus both sides with ten pixel padding. Twenty has been added to this. So instead of one ten we are getting one thirty.

So this is our outer width. Here also interview questions can be generated that outer width adds what? Or what it considers while calculating width? So you have to remember the borders and padding.

Second thing now there’s a variation in outer width. Here inside outer width, outer width includes a parameter that names, includes margin. Include margin has two values : true or false.

Means by including margin we have to give outer width or without giving margin. So if in here the inside outer width passes true, and save. So now instead of reloading the program, I click, I am getting one thirty.

Now I reload it and click. I am getting two thirty. So first one thirty and now two thirty, so what is the hundred that got added here?

So you can see we have given a margin from both the sides of fifty pixels. So fifty from the left side and fifty from the right side. So if outer width is to be calculated without including margin, we will pass the parameter false.

And the default parameter is false only. But earlier when we hadn't passed any parameter so we here in output got one thirty. But right now we explicitly passed an extra parameter that is true.

So when we pass true, everything is being calculated: the margin of left and right side, border of left and right side. Padding of the left and right side and width of our division. Means everything.

Margin, border, padding and width all of this. If you want output by including something so you will use the outer width function program.

Here the width is coming twice. So I will remove one width here. OK. Then we have to consider margin, border, padding and everything, so it will  be your outer width.

Exactly this concept will apply to our outer height. So inside this outer height, here along with the margin border, I apply padding of twenty pixels.

And here outer height, by passing true. This is my program outer height after reloading, I click , I am getting three hundred as value. So what is this three hundred?

So if we see in the program, height one fifty, margin from top and bottom fifty plus fifty, border plus five and twenty plus twenty’ s padding.

So our total is one fifty plus hundred, plus ten, plus forty. So here after generating output we will get three hundred. This is being considered as our outer height.

So guys this was our dimension method, dimension method is very important from an interview perspective. Because we get different things inside it, like we can get and set width and height.

So here originates the interview question, to which function is used to get width, which function to ‘set’ width.

Which function to get height, which function to ‘set’ height? Same which function to get internal width and which function to get only internal height?

And if I have to calculate width or height by totalling margin, border, padding, width, then which function? Means many questions can be generated from our today’s segment from an interview perspective.

So today’s segment is very important. So guys I request whatever practicals we have done today, try different variations of it.

The practical that we did try this , you can get its code file from our videos description box. And you also try by yourself some different variations, by changing values.

If you have any queries and comments, then click the discussion button below the video and post there. This way you will be able to connect to fellow learners and discuss the course. Also our team will try to solve your queries.

We will revert all your questions with solutions there. Our next module is jQuery’s form related methods.

So let’s meet in the next segment.

Thank you.