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

CSS jQuery Basics (2014) Creating a Simple Lightbox Perform: Part 2

Daniel Evans
Daniel Evans
5,105 Points
Posted by Daniel Evans
Daniel Evans
5,105 Points

Why won't my screen turn black? - None of my javascript is getting through

I copied all the code but nothing shows up from my app.js file. I tried to add extra lines of code like a prompt, and I also tried updating the jquery script from the jQuery website. tried reopening the workspace and reloading the site. I had pretty much the same issue a couple of videos back, and had to wait and come back to it for it to magically work. Please help, thanks

Chad Donohue
Chad Donohue
5,657 Points

Can you post the code that you have?

Daniel Evans
Daniel Evans
5,105 Points
Daniel Evans
Daniel Evans
5,105 Points

alert("hello");

var $overlay = $("<div id="overlay"></div>"); //add overlay $("body").append($overlay);

//capture click event on a link to an image $("#imageGallery a").click(function(event){ event.preventDefault(); var href = $(this).attr("href"); $overlay.show(); });

CSS:

overlay {

background: black; width:100%; height:100%; position: absolute; top:0; left:0; }

HTML: <ul id="imageGallery"> <script src="//code.jquery.com/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/app.js" type="text/javascript" charset="utf-8"></script>

Daniel Evans
Daniel Evans
5,105 Points
Daniel Evans
Daniel Evans
5,105 Points

I just realized I have double quotes inside double quotes where I assign the overlay div to the $overlay variable. I tried it out again though and nothing changed.

4 Answers

Chad Donohue
Chad Donohue
5,657 Points
Chad Donohue
Chad Donohue
5,657 Points

In your app.js file, when you are assigning to your $overlay variable, be sure to supply some html inside the selector.

For example: 

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

This will actually let you target that element in your css.

Also, your selector for the overlay should probably be #overlay if you are targeting an id attribute.

So, to sum it up, make sure to put html into your js variables if you are appending them to the DOM. And then make sure your css selectors match up across your html, js, and css.

Daniel Evans
Daniel Evans
5,105 Points
Daniel Evans
Daniel Evans
5,105 Points

Thanks for helping Chad. It's strange though because I copied and pasted the javascript to this forum, but the html text inside the overlay object didn't show up. I went back and I changed the quotation marks to single quotes and it worked, does that have anything to do with it?

Chad Donohue
Chad Donohue
5,657 Points

I see, try surrounding each bit of code (html, css, js) with the back ticks followed by the language:

        ```html
            <!--code-->
        ```

        ```css
            /*code*/
        ```

        ```javascript
            //code
        ```
Daniel Evans
Daniel Evans
5,105 Points
Daniel Evans
Daniel Evans
5,105 Points

Im not sure what you mean by this. Like in each file, ex. (javascript.js) just surround it with tags?

Chad Donohue
Chad Donohue
5,657 Points

I was just referring to your code when posting it in the forums.

Post all of the code that you have, keeping in mind to enclose each section with back ticks so it is easier to decipher.