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 jQuery Basics (2014) Creating a Simple Lightbox Perform: Part 4

stian wilks johansen
stian wilks johansen
11,053 Points
Posted by stian wilks johansen
stian wilks johansen
11,053 Points

When i refresh my code the shadow of the div overlay is still there. The rest of the code is working fine.

can some one please help me figer this out?

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

  // Add image
$overlay.append($image);
  // Add caption
$overlay.append($caption);
//1. Add overlay
$("body").append($overlay);

// 2. Capture the link event no a link to an image
$("#imageGallery a").click(function(event){
  event.preventDefault();
  var imageLocation = $(this).attr("href");

  // Update overlay with the image linked in tge link
  $image.attr("src", imageLocation);

  // Show the overlay
  $overlay.show();

  // Get child alt atribute na d set caption
  var captionText = $(this).children("img").attr("alt");
  $caption.text(captionText);
});

//3. When overlay is clicked
$overlay.click(function(){
  $(this).hide(); 
});
  // Hide the overlay
rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

Hmm...I'm not seeing that behavior. Can you elaborate? What browser are you using? Are you getting any errors?

It's possible it's just not registering the most recent version of the code. Try closing your workspace or other coding program and reopening it. You can also try clearing your browser's cache and refreshing.

Jacob Mishkin
Jacob Mishkin
23,118 Points

there might be an issue with the css, can you post only the css that is for the class of overlay, we do not need the entire style sheet.

stian wilks johansen
stian wilks johansen
11,053 Points
stian wilks johansen
stian wilks johansen
11,053 Points

Im using chrome and here is my css:

/** Start Coding Here **/
#overlay {
  background: rgba(0,0,0,0.7);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
}

#overlay img {
  margin-top: 10%;

}

#overlay p {
  color: white;
}
Jacob Mishkin
Jacob Mishkin
23,118 Points

The CSS looks fine, I'm going to agree with rydavim and say that its probably a workspaces issue. Just refresh the page and see what's happing, and inspect the #overlay in the dev tools to see what is going on. By the way what do you mean by shadow? like the entire div is showing or the edges?

stian wilks johansen
stian wilks johansen
11,053 Points
stian wilks johansen
stian wilks johansen
11,053 Points

the hole div is shoving and i have tryd to refresh manny times. and when i click on the page the div disepers

Jacob Mishkin
Jacob Mishkin
23,118 Points

is the div showing before you click on an img? Does the Img show on click? does the div disappear when you click on the overlay? do you see the caption as well?

stian wilks johansen
stian wilks johansen
11,053 Points
stian wilks johansen
stian wilks johansen
11,053 Points

Its just when i relode the page the div is showing but when i click anny where it disepers. And the code is working just fine.