jQuery CSS Methods part2

We will continue the previous segment in today’s video as well.

So today's video is a continuation to the previous video. What we saw previously let’s continue further in it.

Now comes the second property of our CSS. That is offset property. What is the use of jQuery’s  offset method?

So, “it is used to get the current offset of the first matched element”.

It means if inside my box or inside my DOM, there are multiple elements. So, amongst those numerous elements, whatever the first element will come that will match my selector.

I will get the offset of that first element.

Basically, what is offset? Inside my screen, where my element is placed, it’s position. If you divide our screen into X and Y axis, so what’s it’s position on X axis and what’s its position on Y axis, you will get that.

If we want to know any element’s position on the X axis, we should know its top value, top value, means what its distance from the top value.

If you know any element’s Y axis. Oh! Sorry what I said, I said it in reverse. If we want to know about the X axis, it's the left value.

And if we want to know about the Y axis, we need to know its top value .If the graphs are clear to you, you’ll be able to understand these points easily.

I’ll open the paint. This is our paint, here I take a pen, this is our straight line if we say. This is my Y axis.

This is my X axis. And this is my Y and this is my X. So if I want to move ahead on the X axis, so how much space I have from my left I need to know that.

So, X basically, I, L… I’ll take text from here,(6 seconds pause, typing) the X axis that gives us the left distance. OK, same way if I want to know from Y, what it will get me.

Y axis… that gives me top distance…. OK. So if I move ahead on the X axis, how much distance I have from left I will get that.

Go to top on Y axis, so how much distance I will get from top. So let’s say it, if on the computer screen I define it…. Let’s say this portion, square portion, is my computer’s screen. And if I consider any point here, so at what distance is this point of mine from Y.

Means, how distant it is from top, and at what distance from X, how distant is from left. So that what comes is my coordinates, these two values define my X,Y.

And these X,Y values will return to me if I use this offset method. I am repeating, the offset method will get us two values, return is X and Y value.

X will be our distance from left, Y will be our distance from top. This is our basic understanding. If we want to ‘get’ we won’t pass any perimeter. If we have to do ‘set' we will pass top and left values.

So let’s see its example, for returning the value. Let’s say I am if I make a ‘P’ in my program. So, what was our first program, let’s copy it here.

Will remove this button portion of ours, and here we will update this, offset, offset to get the property. Ok.

Now I save it, this program with the name offset. And I will also run this program. So here, you can see, it is our same program. Like it was looking previously, but in this program we will use the example of offset to get the property.

Means if we click on this ‘P’ of mine, I should get the offset of my ‘P’. So what I will do, simple thing here, above the button click, dollar ‘P’ dot offset, now this…that offset of mine that will be created, this means if I don’t pass the perimeter, my offset would be returned to me.

So let’s say, I store it in a variable called var offset. And now I do alert…distance from left, so here it will come plus my offset dot left.

If you want you can see it here also. Our “Top”, X dot top and our left is defined by X dot left. So offset dot left plus distance from top plus offset dot top, save, reload, click.

So, in alert you can see that at how much distance is our ‘P’ from left. By eight pixels, at eight distances. Not pixel. This shows distance at X axis. So it is eight “distance.

And from top it is one, one six point eighty seven, five zero means it is at this much distance. What this shows. Here is my ‘P’, it is not actually starting here. I

It’s starting here, that is why this white portion if you can see, this white portion is our eight. And this distance from top is one, one, six point eighty seven, is this much my distance.

Now if this offset of ours, means how many pixels above my screen, at what distance above is my ‘p’.

So this is my, you can see how my offset has set. Now how can we set this, means we have got the offset. Now if we have to set the offset, so this is our program. Under this, we will offset one deviation.

So how will we do this? Let’s say, I will go to my Sublime text, now from this program, I will copy and paste this offset program here. And I will remove this button click portion, which means will keep document dot id and button.

This “p” we will also keep.

Here I will write a set. Will save the program, with the name offset underscore set. And now my program is running here. So we haven’t kept anything yet.

But let’s do one thing, we will set the offset of this “p” when my button will click.

So what we will do, we will come to this button click, dollar “p” dot offset. Now here, if you see I have to pass top and left values in the curly brackets.

This is our syntax, top then value comma left then value. Let’s say I here, top some value comma left then value, so if as it is written here, in the same way I pass value, hundred, hundred.

So it should be set between hundred from top and hundred from left, this is what we assume. Let’s save this program and reload. And you can see when I clicked my “p” that was beneath, moved from there. Means hundredth position from top and at hundredth position from here.

If we do this top five hundred, and five hundred from left as well. So what happens, reload, click. So you can see scroll bars got added. It means it got placed somewhere at the bottom or at the left side.

Now what we do, we will define the width of our “p”, width two hundred pixel, margin zero comma auto and…let’s keep this much for now.

So you see here, my, that has been made. And padding upto ten pixels. So this is our one, div, div has become.

And here I will write BR twice, so that it looks proper.  Now I will  move this somewhere down. So let’s say I don’t give, I only give top value three hundred.

And I don’t pass the “left value, save, reload, click. So what happened was that it stopped at a distance from above.

So what we saw here that we can give offset ourselves. If you want to move any element, so if you want to perform that move means from the current position.

Won’t say position because position is a different property, the offset that current is,  moving your element from that offset to any other offset, so you can do that with the help of offset.

