"CSS Layout Techniques" was retired on February 22, 2017. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Using jQuery Plugins!
You have completed Using jQuery Plugins!
Preview
I'll step you through the solution to the challenge from the previous video. In the process, you'll configure the plugin and use plugin events.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
How did it go?
0:00
You had to use a lot of different front
end skills to solve this challenge.
0:01
Not only did you need to use JavaScript,
but you needed to understand HTML and CSS.
0:05
If you managed to complete all
of those tasks, good for you.
0:09
You've got a good grasp
of front end development.
0:13
If you couldn't figure them all out,
that's okay.
0:17
You just need to practice more.
0:19
Let me show you how I
solved this challenge.
0:21
Let's start with the HTML.
0:24
We need to figure out how
to target the HTML for
0:27
the want us to work on your project text.
0:30
Okay, here it is.
0:34
It's an h5 tag.
0:34
That's a bit too generic to use since
there are other h5 tags on this page and
0:36
we want to just stick this one.
0:41
Let's add a class so
we can identify this tag with our code.
0:44
We'll use this work code for the selector.
0:49
I'll open the main.js file.
0:52
Even though this effect will
only apply to a single page,
0:56
the work.html file, I'm still going
to add the code to the main.js file.
0:59
This is just to keep my
JavaScript code in one place.
1:04
However, if I was going to add hundreds
of lines of code that only applied to
1:08
the work.html file, I would add that
code directly into the webpage but,
1:11
because I'm only adding
a few lines of code,
1:17
there's no real performance problem
loading this code in other pages.
1:19
Okay, let's select that block of
text then we call the sticky plugin.
1:24
I'm gonna save the file then preview it.
1:31
As you can see,
it doesn't work that well yet.
1:40
The, want us to work on our project text,
sits on top of the navigation bar.
1:43
We can pass an object
when we call the plugin,
1:49
that changes the position
of this block of text.
1:51
Where did the number 60 come from?
1:58
You know, I just tried a bunch of
numbers until I found one that worked.
2:00
Let's check it out.
2:04
I'll save the files and
preview the work space.
2:05
We're getting there, but you can see
content pass underneath the text.
2:09
It would look better if
it had a solid color.
2:14
We can do that using CSS.
2:16
I'll open the main .CSS file and
add a new style.
2:20
Remember that the sticky.js plugin adds
the is-sticky class when an element is
2:32
stuck to the top of the browser window.
2:37
This style gives the text block
a white background color, and
2:40
a few other properties that control
the spacing inside and around the block.
2:44
Again, those are settings I had to
experiment with to get them to work.
2:49
Now let's add that email
link to the end of the text,
2:54
want us to work on your project.
2:57
To do that, we need to add an event
handler for the sticky-start event.
3:00
So I'll select the h5 tag again and
3:05
use jQuery's on method to apply a callback
function to the sticky-start event.
3:07
Whatever I place inside the braces
will run when this text block sticks.
3:18
In this case, I want to add
an email link after the text.
3:23
I can do that with jQueries append method.
3:27
The ${this} refers to
the element that the applies to.
3:37
In this case it's the h5 tag with the
text, want us to work on your project?.
3:41
If you're not familiar with
either jQuery's append method or
3:47
the this keyword, look in the teacher's
notes for more information.
3:50
Now jQuery's append method adds
HTML to the end of the selection.
3:55
In this case,
it adds a link to the end of the h5 tag.
3:58
The link has the class email text.
4:01
We can use that class as a handle for
selecting and
4:07
then removing the email link
when the text block unsticks.
4:10
We do that using the sticky-end event.
4:14
This code simply selects an element
with the class email text and
4:24
removes it from the page.
4:28
Let's see how it works.
4:31
I'll save the files and
preview the work space.
4:33
Okay, this looks good.
4:40
There's one last thing I want to show you.
4:42
If you re-size the browser window
while the elements are stuck,
4:44
things get a little weird.
4:48
Notice that those stuck
elements don't re-size either.
4:50
Fortunately, the plug in can handle and
4:53
dynamically update the fixed elements
when the browser is re-sized.
4:55
To do that,
you provide to options to the plug in.
5:00
The first,
is the get width from property, and
5:04
it tells the plug in which element
determines the width of the fixed element.
5:07
This is usually some other tag
that wraps around that element.
5:11
It could be the body tag, or simply a div.
5:14
Let's look at the HTML.
5:17
Notice that there's a div here.
5:19
It has a few classes on it,
including the container class.
5:21
This was added to the tag to indicate that
it contains all the content on the page.
5:25
We can use that to get the width.
5:30
Now the value must be a string and
it should be a CSS selector.
5:37
Next you set the responsive
width property to true.
5:43
This just tells the sticky.js plugin that
it should respond to changes in the width
5:49
of the browser window.
5:54
I now need to add this for
the other call to the sticky plugin here.
5:56
Let's see how it works.
6:10
I'll save the file and
preview the work space.
6:11
Excellent.
6:24
Congratulations, you've learned
how to use another jQuery plugin.
6:29
As I mentioned at the beginning of this
course, many plugins you'll run into,
6:33
even ones that add wildly
different features to a website,
6:36
are added to a page in a similar manner.
6:40
In other words,
at this point you'll be able to find and
6:42
add many different plugins
without much trouble.
6:46
And we've got one last section of
this course, and it's a good one.
6:49
In it, you'll learn how to add a carousel,
a kind of slideshow to a webpage.
6:52
It's an eye-catching way to include
a lot of content on a page.
6:56
It is often used on a site's homepage
to showcase different content,
7:01
or sections of a site.
7:06
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up