1 00:00:01,010 --> 00:00:06,320 This lesson, we're going to be setting up the scrolling and the scrolling content within our Element 2 00:00:06,320 --> 00:00:12,500 scroller, let's add in one more event, listener and this event listener is going to listen for whenever 3 00:00:12,500 --> 00:00:16,240 the page loads and whenever the page loads, then we're going to invoke a function. 4 00:00:16,550 --> 00:00:17,750 So there's a number of ways to do that. 5 00:00:17,760 --> 00:00:23,750 We're going to use the window onload method, and this is a default method within the Windows Object 6 00:00:23,990 --> 00:00:26,730 will initiate a function called set up scroll. 7 00:00:26,780 --> 00:00:27,870 Let's build that function. 8 00:00:28,130 --> 00:00:33,080 So setting up that function and this is going to be basically our setting up function, we're going 9 00:00:33,080 --> 00:00:35,270 to need some content in order to add in here. 10 00:00:35,280 --> 00:00:37,150 So let's set up a variable for that. 11 00:00:37,160 --> 00:00:38,980 And this is main content area. 12 00:00:39,020 --> 00:00:41,310 I'm going to copy and paste some content in. 13 00:00:41,330 --> 00:00:48,660 So this is some general lorem ipsum content so I can use that content and paste it into the element. 14 00:00:48,680 --> 00:00:51,730 So that's going to be pasted within that element. 15 00:00:52,190 --> 00:00:58,250 So making a selection of the element, updating the inner HTML and we are going to be using the paragraph 16 00:00:58,250 --> 00:01:01,180 tags, so we're going to paste it in as HTML. 17 00:01:01,760 --> 00:01:06,980 We also want to set up and select our bounding box. 18 00:01:06,980 --> 00:01:08,050 So sure what that is. 19 00:01:08,480 --> 00:01:10,910 So selecting a variable called temp. 20 00:01:11,690 --> 00:01:19,370 Now that we've added in all of that content in there, let's get our bounding client rectangle values 21 00:01:19,670 --> 00:01:20,970 and will console log those. 22 00:01:20,970 --> 00:01:23,150 So we'll take a closer look at what that is. 23 00:01:23,600 --> 00:01:27,260 So opening up our browser, do a quick refresh. 24 00:01:27,530 --> 00:01:31,490 So now we've got our content is placed within that element. 25 00:01:31,670 --> 00:01:38,210 And we also see that we've got this bounding client rectangle value here and this is an object. 26 00:01:38,220 --> 00:01:39,770 So return back as an object. 27 00:01:39,950 --> 00:01:45,260 We see we've got the bottom, we've got the height left, right, top width. 28 00:01:45,440 --> 00:01:52,790 And we need some of these values in order to calculate out where our content is and how much more we 29 00:01:52,790 --> 00:01:54,950 need to scroll it to get to the top of the page. 30 00:01:55,220 --> 00:01:57,640 So we're going to take a closer look at that as well. 31 00:01:58,370 --> 00:02:05,030 So opening up our browser, we're going to take a closer look at what that element get bounding client 32 00:02:05,030 --> 00:02:05,540 does. 33 00:02:06,380 --> 00:02:12,290 So going over to the Mozilla developer network, there's some syntax here, some information as well 34 00:02:12,290 --> 00:02:13,120 as an example. 35 00:02:13,430 --> 00:02:18,590 So you see within the example that it's going to be returning back that same information that we just 36 00:02:18,590 --> 00:02:18,900 saw. 37 00:02:19,100 --> 00:02:25,290 So basically, it allows you to get element information really easily using this one method. 38 00:02:25,850 --> 00:02:30,140 There's also some additional specifications and of course, browser compatibility. 39 00:02:30,380 --> 00:02:34,310 But for the most part, it's pretty good across most browsers. 40 00:02:34,980 --> 00:02:39,020 So let's go back into our application that we're building out. 41 00:02:39,470 --> 00:02:47,060 And now that we've got our height and we've got the height of the element, we can set certain values 42 00:02:47,360 --> 00:02:49,400 so we can take our C element. 43 00:02:49,420 --> 00:02:54,200 So this is the container element selecting our style height. 44 00:02:54,510 --> 00:03:00,920 We're going to adjust the height of the element, using the values that are contained within that temp 45 00:03:00,920 --> 00:03:01,520 object. 46 00:03:02,510 --> 00:03:06,290 And we do have a value of height and we want to make sure that it's pic's. 47 00:03:06,530 --> 00:03:07,940 So you do need to rate the pics. 48 00:03:08,090 --> 00:03:13,440 So that renders out as a string value and that's how you set the style of an element. 49 00:03:13,460 --> 00:03:19,940 We also need to have our top position for the S element. 50 00:03:21,260 --> 00:03:27,590 So doing the same thing where we're getting our style and we're positioning it at the top, and that's 51 00:03:27,590 --> 00:03:30,680 going to also be temp height plus pick. 52 00:03:30,740 --> 00:03:33,020 And lastly, we're going to set an interval. 53 00:03:33,290 --> 00:03:37,700 So that's going to be a variable that we're going to set up so we can call it a scroll interval. 54 00:03:38,450 --> 00:03:46,910 And here, let's set up an interval where we're going to call a function scrolling element and we need 55 00:03:46,910 --> 00:03:49,920 to specify how often we're going to call this function. 56 00:03:50,540 --> 00:03:54,410 So going into our functions, we've got a few functions to create. 57 00:03:54,440 --> 00:03:56,660 So creating our scrolling function. 58 00:03:56,850 --> 00:04:01,010 So this one is going to get invoked on the interval so regularly interval. 59 00:04:02,240 --> 00:04:04,620 And let's also position our elements. 60 00:04:04,640 --> 00:04:08,170 We're going to apply some styling to those elements. 61 00:04:08,210 --> 00:04:11,300 So going into our style sheet area. 62 00:04:13,300 --> 00:04:15,370 We've got our C element. 63 00:04:17,700 --> 00:04:19,380 So mainly so we can see it. 64 00:04:19,410 --> 00:04:22,170 Let's get a background color, so this background. 65 00:04:22,860 --> 00:04:29,130 Also, I'm going to set a default width for it so this can be 400 pics or whatever makes sense for you. 66 00:04:29,700 --> 00:04:32,880 Setting up a font size is always a good idea. 67 00:04:32,890 --> 00:04:34,970 So I'm just going to keep it as one M. 68 00:04:36,390 --> 00:04:39,570 Again, our position, this one, so position at a relative. 69 00:04:41,890 --> 00:04:47,080 And also adding in a border so we can actually see where it is and where it's sitting on the page. 70 00:04:48,770 --> 00:04:51,260 And we're going to hide the overflow. 71 00:04:52,550 --> 00:04:56,870 And also, let's apply to the other element, the element. 72 00:04:58,750 --> 00:05:04,270 Let's apply a position to that so absolute position so we can move it around, we're going to set a 73 00:05:04,270 --> 00:05:13,330 default of zero for the left position, also for the top position, zero, and we'll set a width of 74 00:05:13,330 --> 00:05:14,370 one hundred percent. 75 00:05:15,010 --> 00:05:17,920 And that's the element inside of the C element. 76 00:05:20,490 --> 00:05:25,520 So our main container, that's the element that's contained with inside of it and listening to hash 77 00:05:25,530 --> 00:05:25,870 as well. 78 00:05:26,640 --> 00:05:27,960 So let's see what that looks like. 79 00:05:27,990 --> 00:05:33,830 So now when we look at it, we don't see any text yet, and that's because we've got that overflow hidden. 80 00:05:34,260 --> 00:05:38,970 So if I was to eliminate that, you see all of the text there, it's all sitting there ready to go. 81 00:05:39,150 --> 00:05:43,500 And what's going to happen and what we're going to do in the upcoming lesson is we're going to get all 82 00:05:43,500 --> 00:05:44,430 of this text. 83 00:05:44,700 --> 00:05:49,110 We're going to move it up and move it right to the top of this element. 84 00:05:49,320 --> 00:05:51,960 And then we're going to have it scrolling constantly. 85 00:05:52,200 --> 00:05:55,320 So go ahead and make these adjustments to your application. 86 00:05:55,620 --> 00:06:00,720 And we're going to introduce some more functionality in the upcoming lesson where we can actually make 87 00:06:00,720 --> 00:06:02,660 this content move and scroll. 88 00:06:02,880 --> 00:06:04,530 So set up your content. 89 00:06:04,740 --> 00:06:07,970 You can add in whatever content you want within the application. 90 00:06:08,280 --> 00:06:10,230 Also update some of your styling. 91 00:06:10,710 --> 00:06:14,280 You do need to set position as absolute so that it can move. 92 00:06:14,790 --> 00:06:20,550 Also, it's always a good idea for the border, the background, so that we know where our main container 93 00:06:20,550 --> 00:06:25,370 is and then going down to windows on load. 94 00:06:25,530 --> 00:06:31,540 So whenever the windows loads, whenever the window loads, then we initiate the function set, set 95 00:06:31,560 --> 00:06:32,220 up scroll. 96 00:06:32,400 --> 00:06:34,830 And this is where we add the content to the element. 97 00:06:35,100 --> 00:06:38,150 We get our bounding box of our content. 98 00:06:38,580 --> 00:06:46,140 So that lets us calculate out what the height of the C element is and we don't have to set it at this 99 00:06:46,140 --> 00:06:46,440 height. 100 00:06:46,860 --> 00:06:52,560 It's just something it's just a value that we're going to be making use of as well as our top position 101 00:06:52,770 --> 00:06:54,890 of our content. 102 00:06:54,990 --> 00:07:03,540 So wherever the top is, and this is going to be essentially the height plus the plus picks will equal 103 00:07:03,540 --> 00:07:05,310 wherever the top is needs to be. 104 00:07:05,340 --> 00:07:10,710 And once you've got all of these values in place, so what that is doing is its positioning that text 105 00:07:10,890 --> 00:07:15,090 just below the visible area and it's ready to initiate the scroll. 106 00:07:15,210 --> 00:07:16,590 We've set it up on an interval. 107 00:07:16,860 --> 00:07:24,090 So that's why this function is being invoked every 50 milliseconds and that's why we've got a whole 108 00:07:24,090 --> 00:07:24,700 lot of work. 109 00:07:24,720 --> 00:07:26,190 So go ahead and add this into your project. 110 00:07:26,190 --> 00:07:28,710 And coming up next, we're going to create some more interaction.