Here if I offset the comma left.., give three hundred to let’s see what happens. So it has a little three hundred means it has moved three hundred from here and from there.

So here our ‘p’ is moving. So in total we saw two programs, one to get the offset and other to set the offset.

After offset comes our position property. Position will give us almost the same answer. Position makes you able to retrieve the current position of an element relative to the parent element.

So here, relative to the parent element gets added. Offset will give whatever is the position at X and Y axis.

But that is my current ‘p’, which means whatever is the element at what position it is relative to its parent, it will give that.

Because we know in CSS position property, relative, absolute, fixed, static are there as properties.

And if we have given any element absolute property, in it we have to set top, bottom, left, right.

And that setting of ours is done relative to div. Means whatever will be its parent div relative to that position, are set.

So if you are given a simple div with its absolute position, who will become its parent div? Body tag will become its parent div.

So if we will apply this parent property without parent div, what will we get? Whatever will be the top or left position of the body, we will get that.

But if we have taken some div, parent div, explicitly and inside it have defined an absolute like ‘p’ or something. So we will get values respective to that parent division.

In syntax you can see after the selector simply its position only. In position you can see, we are not doing “set.

I have given two examples here, example one and example two. In both we would not set position anywhere. We will only get positions.

So what is this indication, that with the help of position property we will not be able to set value. We will only be able to get that position, wherever our element is placed at

So for this what we will do, I will copy this offset program of mine and paste it here, I return offset with position. I will remove this portion... Position to get the property.

Above the button click we will get Learn Vern. OK. I save it.., here, position and I run this program... So this is my position’s program, you can see here to get the position, right now I haven’t written anything on click.

But with my ‘p’ tag, I’ll be able to get it’s position. I will generate two programs, one in which what will be my ‘p’ current position, we’ll only check that.

So let’s say without giving any explicit position, if I write alert, first of all I will write var… position equals… to dollar ..‘p’ dot… position.

Alert top (6 seconds pause, typing) position dot top space ( 6 seconds pause, typing) left, position dot left, save , reload, click. So you can see for our ‘p’ hundredth from top, means hundred pixels, means it’s at a hundred distance.

From left it is at eight pixels, eighth position. That’s why this hundred point eighty seven and from left eight we are getting.

So, now what we do, this top and left that we got, it came for this ‘p’, which is simply placed beneath. It’s position is not absolute. Now I give this ‘p’ an absolute position and reload.

You saw that my ‘p’ that was placed here, moved to here, now we will get its position... So you can see it’s still coming at hundred and eight.

Because which div is being considered as our parent tag, that is our body tag. So let’s say I copy this program here and paste and I remove this position property from here, save, reload.

So in this case where the body is our parent div, we are getting hundred and eight in that case that is fine. Now that the new program we are generating there I will keep the position absolute.

But I will add a div before this ‘p’ and inside this div I will place this ‘p’. I will generate a class or id of the div, parent div. And here we will define it, position relative.

And now we are giving this ‘p’ an absolute position. I will give width to parent div something around five hundred pixels, and will also give height around five hundred pixels... Giving background colour so it could get identified.

Will keep it light cyan, let’s save this program by the name position under score two. And then we reload it. We first have to run this program OK.

So this is our program, our parent div looks quite big, so let’s say instead of five hundred we will make it two hundred. As you can see here, the cyan colour is not visible to us. So light grey.

So this is our light grey coloured parent div and this is our child div. Let’s say if I do this click function over child div, so you can see, top left, top is zero and left is also zero.

Because I haven’t defined anything. Whatever is my parent div with respect to, without giving any position I am getting this. Let’s say after giving the absolute position, I give the top hundred pixels.

And bottom I give or I give left hundred pixel, fifty pixel. Save, reload, so my element moved within its parent. You can see this movement happened with respect to this grey division.

Not with respect to the body. So when I click I get top hundred and left fifty. Let’s say I widen it plus… right position… dot right( 7 seconds pause, typing), position dot bottom. Save, reload and click.

So you can see we are getting right and bottom as undefined because we haven’t passed them.

Second thing, first we have to check that, do position property, revert right and bottom values. So if you have seen in the slide, in the slide we have mentioned that this property is only returned by top and left in the pixels.

If in my program I have written right and bottom still they are not my values. Means this position, my this variable that is generated with the help of position method that doesn’t revert me right or bottom.

So that is why only top and left will return in each case. Right and bottom are not part of our position property, position method.

So if I click here I will get top and left. So basically if we have given absolute. So in absolute cases we have to give top and left. This is our program “when a parent div is created with relative and current div is created with absolute position.”

This is our first program in which we haven’t given position property, by default where my element gets set, we get that position property.

So here my two programs get generated first in which we haven’t taken any parent div relative, and here we have generated one parent div, relative and inside it where is the element placed? So position property won’t set, it will only get us the values.

So this is our position property, we saw its example.

So here jQuery's CSS , CSS related methods, CSS, position and offsetting, all these three end here.

We in today’s segment saw, where and how to manipulate CSS, meaning how to change existing CSS. We didn’t see much of it, we either set or “get CSS.

Now how to manipulate CSS that we will see in our next segment, means adding or deleting the class and more.

If you have any question or difficulty in today’s segment, you can tell us that on “FORUMS.LEARNVERN.COM”. Discussion to be added

If you are not able to understand any question, if not getting any program, you can tell that to us too.

Thank you