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
Adam Siwiec
12,070 PointsWhat am I doing wrong?
I cant figure out what I am doing wrong.
Here is my code:
var $overlay = $("<div id='overlay'></div>");
$("body").append($overlay);
$("#imageGallery a").click(function(event) {
event.preventDefault();
var href = $(this).attr("href");
console.log(href);
$overlay.show();
});
12 Answers
Josh Trill
4,867 PointsYou may want to use alpha RBG to not have your images show up opac.
#overlay {
background:black;
opacity:0.7;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
display: none;
}
**Pardon the post spam. I am still getting used to the commenting.
Angela Cheng
10,305 PointsHi Adam! I had the same problem! You can't directly call $overlay.show() like he did in the video because we're using different jQuery versions, since he filmed the video quite a while ago. You're not going crazy - I promise :)
Instead, call:
$("#overlay").show()
Cody Lewis
16,379 Points// Update @ bottom!
Hey Angela, you're fixed worked for me as well!
I am confused as to why the "#" is used. I realize that the actual ID is being referenced, but I am confused as to why we could not reference the variable of $overlay.
Any help's appreciated!
var $overlay = "<div id=overlay></div>";
$("body").append($overlay);
$("#imageGallery a").click(function (event) {
event.preventDefault();
var href = $(this).attr("href");
$("#overlay").show();
});
So the variable $overlay had to be "setup" a different way, the code is below
var $overlay = $("<div id=overlay></div>");
$("body").append($overlay);
$("#imageGallery a").click(function (event) {
event.preventDefault();
var href = $(this).attr("href");
$overlay.show();
});
rydavim
18,813 PointsSorry about that, the error wasn't in the code you originally posted, only in the snapshot. Should work now!
$("#imageGallery a").click(function(event){
event.preventDefault();
var imageLocation = $(this).attr("href");
console.log(imageLocation); // This testing line was ironically breaking everything. Make sure it's set to the new variable name!
$image.attr("src", imageLocation);
$overlay.show();
});
rydavim
18,813 PointsCan you elaborate on the problem you're encountering? I've done this project, but without context it's difficult to know what stage you're on.
Edit - Fixed your posted code in your original question so that we can see all of your expressions.
Adam Siwiec
12,070 PointsHi rydavim, somehow the the code didnt get pasted in.
Here's what I have in it :
"<div id='overlay'></div>"
Whenever I am clicking on the image the screen isnt turning black.
I am sure that my css and html are right
But using my straight forward brain logic, wouldnt .append() put the div after the script and not make it run?
Adam Siwiec
12,070 Pointswait why isn't the html showing up!
<div id='overlay'></div>
with double quotes on the outside
Adam Siwiec
12,070 Points"<div id='overlay'></div>"
rydavim
18,813 PointsAre you sure there's nothing wrong with your file structure, or linking the files in your html? Running your javascript code with the html and css I have from when I did this project does display the dark grey overlay for me.
Additionally, make sure you've saved your javascript file and refreshed your web page. Maybe even try clearing the cache.
Could you post a workspace snapshot just so we can make sure there isn't anything going wrong in any of your other files?
Adam Siwiec
12,070 PointsThis is the link to the snapshot https://w.trhou.se/5txnkvo0y4
Josh Trill
4,867 PointsI believe your display should be set to none to start with. You don't want your users greeted with a black screen.
Adam Siwiec
12,070 Pointsyes I know but that wouldn't make a difference it still doesn't work.
Josh Trill
4,867 PointsYou didn't change your var to imageLocation. Just from what I can see. It's still set as href.