Preview
Video Player
00:00
00:00
Understanding Plugin Events
5:53To make their plugin's more flexible and useful, many plugin creators will add "events" to their plugins. You can add your own programming to respond to these events to make the plugin even more useful
A lot of JavaScript and
0:00
jQuery programming involves responding
to user interactions on a page.
0:02
These interactions like clicking
on a link, typing into a form, or
0:07
mousing over a photo, are called events.
0:10
You can attach programming to events
to add interactivity to a web page.
0:14
For example,
when a visitor clicks on an image
0:18
you can make a larger version of
that image pop open on the page.
0:20
The event is the click and
0:24
the programming making the larger image
pop up is the response to that event.
0:26
We're used to events that are triggered
by a user, like clicking a link or
0:32
pressing a key on a keyboard, but
0:35
an event is really just something
that happens at a specific time.
0:37
To make their plugins more flexible and
0:42
useful many plugin creators will
add events to their plugins.
0:44
These usually aren't events
triggered by the user.
0:48
There's simply something that happens at
a particular point when the plugin runs.
0:51
For example, the sticky nav plugin
has an event named sticky start.
0:56
The sticky start event is triggered
when the element on the page sticks.
1:00
We added the sticky nav plugin
to our navigation bar so
1:05
that when the user scrolled
down the navigation bar stuck.
1:08
The moment that plugin sticks
the element to the page,
1:12
the sticky start event is triggered.
1:15
And, you can add your own
programming when that happens.
1:18
For example, we could change the HTML
of the navigation bar when it sticks.
1:21
Add another button for
example, or change the logo.
1:25
Let's see how this works.
1:28
We saw in the last video that you could
control the look of a stuck page element,
1:31
like our navigation bar, by using CSS.
1:36
We created a style that
used the is sticky class,
1:39
that's added by the plug in when the page
element is fixed to the top of the page.
1:43
But, you can also make your own
programming run when an element sticks,
1:48
and when it's unstuck.
1:52
If you want to follow along,
launch the workspace on this page, or
1:53
download the project files for
this course.
1:57
To add our own programming in response
to events from the Sticky.JS plugin,
1:59
we take advantage of jQuery's
own Event Handling system.
2:04
If you don't understand how events work
in jQuery see the teacher's notes for
2:08
more information.
2:12
Now let's start with the basics.
2:13
We first select the element that has
the sticky plugin applied to it.
2:15
We then call the jQuery on method.
2:21
This method is used to apply
programming in response to events.
2:26
Like a mouse click or scrolling.
2:30
This method takes two arguments.
2:33
The first is a string which
is the name of the event.
2:35
For example, for
a mouse click the event is called click.
2:39
Plugin programmers can add
their own custom events to
2:44
jQuery's event model as well.
2:47
In the case of the Sticky.JS plugin,
there's a sticky-start event.
2:49
This is the first argument.
2:55
The second is an anonymous function.
2:58
It's called anonymous,
because you don't give it a name.
3:01
The basic structure looks like this.
3:05
Any code you place inside the curly braces
here will run whenever the header element
3:09
sticks to the top of the window.
3:13
You can literally write
anything you'd like.
3:16
You could output to the console,
you could send off an Ajax request, or
3:18
simply change the content on the page.
3:21
In this case, let's take this tagline,
We Build Apps, and
3:24
change it to, We Build Great Apps,
when the header sticks.
3:28
Let's look at the HTML for this.
3:33
Okay, here's the header,
and here's that tagline.
3:38
The H1 tag here has a class
named description so
3:43
we can use jQuery to select that class and
that tag and change its text.
3:47
First, let's select that element.
3:53
After jQuery selects it,
3:57
we can use the HTML method to
change the HTML inside that tag.
3:59
JQuery's HTML method takes a string,
which can include HTML tags.
4:08
jQuery then replaces whatever was in
that element with this new string.
4:14
I'll save the files, and
preview the workspace.
4:19
Cool, the text changes when
I scroll down the page.
4:25
Bu, when I scroll back to the top,
the text doesn't change.
4:30
To do that,
4:34
we need to use the second custom event
supplied by the Sticky.js plugin.
4:35
It's called sticky-end,
that's sticky hyphen end.
4:39
Now, why don't you pause the video right
here, and try to make this work yourself?
4:45
Select the page element, use the On
method, and the sticky-end event,
4:49
to change the HTML back to just,
We Build Apps.
4:54
Go ahead, pause the video and
give it a try.
4:58
Did you give it a try?
5:03
Well, it's nearly the same
code we wrote earlier.
5:05
In fact, I can just select this,
copy it, and paste the copy.
5:07
All I need to do is change
sticky start to sticky end.
5:13
Then, I'll get rid of these strong tags,
so
5:18
it goes back to the original sentence,
and we can check it out.
5:20
Let's save the files and preview it.
5:24
Plugin events are cool.
5:27
They let you customize what happens
when a plugin kicks into action.
5:30
Not all plugins have events.
5:34
And you should realize that
a plugin event is just
5:36
the creation of the plugin's author.
5:39
They aren't just magically
part of the plugin.
5:41
A plugin creator adds events.
5:44
In the next video,
I'll give you a challenge to practice with
5:47
the events supplied by
the sticky JS plugin.
5:50