Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Cameron Raw
Cameron Raw
15,473 Points
Posted by Cameron Raw
Cameron Raw
15,473 Points

Overlay doesn't cover 100% height

Hi,

I'm applying the jQuery basics lessons to a site I'm making for a friend of mine. I'm making a Lightbox for his photo collection.

I'm dynamically appending a black overlay to the document when the user clicks on the a link for the img, and the overlay appears.. but it doesn't cover 100% height of the document as it should.

It is appended to the body. Both the body and html entities are successfully using 100% height, but the overlay covers a small portion of this.

I suspect it has something to do with it being dynamically added from jQuery. 

#overlay {
  background: rgba(0,0,0,0.7);
  width: 100%;
  min-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

var $overlay = $('<div id="overlay"></div>');

// Make lightbox functionality for gallery
  //1. Add overlay
    //1.1 An image
    //1.2 A caption



  //2. Capture click event on a link to an image
  $("a").click(function(event){
    event.preventDefault();
    var href = $(this).attr("href");
    console.log(href);
    $("body").append($overlay);
    $overlay.show();
  });

Thanks

Samuel Webb
Samuel Webb
25,370 Points
Samuel Webb
Samuel Webb
25,370 Points

Try adding these to your body tag:

body {
  min-height: 100%;
  position: relative;
}

3 Answers

Tim Knight
Tim Knight
28,888 Points
Tim Knight
Tim Knight
28,888 Points

Cameron,

Since you're absolutely positioning this object (in what I'm sure is a relatively positioned parent right?) you can actually use all of the positioning factors not just top and left, so if you wanted to cover the entire area you could do something like:

#overlay {
  background: rgba(0,0,0,0.7);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
}

If you're using a preprocessor, this is something that you might commonly put into a mixin, like in Sass for example:

@mixin stretch($top: 0, $right: 0, $bottom: 0, $left: 0) {
  position: absolute;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

So you could do:

#overlay {
  background: rgba(0,0,0,0.7);
  @include stretch();
  display: none;
}

Again, that's if you're using a preprocessor like Sass.

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

Did you set your body margin and padding to 0 ? maybe

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

can you supply your HTML code as well.