This course is out of date and does not reflect Frontend Masters current standards. We now recommend you take the JavaScript: The Hard Parts course.
Transcript from the "Adding width() and offset methods" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Justin Meyer: I'm going to implement a width function that gives us the width of an element. Given what you know, what the DOM gives you,
>> Justin Meyer: How could I implement this width function? So I'll go back a slide. So I need this dimension here of the available content area.
[00:00:26] I want that to give me that back. How can I implement it?
>> Chris: Client width minus padding.
>> Justin Meyer: Minus padding, exactly right. So what I'm going to do is I'm going to make it, so I'll read the content width value. And I'm subtract out the left padding and the right padding, giving me the actual width of the content area.
[00:00:48] And I'm going to use my CSS as method to do it. So let me kill that.
>> Justin Meyer: So I'm going to read my elements client width by doing this(0).clientWidth.
>> Justin Meyer: And then I want the left padding and the right padding, so I'm gonna go leftPadding =. How can I read the leftPadding?
[00:01:29]
>> Justin Meyer: Anybody, how could I read the leftPadding? It's a CSS value.
>> Chris: [INAUDIBLE] the computed.
>> Justin Meyer: But I use my CSS value
>> Chris: You're right.
>> Justin Meyer: Yes, so I use my CSS method to read the padding-left and I'll also read the rightPadding.
>> Justin Meyer: And then what do I need to do?
[00:02:04]
>> Justin Meyer: By the way, what's your name?
>> Chris: Chris.
>> Justin Meyer: Someone other than Chris [LAUGH], What do I need to do now?
>> Speaker 3: I take the client width minus the leftPadding minus the rightPadding.
>> Justin Meyer: Exactly, now one thing you should be aware of is these things are gonna return.
[00:02:20] leftPadding is gonna be set to something like 10 pixels. What's a good way of converting a number to or, sorry, a string to a number?
>> Speaker 3: parseInt.
>> Justin Meyer: parseInt. So I'm going to return clientWidth- parseInt(leftPadding)- parseInt(rightPadding). Boom, now if I refresh my page, I should be able to get a,
[00:03:05]
>> Justin Meyer: Width of my ul.
>> Justin Meyer: Says 301 pixels. Let's check out what the Inspector gives us, so we can actually look at an element and it will tell us the computer styles. 301, was that what it gave me?
>> Speaker 3: Yeah.
>> Justin Meyer: Awesome, we are collectively geniuses, good job, good doing it.
[00:03:33] So let's do offset that's the next one. So that's the dimensions jQuery gives you all these ways to figure out the dimensions of your page, over your elements. The next thing is where is your element located in the page or relative to other elements. So this shot here means I've scrolled the page down.
[00:04:00] Here's my browser window. It can't show the entire body. Here's the top left corner of the body and I've scrolled down a little bit. Does that make sense? I've scrolled down. So here's the kind of hypothetical of where the top left corner of the body is, but this is the only part I can see in my viewport.
[00:04:18] Now let's say I have a div that's positioned relative right in this location. And I have another div that I'm wanna position relative with in this other element. And it's gonna have a padding, a border, and a margin.
>> Justin Meyer: Now we wanna know where this element is in the page, maybe where it is relative to its parent.
[00:04:48] Let's see what the DOM gives us to know the stuff. So the DOM in every element gives you an offsetTop property and an offsetLeft that tells your distance from your offsetParent. So your offsetParent is not necessarily always your parent element, but it is for this element. Your offsetParent is the first parent element.
[00:05:12] So if you look at an element, start walking up its parent elements. Until you find one that has a position property set to something, like relative, absolute, static, sticky. Basically anything other than position static. That is an element offsetParent. So every elements you know its coordinate from its offsetParent, like this.
[00:05:37] Now if I were to remove position relative on this element. All of a sudden because this is not positioned anymore, its most direct parent, the offsetParent would actually be the HTML element. And these elements offsetTop and offsetLeft would be given relative to the page a whole. So the old way of having to figure out where your element was positioned in the page.
[00:06:05] Was to sum up all your offsetTops and offsetLefts by recursing up each offsetParent until you got to the HTML page. Right, so previously, if offsetParent was still this. We get this offsetTop and offsetLeft. And we'd add that to this elements offsetTop and offsetLeft, which would probably be the its offsetParent, would be the each HTML element.
[00:06:30] So you just keep recursing up adding these numbers together. Fortunately, you don't have to do that anymore. Because elements also now have a getBoundingClientRect method. So you can call on this element getBoundingClientRect and that returns you an object that has a top and left. A top and left dimension that tells you this elements position relative to the viewport, not to the page.
[00:07:01] So here's how far down this element is from the page to figure out where it is. Sorry, to the page. To figure out where this element is relative to the page, how would we do that?
>> Justin Meyer: So I wanna know where this element, I wanna know this dimension from this point to this point here.
[00:07:26]
>> Speaker 4: To keep your eye how far to scroll down?
>> Justin Meyer: Exactly right and I'll show how to do that in a second. Okay, so let's also talk about what jQuery gives us. Jquery gives us a position method. You can call on an element and it will give you the offset.
[00:07:44] Basically, it's just returning an object that has the offsetTop and offsetLeft values. That's jquery's position method. jQuery also has an offset method that gives you the position relative to the page. It gives you an object that has a top and a left that's relative to the page. In my opinion, jQuery named these properties backwards.
[00:08:10] jQueries offsets method should be giving you the position relative to the offsetParent and its position method should be giving you the elements position in the page. It's got it backwards. So let's see how these all look together. So jQuery's offset gives you the position in the page. getBoundingClientRect on an element gives you to position relative to the window.
[00:08:36] And then all of these things give you the position relative to your offsetParent. In terms of performance, you can pretty much go whatever is closest. It's gonna give you the the faster performance. So position offsetLeft an offsetTop are super fast to get kind of this dimension. So sometimes it's okay just to get your dimension relative to your offsetParent.
[00:09:01] In those situations, it's nice to use these methods. If you have really fast, just like a slider or something like that. It's better just to be calculating off of this information. getBoundClientRect is next very fast because that's like now everywhere. And then finally get offset is fast in most browsers because it's just using getBoundingClientRect and just doing a little addition to it.
[00:09:27] But it used to be pretty slow. To get the scroll amount you've scrolled, the approved way apparently is doing the getting the pageYOffset of how far you've scrolled down. So if you do window.pageYOffset, that gives you how far you've scrolled down. I prefer to use scroll top, because that's what other elements your scroll top in your scroll left is how far you've scrolled other elements.
[00:09:57] But this is more widely supported.
>> Justin Meyer: So that's dimension stuff. So let's say we want to implement jQuery's offset. Here's how you might do that. Simply given the first element. You're going to read the position of that element relative to the window or to the viewport. And then you're gonna include how far you've scrolled in each dimension to give the final value of the location in the page.