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 jQuery Basics (2014) Creating a Simple Lightbox Perform: Part 4

Erik Nuber
Erik Nuber
20,629 Points
Posted by Erik Nuber
Erik Nuber
20,629 Points

Created a Close Button but it doesn't work. JS/JQuery

I have been working on creating an overlay for a series of photos. I have appended an overlay that contains a div tag, image tag, paragraph tag and a button tag.

I am having two issues

1) The overlay stacks, so if an image is clicked on followed by a different image, both overlays stay open.

2) I would like the button to remove the overlay but, I've yet to figure out what I'm doing wrong. Below is my code for the javascript/jQuery portion.

This function is designed to create an Overlay with a specific ID so that I can size the overlay for different sized photos. 

/*jslint browser: true*/
/*global $, jQuery, alert*/

function getOverlay(verifySize) {
    "use strict";
    var $finalOverlay = "";
    if (verifySize) {
        $finalOverlay = $("<div id='overlaySpread'></div>");
        return $finalOverlay;
    } else {
        $finalOverlay = $("<div id='overlayTitlePage'></div>");
        return $finalOverlay;
    }
}

This is where the overlay is created in it's entirety. I create tags to append to the body and then fill those tags in. Finally the overlay is shown with all it's content. 

$(".overlayImage a").click(function (event) {
    "use strict";

    event.preventDefault();                  //prevents the opening of a window to display image
    var getImage, captionText, specificImage,
        $overlay,
        $image = $("<img>"),
        $caption = $("<p></p>"),
        $button = $("<button id='closeIt' class='forClosing'>close</button>"),
        statement = false;
    specificImage = $(this.getElementsByTagName("img"));      //get the specific image tag for the item clicked on.
    if (parseInt($(specificImage).attr("width"), 10) === 150) {   //check the width attribute to verify size of document.
        statement = true;
    } else {
        statement = false;
    }
    $overlay = getOverlay(statement);                   //call function to create the div tag
    $overlay.append($image);                             //append the image tag to the overlay
    $overlay.append($caption);                            //append the p tag to overlay
    $overlay.append($button);
    $("body").append($overlay);                          //append the overlay to the body
    getImage = $(this).attr("href");                     //sets a variable to the href of whatever image is clicked on
    $image.attr("src", getImage);                        //assigns the src of the image tag created above to the href

    captionText = $(this).children("img").attr("alt");  //sets a variable to the alternate text to be used as caption
    $caption.text(captionText);                          //assigns the alt text to the caption tag created above.
    $overlay.show();                                    //shows the overlay itself

});

this is the part I can't seem to get to work. I've messed around with it as you can see some of my idea was I've commented out. I have tried various ways of doing this and, just can't seem to figure out what it is I'm doing wrong.

$(document).ready(function () {
    "use strict";
    $("#closeIt").on('click', function (event) {
    //    var getClass, i;
    //    getClass = document.getElementsByClassName(".forclosing");
    //    for (i = 0; i < getClass.length; i += 1) {
    //        getClass[i].hide();
    //    }
        $(".forClosing).hide();
    });
});

The overlay works as I want, I have it styled using CSS it is the two problems mentioned above I haven't been able to resolve.

Thank You.

3 Answers

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

You didn't give your HTML, so I can't see the whole thing in operation, but I do spot one likely issue: when you establish your click handler for the button, the button hasn't been added to the document yet, so it's not effective. But you can establish the handler as a delegate that will work for elements created later like this:

      $("body").on('click', "#closeIt", function (event) {

If you have any other issues it would help if you create a workspace and then make a snapshot and provide the link.

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

https://w.trhou.se/34q3kvn0m4

Here is a snapshot of the workspace. I didn't load all of the photos nor all the various pages of the site as I am working page by page.

The button is appended to the document with the javaScript. By the time the overlay is complete the following gets appended to the document.

<div class="overlayTitlePage" style="display: block;">
<img src="img/articleCS.jpg">
<p>Caption Text Here</p>
<button class="closeIt forClosing">close</button>
</div>

I have tried what you suggested, I will continue to work on it today. I need to create some form of function to check if an overlay is already open and that will help get rid of multiple windows opening but, I still have to figure out why my close button won't operate.

Thank You.

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

Thank You, I got it! Your suggestion worked, I had changed my ID to a class last night why I was still trying to mess around with getting it to work. But otherwise that was it!