Is padding the only way to get an overlay to cover length of <body>, without image/caption scrolling?

Question

Hi,

I have completed the second jQuery Basics section today, Creating a Simple Lightbox. The page consists of an image gallery, using two columns of <ul>. There is a bit of height to the page which involves a little scrolling. Generally the JS code works fine, the overlay appears along with the overlay's image and caption as expected.

There is an issue when the page is scrolled down. The shaded overlay does not reach the bottom of the <body> element. In fact overlay seems only to be the height of the viewport.

I've tried to resolve this issue by changing the position of .overlay from 'absolute' to 'fixed'. This almost works except the overlay's image and caption scrolls down with it.

After abandoning that idea, I added 'padding-bottom: 200%' to the overlay this creates the shaded cover needed to cover the <body> and the image/caption don't move, which is the result I wanted to achieve but....

... while adding padding does seem like problem solved, it feels like a bodge job.

My question: Is there a better way of keeping the overlay image and caption at the top of the web page while ensuring the overlay shading covers the whole of the <body> element?

Code is below. Any ideas are greatly appreciated, thanks!

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>My first javascript</title>
    <link rel="stylesheet" type="text/css" media="screen" href="js4.css" />

</head>
<body>
<header>
    <h1 class="name">Image Gallery</h1>
</header>
<main>
    <div id="gallery">
        <div class="col">
        <ul class="imagegallery">
        <li><a href="animal1.png"><img src="animal1.png" alt="This is an animal"></a></li>
        <li><a href="animal2.png"><img src="animal2.png" alt="This is an animal"></a></li>
        <li><a href="animal3.png"><img src="animal3.png" alt="This is an animal"></a></li>
        <li><a href="animal4.png"><img src="animal4.png" alt="This is an animal"></a></li>
        <li><a href="animal5.png"><img src="animal5.png" alt="This is an animal"></a></li>
        </ul>
        </div>

        <div class="col">
        <ul class="imagegallery">
            <li><a href="animal6.png"><img src="animal6.png" alt="This is an animal"></a></li>
            <li><a href="animal7.png"><img src="animal7.png" alt="This is an animal"></a></li>
            <li><a href="animal8.png"><img src="animal8.png" alt="This is an animal"></a></li>
            <li><a href="animal9.png"><img src="animal9.png" alt="This is an animal"></a></li>
        </ul>
        </div>
    </div>
    </main>
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
    <script src="js4.js" type="text/javascript" charset="utf-8"></script>

</body>
</html>

CSS

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
}

h1{
  text-align: center;
}

main{
  margin: 0 auto;
  text-align: center;
}

.col{
  vertical-align: top;
}

.col,
a{
  display: inline-block;
}

img{
  padding: 10px;
  border: 1px solid rgba(50, 10, 87, 0.5);
}

.overlay{
  background-color: rgba( 0, 0, 0 , .7);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  text-align: center;
}

.overlay img{
  margin-top: 150px;
  border: none;
}

.overlay p{
  color: white;
}

JS

$overlay = $('<div class="overlay"></div>');
$image = $("<img>");
$caption = $("<p></p>");


$overlay.append($image);
$overlay.append($caption);
$('body').append($overlay);


$(".imagegallery a").click(function(event){
  event.preventDefault();
  var imagelocation = $(this).attr("href");
  $image.attr("src", imagelocation);
  var $captiontext = $(this).children().attr("alt");
  $caption.text($captiontext);

  $overlay.show();

  console.log($captiontext);
  console.log(imagelocation);
});

$overlay.click(function(){

    $overlay.hide();

});

Answer 1 · 2017-02-28T07:12:12Z

February 28, 2017 7:12am

Gary, Your HTML doesn't have any element with class="overlay", so I assume you're injecting it with jQuery when an image is clicked. Since you didn't post your jQuery code, there's really no way to troubleshoot this for you. Please edit your question and include whatever code is in "js4.js" - Thanks.

Welcome to the Treehouse Community

Looking to learn something new?

gary peart

gary peart

Is padding the only way to get an overlay to cover length of <body>, without image/caption scrolling?

1 Answer

Eric Butler

Eric Butler

gary peart

gary peart