1
00:00:00,600 --> 00:00:02,070
A lot of JavaScript and

2
00:00:02,070 --> 00:00:07,160
jQuery programming involves responding
to user interactions on a page.

3
00:00:07,160 --> 00:00:10,770
These interactions like clicking
on a link, typing into a form, or

4
00:00:10,770 --> 00:00:14,100
mousing over a photo, are called events.

5
00:00:14,100 --> 00:00:18,470
You can attach programming to events
to add interactivity to a web page.

6
00:00:18,470 --> 00:00:20,930
For example,
when a visitor clicks on an image

7
00:00:20,930 --> 00:00:24,240
you can make a larger version of
that image pop open on the page.

8
00:00:24,240 --> 00:00:26,950
The event is the click and

9
00:00:26,950 --> 00:00:31,110
the programming making the larger image
pop up is the response to that event.

10
00:00:32,330 --> 00:00:35,710
We're used to events that are triggered
by a user, like clicking a link or

11
00:00:35,710 --> 00:00:37,920
pressing a key on a keyboard, but

12
00:00:37,920 --> 00:00:41,240
an event is really just something
that happens at a specific time.

13
00:00:42,290 --> 00:00:44,460
To make their plugins more flexible and

14
00:00:44,460 --> 00:00:48,850
useful many plugin creators will
add events to their plugins.

15
00:00:48,850 --> 00:00:51,520
These usually aren't events
triggered by the user.

16
00:00:51,520 --> 00:00:56,240
There's simply something that happens at
a particular point when the plugin runs.

17
00:00:56,240 --> 00:01:00,940
For example, the sticky nav plugin
has an event named sticky start.

18
00:01:00,940 --> 00:01:05,390
The sticky start event is triggered
when the element on the page sticks.

19
00:01:05,390 --> 00:01:08,510
We added the sticky nav plugin
to our navigation bar so

20
00:01:08,510 --> 00:01:12,510
that when the user scrolled
down the navigation bar stuck.

21
00:01:12,510 --> 00:01:15,710
The moment that plugin sticks
the element to the page,

22
00:01:15,710 --> 00:01:17,880
the sticky start event is triggered.

23
00:01:18,880 --> 00:01:21,460
And, you can add your own
programming when that happens.

24
00:01:21,460 --> 00:01:25,970
For example, we could change the HTML
of the navigation bar when it sticks.

25
00:01:25,970 --> 00:01:28,800
Add another button for
example, or change the logo.

26
00:01:28,800 --> 00:01:29,810
Let's see how this works.

27
00:01:31,590 --> 00:01:36,620
We saw in the last video that you could
control the look of a stuck page element,

28
00:01:36,620 --> 00:01:39,640
like our navigation bar, by using CSS.

29
00:01:39,640 --> 00:01:43,160
We created a style that
used the is sticky class,

30
00:01:43,160 --> 00:01:48,040
that's added by the plug in when the page
element is fixed to the top of the page.

31
00:01:48,040 --> 00:01:52,090
But, you can also make your own
programming run when an element sticks,

32
00:01:52,090 --> 00:01:53,920
and when it's unstuck.

33
00:01:53,920 --> 00:01:57,550
If you want to follow along,
launch the workspace on this page, or

34
00:01:57,550 --> 00:01:59,920
download the project files for
this course.

35
00:01:59,920 --> 00:02:04,240
To add our own programming in response
to events from the Sticky.JS plugin,

36
00:02:04,240 --> 00:02:08,210
we take advantage of jQuery's
own Event Handling system.

37
00:02:08,210 --> 00:02:12,120
If you don't understand how events work
in jQuery see the teacher's notes for

38
00:02:12,120 --> 00:02:13,720
more information.

39
00:02:13,720 --> 00:02:15,190
Now let's start with the basics.

40
00:02:15,190 --> 00:02:19,280
We first select the element that has
the sticky plugin applied to it.

41
00:02:21,990 --> 00:02:24,370
We then call the jQuery on method.

42
00:02:26,450 --> 00:02:30,400
This method is used to apply
programming in response to events.

43
00:02:30,400 --> 00:02:33,020
Like a mouse click or scrolling.

44
00:02:33,020 --> 00:02:35,199
This method takes two arguments.

45
00:02:35,199 --> 00:02:39,230
The first is a string which
is the name of the event.

46
00:02:39,230 --> 00:02:42,770
For example, for
a mouse click the event is called click.

47
00:02:44,470 --> 00:02:47,340
Plugin programmers can add
their own custom events to

48
00:02:47,340 --> 00:02:49,440
jQuery's event model as well.

