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

Preview

Start a free Basic trial
to watch this video

Sign up for Treehouse

Debugging: When Plugins Collide

2:29 with Dave McFarland

When you add more than one plugin to a site, you may run into problems -- the two plugins might interact in ways you didn't expect. That's the case with the sticky nav and the carousel plugins. Unfortunately, there can be multiple reasons why plugins don't work well together. So in this video, I'll step you through a technique for debugging plugin problems.

Resources

  • 0:00

    When you add more than one plugin to a site, you may run into problems.

  • 0:04

    The two plugins might interact in ways you didn't expect.

  • 0:08

    That's the case with the sticky nav and the carousel plugins.

  • 0:12

    Unfortunately, there can be multiple reasons why plugins don't work

  • 0:15

    well together.

  • 0:16

    So in this video, I'll step you through a technique for debugging plugin problems.

  • 0:22

    Now that the carousel plugin is working it looks like the sticky nav is broken.

  • 0:27

    I'll use the developer's tools again to do a little detective work.

  • 0:31

    You can see the changes that the sticky plugin is making.

  • 0:35

    These flashes of color and new code indicate the live editions and

  • 0:39

    changes that the plugin makes.

  • 0:41

    But lets see where the nav bar went.

  • 0:43

    Remember from the last section of this course that the sticky plugin creates

  • 0:47

    a div and wraps it around the element that we want to stick to the top of the page.

  • 0:53

    There's the element so it's still there and

  • 0:55

    inside it is the header that we want to stick.

  • 0:58

    So for some reason, it's there but we just can't see it.

  • 1:02

    Notice that the style for this says its position is fixed.

  • 1:07

    Fixed positioning in CSS works like absolute positioning.

  • 1:10

    The element is taken out of the flow of the web page,

  • 1:13

    and other elements can appear above or below it.

  • 1:16

    Maybe that's what's happening.

  • 1:17

    It's just that the carousel is just on top of the nav bar,

  • 1:20

    that's why we can't see it.

  • 1:22

    I'll add a z-index property, and see if that helps.

  • 1:27

    The z-index value controls the layering of absolute and fixed position elements.

  • 1:32

    An element with a higher z-index will appear above and

  • 1:35

    on top of an element with a smaller z-index.

  • 1:38

    That did it!

  • 1:40

    I just need to add that to the CSS file.

  • 1:43

    Click the launch workspace button if you want to follow along, and

  • 1:47

    open the main.css file.

  • 1:51

    I'll find the is-sticky header style and add a z-index to it.

  • 2:00

    I'll save the file and preview the workspace.

  • 2:03

    Excellent!

  • 2:05

    It works.

  • 2:06

    It's not uncommon that plugins interact in weird ways.

  • 2:10

    Since the people who create plugins can't know what other plugins

  • 2:13

    someone might use with theirs, it's up to you, the designer and

  • 2:17

    web developer, to try to figure out what the problem is, and how to fix it.

  • 2:21

    The developer's tools and a good knowledge of HTML, CSS, and

  • 2:25

    JavaScript are your best tools for solving these kinds of problems.

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

Sign up