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
Start a free Courses trial
to watch this video
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