49
00:02:49,440 --> 00:02:53,438
In the case of the Sticky.JS plugin,
there's a sticky-start event.

50
00:02:55,841 --> 00:02:58,550
This is the first argument.

51
00:02:58,550 --> 00:03:01,600
The second is an anonymous function.

52
00:03:01,600 --> 00:03:05,020
It's called anonymous,
because you don't give it a name.

53
00:03:05,020 --> 00:03:06,371
The basic structure looks like this.

54
00:03:09,091 --> 00:03:13,594
Any code you place inside the curly braces
here will run whenever the header element

55
00:03:13,594 --> 00:03:16,070
sticks to the top of the window.

56
00:03:16,070 --> 00:03:18,480
You can literally write
anything you'd like.

57
00:03:18,480 --> 00:03:21,990
You could output to the console,
you could send off an Ajax request, or

58
00:03:21,990 --> 00:03:24,600
simply change the content on the page.

59
00:03:24,600 --> 00:03:28,440
In this case, let's take this tagline,
We Build Apps, and

60
00:03:28,440 --> 00:03:31,610
change it to, We Build Great Apps,
when the header sticks.

61
00:03:33,110 --> 00:03:34,371
Let's look at the HTML for this.

62
00:03:38,241 --> 00:03:42,350
Okay, here's the header,
and here's that tagline.

63
00:03:43,770 --> 00:03:47,340
The H1 tag here has a class
named description so

64
00:03:47,340 --> 00:03:52,280
we can use jQuery to select that class and
that tag and change its text.

65
00:03:53,320 --> 00:03:54,461
First, let's select that element.

66
00:03:57,641 --> 00:03:59,682
After jQuery selects it,

67
00:03:59,682 --> 00:04:04,421
we can use the HTML method to
change the HTML inside that tag.

68
00:04:08,381 --> 00:04:14,220
JQuery's HTML method takes a string,
which can include HTML tags.

69
00:04:14,220 --> 00:04:17,651
jQuery then replaces whatever was in
that element with this new string.

70
00:04:19,471 --> 00:04:22,831
I'll save the files, and
preview the workspace.

71
00:04:25,621 --> 00:04:30,025
Cool, the text changes when
I scroll down the page.

72
00:04:30,025 --> 00:04:33,040
Bu, when I scroll back to the top,
the text doesn't change.

73
00:04:34,640 --> 00:04:35,140
To do that,

74
00:04:35,140 --> 00:04:39,364
we need to use the second custom event
supplied by the Sticky.js plugin.

75
00:04:39,364 --> 00:04:43,769
It's called sticky-end,
that's sticky hyphen end.

76
00:04:45,200 --> 00:04:49,430
Now, why don't you pause the video right
here, and try to make this work yourself?

77
00:04:49,430 --> 00:04:54,750
Select the page element, use the On
method, and the sticky-end event,

78
00:04:54,750 --> 00:04:58,130
to change the HTML back to just,
We Build Apps.

79
00:04:58,130 --> 00:04:59,781
Go ahead, pause the video and
give it a try.

80
00:05:03,001 --> 00:05:05,130
Did you give it a try?

81
00:05:05,130 --> 00:05:07,620
Well, it's nearly the same
code we wrote earlier.

82
00:05:07,620 --> 00:05:13,890
In fact, I can just select this,
copy it, and paste the copy.

83
00:05:13,890 --> 00:05:18,350
All I need to do is change
sticky start to sticky end.

84
00:05:18,350 --> 00:05:20,220
Then, I'll get rid of these strong tags,
so

85
00:05:20,220 --> 00:05:24,240
it goes back to the original sentence,
and we can check it out.

86
00:05:24,240 --> 00:05:25,446
Let's save the files and preview it.

87
00:05:27,661 --> 00:05:30,200
Plugin events are cool.

88
00:05:30,200 --> 00:05:34,220
They let you customize what happens
when a plugin kicks into action.

89
00:05:34,220 --> 00:05:36,010
Not all plugins have events.

90
00:05:36,010 --> 00:05:39,030
And you should realize that
a plugin event is just

91
00:05:39,030 --> 00:05:41,390
the creation of the plugin's author.

92
00:05:41,390 --> 00:05:44,000
They aren't just magically
part of the plugin.

93
00:05:44,000 --> 00:05:45,980
A plugin creator adds events.

94
00:05:47,010 --> 00:05:50,020
In the next video,
I'll give you a challenge to practice with

95
00:05:50,020 --> 00:05:52,650
the events supplied by
the sticky JS plugin.