Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Preview
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
In this chapter, we'll write some jQuery that will increase the robustness of our CSS.
This video doesn't have any notes.
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
[jQuery]
0:00
[?music?]
0:04
[My Photos]
0:10
[Nick Pettit] We've modified the markup so that it's a little bit more flexible.
0:12
We can now go ahead and add more photos if we want to
0:15
to our gallery, so I'll just go ahead and copy and paste a few of them here,
0:20
and when we refresh the page here,
0:24
you can see that our stage dynamically resizes
0:27
and we have additional photos there.
0:30
However you can see that our gallery,
0:34
without using jQuery, is actually pretty broken right now,
0:36
so let's see what we can do to fix that.
0:39
So we'll switch back to our text editor
0:42
and we'll just go ahead and delete those two photos that we added
0:45
and refresh the page--there we go--back to normal,
0:49
and let's switch over to application.js.
0:52
So just to review our strategy here, we have placeholder list items
0:56
and those are floated.
1:01
Inside of those placeholders, we have our photos,
1:04
which will be absolutely positioned.
1:07
We'll do that with jQuery.
1:09
The reason that we have those placeholders is so that when a photo enlarges,
1:11
we can maintain the flow of the page.
1:16
If we were to just float those images and then apply the class large_photo,
1:19
we would actually be taking them out of the flow
1:23
and all of the photos would reflow on the page.
1:26
That's bad, so that's why we have those placeholders there.
1:29
Now, we'll use jQuery to set the positioning on our photos
1:32
and maintain the flow of the page.
1:37
So first thing's first--this selector image is way too generalized,
1:39
so let's go ahead and improve that.
1:44
We want to select images on the page--yes, but we want to select images
1:47
that have the class that contains the word photo. [class"=photo"] --just like that.
1:52
And then, we'll skip down here and we want to add in a variable called is_photo
2:00
and this will just detect whether or not we have a photo here.
2:07
Various is_photo = $(this).hasClass("photo");
2:15
Go ahead and do that.
2:17
So then we can say that if this is a photo that we're in fact clicking on,
2:19
if (is_photo) {
2:26
then we can go ahead and toggle this class between photo and large_photo,
2:28
just like that.
2:34
Now, because our photos will not initially be absolutely positioned
2:38
but our large_photo is absolutely positioned,
2:42
at this point, we actually need to set the left and top offset
2:45
for our large_photo.
2:49
So let's go ahead and use the CSS method,
2:51
and inside of that, we'll give it the property ({"left":
2:55
with a value of 200 pixels
3:02
and then the value of "top": with 0 pixels.
3:05
And then, we'll go ahead and switch back to our CSS
3:12
and we can go ahead and remove top and left there,
3:15
just like that.
3:20
So the next thing we need to do is we need to grab the margin_left
3:22
and margin_top for our images,
3:27
because this is something that we're going to be using quite a bit.
3:31
So just after our function here,
3:34
we'll go ahead and say var margin_left as a variable,
3:37
and we're going to parse an integer here
3:42
because we don't want the pixel value--we want just the numerical value.
3:45
Then we'll go ahead and select our image
3:51
with the class that contains the string "photo"
3:58
and we actually want the parent of that,
4:04
which would be the placeholder.
4:09
.parent().css
4:11
and we want to grab the "marginLeft" property,
4:15
and in this case, I am using the JavaScript notation, not the CSS property--
4:20
and we want to use a base 10 numbering system there,
4:29
which is that last value.
4:33
Next, we want to set a second variable, which is very similar to this one.
4:36
So we'll put a comma there, and we'll tab over, and this time,
4:42
instead of margin_left, we actually want to grab margin_top.
4:46
So we'll go ahead and change left to top there,
4:51
and then we need to do it for this value here ("marginTop")
4:56
and there we go.
5:04
Now, this will make our calculations a lot easier.
5:06
So the next thing we need to do
5:09
is when the page loads, we need to set the initial absolute positions on the images
5:11
relative to their parent containers.
5:17
So here's the secret:
5:20
the images will still be absolutely positioned,
5:22
but they will absoutely positioned when the page loads,
5:25
so you don't have to do the manual work of absolutely positioning them in the CSS.
5:29
So let's go ahead and do that.
5:34
In order to do this for each image, we need to again use this same selector $('img')
5:39
All of the images on the page that have the class name that contains the string "photo"
5:46
and then we're going to go through each one of them.
5:54
On each one, we're going to execute a function
5:58
and we're looping through each one, so we'll pass (index) to that function
6:03
and we'll put a ; there.
6:09
And first, we need to grab the position of the parent,
6:12
so we'll say =$(this).parent().position();
6:19
And now, we can go ahead and use our margin_left, margin_top,
6:32
and position variables to set the absolute position on all of our images.
6:37
So we'll say $(this) and we'll set the css on each one of them,
6:41
and we'll say "position": "absolute",
6:48
"left" will be position.left + margin_left,
6:55
and then "top": will be position.top--this is the actual position of the photo--
7:05
position.top + margin_top for our placeholder, just like that,
7:12
and we'll put a ; there so that's ready to go.
7:19
So let's go ahead and switch over to the browser and refresh the page
7:25
just to see how we're doing.
7:28
So now, when we click each one of these,
7:30
they will actually enlarge because the position is being set to absolute
7:32
and the large_photo class is set to absolute.
7:37
The problem is we can't click on our large photo
7:41
to set it back to its original position.
7:44
So let's go ahead and refresh the page,
7:47
and we'll go back to our text editor and we'll see if we can't fix that behavior.
7:50
So just before this if statement, I'm going to make a call to a function
7:55
that doesn't actually exist yet; we're going to write this function.
8:01
No matter what, we want to remove_large_photo()
8:05
whenever a photo is clicked on.
8:10
If we click on the large photo, we want that photo to become smaller.
8:13
If we have a large photo already and we click on another photo in the gallery,
8:17
we want the large photo to become smaller
8:22
and the photo we clicked on to become the new large photo.
8:25
So no matter what,
8:28
we want the large photo to be removed--no matter what we cilck on.
8:30
So we're calling the remove_large_photo(); function
8:34
and then, we get to actually write that function,
8:38
so let's go ahead and do that.
8:42
So we'll type function remove_large_photo() {
8:44
and we'll say if this is a large photo if ($("".large_photo"))
8:54
and then we use .length to determine if a large photo exists,
9:05
then, we want to get the var position
9:11
of our large_photo placeholder,
9:20
so the placeholder would be the parent of the large photo.
9:28
And then, of course, we want to get its position, just like that.
9:32
So we've stored the position of the placeholder for our large_photo.
9:38
And now, we want to select our large_photo
9:42
and we want to toggle the class large_photo and photo,
9:49
and that will basically just switch them out.
9:57
And then, we also need to reset the left and top offsets,
10:01
so let's go ahead and do that.
10:06
So we'll use the CSS method
10:08
and we already have all of the values we need, so we'll just say
10:12
"left": position.left + margin_left,
10:16
and again, this is the position of the actual photo plus the position of the placeholder.
10:24
So then we'll sync "top": position.top + margin_top
10:31
just like that, and we'll put a ; there.
10:41
And so now, when we switch back to the browser and refresh,
10:46
we can click on these photos,
10:49
and when we click on the large photo, it will become smaller again.
10:52
And then, when we click on a large photo and then click on another photo in the gallery,
10:56
the large photo will become smaller
11:00
and the photo we clicked on will become the new large photo,
11:03
so I'll show you that again.
11:06
When we click on one of the photos in the gallery,
11:08
the large photo will become small,
11:10
and the photo we clicked on will become the new large photo, just like that.
11:12
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