Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.

Preview

Start a free Pro trial
to watch this video

Sign up for Treehouse

Problem Solving

6:04 with Nick Pettit

When working on a project, it's best to first implement the simplest idea that will be functional and then iterate on it. In this chapter, we'll investigate some of the problems with the project that we've created thus far and figure out how to take corrective action.

  • 0:00

    [?music?]

  • 0:02

    [Problem Solving]

  • 0:05

    [Nick Pettit] So what we've created so far works just fine.

  • 0:09

    We could go ahead and stop right here and say that we're done.

  • 0:13

    We can click on these photos and they enlarge,

  • 0:16

    and everything looks great.

  • 0:18

    But there's several problems with what we've created.

  • 0:22

    First of all, all of these photos are absolutely positioned,

  • 0:26

    so it's really difficult to go ahead and add additional photos.

  • 0:31

    Here you can see each one of these photos is absolutely positioned

  • 0:35

    and if we were to go into these images and say, copy and paste

  • 0:41

    and make a new image, we would have to actually go back into our CSS

  • 0:46

    and set additional coordinates for the new image.

  • 0:51

    That's really not a good way to work,

  • 0:55

    especially if this gallery were being generated dynamically from the server

  • 0:59

    or from a database.

  • 1:01

    So let's go ahead and see what we can do to tackle this problem.

  • 1:05

    Sometimes when you're developing websites,

  • 1:08

    it's best to just go with the simplest thing that could possibly work

  • 1:11

    and then iterate on that.

  • 1:13

    What we have so far is pretty basic and simple,

  • 1:16

    but there's a lot of things that we could improve.

  • 1:20

    So here's our plan of action.

  • 1:22

    The first thing we're going to do is add floating placeholders around each one of our images.

  • 1:27

    We're going to absolute-position the photos inside of these placeholders.

  • 1:32

    jQuery will be used for interaction,

  • 1:36

    and then we'll use CSS3 transitions for all of the animation.

  • 1:40

    So first, let's go ahead and modify our HTML markup

  • 1:44

    and add in the placeholders for the images.

  • 1:49

    So first, we'll go ahead and change this div

  • 1:57

    to be an unordered list and we'll scroll down

  • 2:00

    and change the closing tag there.

  • 2:05

    Each one of these images we'll wrap in a list item tag

  • 2:09

    with the class="placeholder".

  • 2:12

    So we'll go ahead and copy and paste that--

  • 2:18

    paste it there.

  • 2:21

    We also need a closing tag for our list item,

  • 2:26

    so we'll go ahead and copy those together

  • 2:29

    and we'll put one of them between each one of our images.

  • 2:34

    So we have a few more here,

  • 2:48

    and for our last one,

  • 2:50

    we don't need the opening tag so we'll go ahead and just get rid of that.

  • 2:54

    We just need our closing tag.

  • 2:56

    And then, we'll go ahead and indent all of our images

  • 2:59

    so that this code is a little bit more readable--

  • 3:03

    do our last one there.

  • 3:09

    That's all we need to do to modify our HTML,

  • 3:11

    so let's go ahead and switch over to our CSS

  • 3:15

    because there's quite a bit more modification we need to do here.

  • 3:23

    So first, in our #stage here, we'll go ahead and remove the margin

  • 3:29

    because we don't need it anymore.

  • 3:31

    We'll remove the explicit height

  • 3:35

    because that's another thing that's wrong with what we currently have.

  • 3:38

    And finally, we'll go ahead and say list-style: none

  • 3:44

    because remember, this is now an unordered list.

  • 3:48

    Next, we need to change the selector on our transitions

  • 3:53

    because our images are now wrapped inside of the .placeholder classes,

  • 4:01

    so we'll add that in.

  • 4:06

    And then, we need to go ahead and select our placeholders,

  • 4:10

    so we'll say #stage :placeholder {

  • 4:15

    and we'll float them to the left,

  • 4:17

    we'll give them a width: 210px;

  • 4:20

    a height of 160px;

  • 4:24

    and a margin all the way around of 12px.

  • 4:29

    Now, we want to change all of our photos from using ids

  • 4:33

    over to using a photo class,

  • 4:36

    so we can actually just remove these ids that we created originally.

  • 4:44

    So we'll go through each one here and remove the ids.

  • 4:54

    Just a few more here--

  • 4:57

    and there's the last one.

  • 5:00

    And now, in our CSS, we can keep our photo classes

  • 5:05

    but we can go ahead and remove all of this absolute positioning.

  • 5:10

    So we'll remove that,

  • 5:13

    and now we can remove position: absolute just like that.

  • 5:18

    So we'll go ahead and switch over to the browser and refresh,

  • 5:23

    and now you can see our page looks a little bit different

  • 5:29

    and the animation no longer works,

  • 5:31

    so let's go ahead and switch over to TextMate.

  • 5:34

    The reason that this is happening

  • 5:36

    is on our large_photo class,

  • 5:40

    we're using position: absolute;

  • 5:45

    so when we switch classes from photo to large_photo,

  • 5:49

    we're actually changing over to position: absolute;

  • 5:52

    and when you changing positioning like that,

  • 5:55

    you actually break CSS3 transitions,

  • 5:58

    so that means we need to add in some jQuery to kind of bind everything together.

You need to sign up for Treehouse in order to download course files.

Sign up