CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2682025
user2682025

Reputation: 804

Jquery background darker stays dark when I do the second click to remove it

I followed this tutorial with some changes because the tutorial have two functional buttons but I want to do the same with one button. the first click works perfect but when I do the second click the dark background still exist and don't go away, here's the code and JSfiddle:

$(document).ready(function () {
    var isOpen = false;

    function showOverlayBox() {
        //if box is not set to open then don't do anything
        if (isOpen == false) return;
        // set the properties of the overlay box, the left and top positions
        $('#help-content').toggle();
        // set the window background for the overlay. i.e the body becomes darker
        $('.bgCover').css({
            display: 'block',
            width: $(window).width(),
            height: $(window).height(),
        });
    }

    function doOverlayOpen() {
        //set status to open
        isOpen = true;
        showOverlayBox();
        $('.bgCover').css({
            opacity: 0
        }).animate({
            opacity: 0.5,
            backgroundColor: '#000'
        });
        // dont follow the link : so return false.
        $('#help').attr("class", "helpc");
        return false;
    }

    function doOverlayClose() {
        //set status to closed
        isOpen = false;
        $('#help-content').css('display', 'none');
        // now animate the background to fade out to opacity 0
        // and then hide it after the animation is complete.
        $('.bgCover').css({
            opacity: 0
        }).animate({
            opacity: 0
        }, function () {
            $(this).hide();
        });
        $('#help').attr("class", "help");
    }

    // if window is resized then reposition the overlay box
    $(window).bind('resize', showOverlayBox);
    // activate when the link with class launchLink is clicked
    $('.help').click(doOverlayOpen);
    // close it when closeLink is clicked
    $('.helpc').click(doOverlayClose);

});

http://jsfiddle.net/xoshbin/RuNa4/3/

Upvotes: 0

Views: 262

Answers (2)

dwaddell
dwaddell

Reputation: 1496

You are attaching the events incorrectly, here is a fiddle that works: http://jsfiddle.net/RuNa4/14/

// activate when the link with class launchLink is clicked
$(document).on( 'click', '.help', doOverlayOpen );
// close it when closeLink is clicked
$(document).on( 'click', '.helpc', doOverlayClose );

Basically what is happening is your first click event was attached but even though you were changing the class of the div the second event was never attached. I am using jQuery's .on like their old .live, documentation is here http://api.jquery.com/live/

Upvotes: 1

silicakes
silicakes

Reputation: 6902

Since .helpc doesn't exist when you bind the close event, the close event doesn't attached and the element still bound to the function of the help class, since jQuery caches the element and not the class name. instead - you should be using event delegetion where you create a container element, and check to see where the event originated from:

$(".wrapper").on("click", ".help", doOverlayOpen);
$(".wrapper").on("click", ".helpc", doOverlayClose);

here's the fiddle: http://jsfiddle.net/RuNa4/15/

Upvotes: 1

Related Questions