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

Posted by Gabriel Ward
Gabriel Ward
20,222 Points

Overlay with CSS and jquery

I've created an overlay dynamically in jQuery and appended it to my page.

Then I've styled the overlay in CSS. In the CSS I've inserted a background image to the overlay.

Now I want to select the background image in jQuery and create a click event on it to hide the overlay.

Here's the relevant CSS

CSS
#overlay {
  background:rgba(98,167,220,0.9);
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  display:none;
  text-align:center;
  background-image: url(../menu.png);
  background-repeat: no-repeat;
}

I've tried

$('#overlay background-image').click(function() { $(this).hide(); });

But that hasn't worked.

I'm unsure how to append the image to overlay directly in jQuery.

I'm assuming it's something like 

var $overlay = $('<div id="overlay"></div>')
var $image = $("<li id='image'><img src='menu.png'></img></li>")

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

Thanks for the help.

2 Answers

Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

Gabriel,

If I understand your question correctly (which I'm not sure I do), you don't need to create the click event on the background image...just the div itself. So something like this should work:

$("#overlay").click(function(){
  $(this).hide();
});

As for the second part of your question, I guess your image variable would be something like:

var image = "<li id='image'><img src='menu.png'></img></li>";

and then you would append it like so:

$("#overlay").append(image);

Hope this helps.

Gabriel Ward
Gabriel Ward
20,222 Points

Hi Shawn,

Sorry for the confusion.

I can get 

$("#overlay").click(function(){
  $(this).hide();
});

to work no problem. But what I want to do is to append the image to the overlay and then have the overlay hide only when that image is clicked on. With 

$("#overlay").click(function(){
  $(this).hide();
});

The overlay hides when it is clicked anywhere.

I've tried appending the image the way you suggest but can't get it to work. I can append it using the background-image property in CSS though.

Am I managing to explain the situation?

Thanks so much.

Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

Ahh...maybe I see what you're saying. Instead of adding the image as a background to your #overlay div, you might consider creating another, smaller container div to hold your image (and make sure its z-index is higher than your #overlay). Then you can work with the image directly with jQuery.

Gabriel Ward
Gabriel Ward
20,222 Points

Ok where do I add the smaller div? It would still need to be appended to the overlay right?

Here's an example of what I'm thinking of

http://tympanus.net/Development/FullscreenOverlayStyles/index.html

If you click on the overlay opened Huge, you'll see an x in top right corner.

here's my current jQuery code,

var $overlay = $('<div id="overlay"></div>')
var $largeOverlay = $("<li id='largeOverlay'><a href='about.html'>About</a></li><")
var $largeOverlay2 = $("<li id='largeOverlay2'><a href='venue.html'>Venue</a></li>")
var $image = $("<li id='image'><img src='menu.png'></img></li>")

$($overlay).append($largeOverlay);
$($overlay).append($largeOverlay2);
$(#overlay).append($image);
$("body").append($overlay);

The var image is not appending to the overlay but the $largeOverlay and $largeOverlay2 are.

Shawn Flanigan
PLUS
Shawn Flanigan
Courses Plus Student 15,815 Points
Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

The link helped, thanks. Instead of appending your button with javascript, I would just statically code it within the #overlay div. Since it's within the #overlay div, it would be hidden whenever the overlay is hidden and displayed whenever the overlay is displayed. So, something like: 

<div id="overlay">
    <div id="close-btn"><img src="../menu.png" height="75px" width="75px" alt="close" /></div>
    // Whatever other code you want to appear on your overlay.
</div>

Then style your #close-btn div to be a specific size (height: 75px; width: 75px;...or whatever size your image is). Set it to position: absolute; and give it a particular position (like top: 25px; right: 25px;).

This way, you can target it with your javascript and do something like: 

$("#close-btn").click(function(){
   $("#overlay").hide();
});

Will that work for you?

Gabriel Ward
Gabriel Ward
20,222 Points

Hi Shawn,

Thanks so much for the help. I just came to a similar answer just as you posted your solution. And both worked. It seems I had more luck appending the image within a div than initially when I was trying to append it within a list item.

But I'm thrilled to have this problem solved. So thank you so much. I'm still a beginner and learning everyday because of the generosity of people such as yourself.

Cheers.