jQuery Basics: $overlay.show(); The console notes this isn't a function. Why?

Question

I've been looking my code and the videos over and over, as well as looking elsewhere on the internet, and I can't solve this. When I try to execute the program it says that $overlay.show() is not a function, but if I take out the '()' the console says they're missing. Below is my code from the app.js file, then index.html (starts after //HTML), and lastly the style.css (beginning after //CSS). Thanks for your help. [I couldn't format the CSS in a text block/ screen, so, I know, that one isn't in good/ well readable format.]

//Problem: User when clicking on image goes to a dead end
//Solution: Create and overlay with the large image - Lightbox


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

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


// Capture the click event on a link to an image
$("#imageGallery a").click(function(event){
  event.preventDefault();
  var href = $(this).attr("href");
  $overlay.show();
  // Show the overlay.
  // Update overlay with the image linked in the link
  // Get child's alt atribute and set caption
});

// When overlay is clicked
  // Hide the overlay

//HTML <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8"> <title>Image Gallery</title> </head> <body> <h1>Image Gallery</h1> <ul id="imageGallery"> <li><a href="images/refferal_machine.png"><img src="images/refferal_machine.png" width="100" alt="Refferal Machine By Matthew Spiel"></a></li> <li><a href="images/space-juice.png"><img src="images/space-juice.png" width="100" alt="Space Juice by Mat Helme"></a></li> <li><a href="images/education.png"><img src="images/education.png" width="100" alt="Education by Chris Michel"></a></li> <li><a href="images/copy_mcrepeatsalot.png"><img src="images/copy_mcrepeatsalot.png" width="100" alt="Wanted: Copy McRepeatsalot by Chris Michel"></a></li> <li><a href="images/sebastian.png"><img src="images/sebastian.png" width="100" alt="Sebastian by Mat Helme"></a></li> <li><a href="images/skill-polish.png"><img src="images/skill-polish.png" width="100" alt="Skill Polish by Chris Michel"></a></li> <li><a href="images/chuck.png"><img src="images/chuck.png" width="100" alt="Chuck by Mat Helme"></a></li> <li><a href="images/library.png"><img src="images/library.png" width="100" alt="Library by Tyson Rosage"></a></li> <li><a href="images/boat.png"><img src="images/boat.png" width="100" alt="Boat by Griffin Moore"></a></li> <li><a href="images/illustrator_foundations.png"><img src="images/illustrator_foundations.png" width="100" alt="Illustrator Foundations by Matthew Spiel"></a></li> <li><a href="images/treehouse_shop.jpg"><img src="images/treehouse_shop.jpg" width="100" alt="Treehouse Shop by Eric Smith"></a></li> </ul> <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/app.js" type="text/javascript" charset="utf-8"></script>

</body> </html>

//CSS

body {
    font-family: sans-serif;
    background: #384047;
}
h1 {
    color: #fff;
    text-align: center
}

ul {
    list-style:none;
    margin: 0 auto;
    padding: 0;
    display: block;
    max-width: 780px;
    text-align: center;
}
ul li {
    display: inline-block;
    padding: 8px;
    background:white;
    margin:10px;
}
ul li img {
    display: block;
}
a {
    text-decoration: none;
}
/** Start Coding Here **/


#overlay {
  background: rgba(0,0,0,0.7); 
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  display:none;

}

Answer 1 · 2015-10-07T19:24:38Z

October 7, 2015 7:24pm

Looks like you're missing the closing tag on your function.

$("#imageGallery a").click(function(event) {

event.preventDefault();

var href = $(this).attr("href");

$overlay.show();

}); //Add this

Also dont use spaces in your $overlay declaration and you're missing the closing div tag.

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

Should be.

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

Answer 2 · 2015-10-07T23:08:29Z

October 7, 2015 11:08pm

The closing div tag exists in my code, but I couldn't get it to show up in the question I posted, that's noted in the comment following that line...but thank you. I put spaces in to get any text to appear; originally the question appeared: var $overlay = ('');

The final }); are in the code, but thanks for pointing out that this also didn't show up in the post.

I just found how to post the jQuery in code? This will be more helpful, and probably more accurate.

Answer 3 · 2015-10-08T04:44:45Z

October 8, 2015 4:44am

Another set of eyes showed me the answer:

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

needed to have $ before the ( to make it a function.

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

Welcome to the Treehouse Community

Looking to learn something new?

Hannah Melendy

Hannah Melendy

jQuery Basics: $overlay.show(); The console notes this isn't a function. Why?

3 Answers

Per Karlsson

Per Karlsson

Hannah Melendy

Hannah Melendy

Hannah Melendy

Hannah Melendy