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

Jason Bogert
PLUS
Jason Bogert
Courses Plus Student 732 Points
Posted by Jason Bogert
Jason Bogert
Courses Plus Student 732 Points

Overlay not working correctly

For some reason I can't get my overlay to show when clicking on an image. Would anyone be able to help me figure out why?

Here is my js:

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

$("body").append(overlay);


 $("#ImageGallery a").click(function(event){
   event.preventDefault();
   var href = $(this).attr("href");
   overlay.show();

 });

and here is my CSS: 

 #overlay {
  background-color: black;
  width: 100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
}

2 Answers

Colin Bell
Colin Bell
29,679 Points
Colin Bell
Colin Bell
29,679 Points

Do you link to jQuery anywhere in your document?

The way you have it written, your overlay should be showing up when the page loads. The following codepen is your exact code copied and pasted (If you click the gear in the JS box, you'll see that jQuery is selected as an option there):

codepen.

Are you trying to do something like this?

codepen #2

Jason Bogert
PLUS
Jason Bogert
Courses Plus Student 732 Points
Jason Bogert
Jason Bogert
Courses Plus Student 732 Points

Well I came back the next day and for whatever reason it is working now. Thanks for your response though. Much appreciated