1
00:00:00,060 --> 00:00:06,120
This lesson will do a quick code review we had to set up for our elements, we set up a little bit of

2
00:00:06,120 --> 00:00:10,750
styling, so one so we could see the content as well as hiding the overflow.

3
00:00:11,010 --> 00:00:16,740
We set up a whiteboard and a background color so we can distinguish the containing element from the

4
00:00:16,740 --> 00:00:19,290
rest of our HTML page.

5
00:00:19,650 --> 00:00:27,500
We also set the position of s element to be absolute set, its default left and a top position to zero

6
00:00:27,630 --> 00:00:29,900
and as a width of one hundred percent.

7
00:00:30,060 --> 00:00:35,810
So it takes up hundred percent available space within the container element, setting up some inputs.

8
00:00:36,000 --> 00:00:39,750
We set up an input so that we can adjust the scrolling speed.

9
00:00:39,900 --> 00:00:43,530
We set up an output with element with the class of output.

10
00:00:43,710 --> 00:00:46,400
So this gives us a way to communicate with the user.

11
00:00:46,710 --> 00:00:52,290
We have two different divs here, so we have a main container div and then the content contained within

12
00:00:52,290 --> 00:00:53,250
that main container.

13
00:00:53,400 --> 00:01:00,120
So this gives us the ability to make that main container bigger or smaller in height so we can adjust

14
00:01:00,120 --> 00:01:05,820
it and then this element will automatically adjust and render out to the type.

15
00:01:05,820 --> 00:01:08,640
So scroll within that main container element.

16
00:01:08,850 --> 00:01:14,440
We also added in a button so that we can have some more advanced functionality within our application.

17
00:01:14,760 --> 00:01:21,780
Next, we went through our JavaScript elements and we set them up as objects using the document object

18
00:01:21,780 --> 00:01:27,450
model, selecting them from our HTML and bringing them into our JavaScript so they can make use of it.

19
00:01:27,690 --> 00:01:29,610
We set up some variables.

20
00:01:29,820 --> 00:01:33,180
One of the variables was very large, had a lot of content in it.

21
00:01:33,180 --> 00:01:34,580
So that was our content element.

22
00:01:34,920 --> 00:01:38,100
Next came to adding in our interaction.

23
00:01:38,310 --> 00:01:41,070
So we have several different event listeners that we added in.

24
00:01:41,640 --> 00:01:46,590
The first one is whenever the page loads that we're going to set up our scroll function.

25
00:01:46,590 --> 00:01:53,910
So that's setting up our inner HTML, calculating our height and positioning and setting the default

26
00:01:53,910 --> 00:02:01,260
starting position of our element and then also initiating the interval so that our scrolling starts

27
00:02:01,260 --> 00:02:06,130
and it continuously runs this function every 50 milliseconds.

28
00:02:06,570 --> 00:02:09,000
We also had several different event listeners.

29
00:02:09,240 --> 00:02:10,650
We added one for the button.

30
00:02:10,650 --> 00:02:16,650
So whenever we're clicking the button, we're toggled the variable of scroller versus a boolean value.

31
00:02:16,920 --> 00:02:18,480
So it's either true or false.

32
00:02:18,640 --> 00:02:24,720
And this is a quick and easy way to toggle values boolean values by doing the uptick.

33
00:02:24,740 --> 00:02:32,670
So that's the shift six and also equals sine we also update the entire text of the button to be equal

34
00:02:32,670 --> 00:02:33,150
to.

35
00:02:33,270 --> 00:02:37,860
So whatever the value of scroller is, if it's true, it's going to be start.

36
00:02:38,190 --> 00:02:41,490
If it's if it's false, it's going to be start because we negated it.

37
00:02:41,640 --> 00:02:44,990
And if it's true, it's going to be stop.

38
00:02:45,690 --> 00:02:52,890
We also added event listeners to adjust the scroll speed to invoke this function whenever the user enters

39
00:02:53,130 --> 00:02:55,980
or leaves the container element.

40
00:02:56,220 --> 00:03:02,520
And what happens here is we detect what the mouse type is using a ternary operator.

41
00:03:02,520 --> 00:03:09,150
So we check to see if it's mouse enter and if it is mouse enter, then scroller Gosta false so that

42
00:03:09,150 --> 00:03:10,770
it stops scrolling.

43
00:03:10,780 --> 00:03:13,950
Same thing that we did up here where we set that value to false.

44
00:03:14,190 --> 00:03:18,150
And if it's not mouse enter, then we're going to set it to Truc.

45
00:03:18,150 --> 00:03:19,680
That's the territory operator.

46
00:03:20,010 --> 00:03:24,630
We also update the inner HTML of the output to communicate with the user.

47
00:03:24,930 --> 00:03:26,550
This is our set up function.

48
00:03:26,760 --> 00:03:33,270
So this again where we set up all of the variables and set up positioning and initiate the interval.

49
00:03:33,750 --> 00:03:40,260
And then once we've created that, this is where all our scrolling calculations come in, where we have

50
00:03:40,260 --> 00:03:41,190
our scroll speed.

51
00:03:41,200 --> 00:03:43,260
So we're getting our speed objects.

52
00:03:43,260 --> 00:03:44,460
Remember, that's that input.

53
00:03:44,730 --> 00:03:46,440
We're taking the value of that input.

54
00:03:46,830 --> 00:03:49,260
We're updating the scroller.

55
00:03:49,530 --> 00:03:53,400
So we're check we're checking to see if scroller is true or false.

56
00:03:53,670 --> 00:03:57,660
If it's true that we know we can continue with their scrolling function.

57
00:03:57,900 --> 00:04:01,890
And if it's false, then we're just going to skip over this and we're not going to do anything.

58
00:04:01,890 --> 00:04:07,020
So we're not going to be doing any scrolling, checking to see calculating our current position.

59
00:04:07,020 --> 00:04:11,490
So our current Y position of the element and remember, this one is always moving.

60
00:04:11,490 --> 00:04:13,230
So it's grabbing that style position.

61
00:04:13,440 --> 00:04:15,210
We have to apply parse integer.

62
00:04:15,210 --> 00:04:19,410
Otherwise we end up with a string, with the extension of picks.

63
00:04:20,010 --> 00:04:25,230
We check to see what the position y plus that element height is.

64
00:04:25,230 --> 00:04:31,710
And if it's greater than zero because remember here we're subtracting, then we know we can continuously

65
00:04:31,710 --> 00:04:37,500
subtract and we can adjust the scroll position, the position of the element by the scroll speed.

66
00:04:37,830 --> 00:04:47,220
And if it's less than zero, then we know it's time to update our element, positioning it to dial top

67
00:04:47,370 --> 00:04:51,630
and whatever the container is right to the bottom of that container.

68
00:04:52,140 --> 00:04:58,470
And then we output the scroll speed and the Y position to the person that's viewing into the output

69
00:04:58,470 --> 00:04:58,920
area.

70
00:04:59,340 --> 00:04:59,910
And that's it.

71
00:05:00,100 --> 00:05:05,770
So go ahead and build your own version of this application, try it out for yourself, extend on it,

72
00:05:05,770 --> 00:05:09,940
have some fun with it and get familiar with working with JavaScript.

73
00:05:10,590 --> 00:05:14,810
And so whenever we're on top of the great box, the scroll is going to stop.

74
00:05:15,130 --> 00:05:20,350
We can also start and stop the scroll with the button and we can increase the scroll speed.

75
00:05:20,350 --> 00:05:24,610
And you can see it's getting faster and we can also decrease the scroll speed.

76
00:05:24,790 --> 00:05:27,910
So that makes it slower and that takes effect instantly.