Javascript function interacts with other function

Question

I am completely new to javascript (and jquery) and have been experimenting with drop down menus the past couple of days. I found this one fancy notification menu, and I tried to see what happens when I have two of them on the page. Anyways, I made a quick example of my problem here:

http://jsfiddle.net/rgt03mu4/24/

The problem is that I can have both notification containers open up if I click on both.

enter image description here

If I am already clicked on one of the bells, then I click on the other, it should close the other one. Instead it keeps it open, and even when you click on the other container one, it still doesn't close it. You have to click off the page or click the notification bells. I am trying to make it to where you can only have one open at a time. So in order to do this, I tried changing the names of the functions:

As you can see:

$(function() {
    var nContainer = $(".notification-popup-container");

    //notification popup
    $("#notification-link").click(function() {
        nContainer.fadeToggle(300);
        return false;
    });

    //page click to hide the popup
    $(document).click(function() {
        nContainer.hide();
    });

    //popup notification bubble on click
    nContainer.click(function() {
        return false;
    });
});

I added the next function to be called test(), which you would think, since it's an entirely new function it would work differently. Instead, the error still persists.

What am I doing wrong? I even gave the the new bell it's own divs and link name. I also renamed container to container2.

From what I see it appears you just put the container names outside the functions? — Josh Potter
– Josh Potter, Commented May 20, 2015 at 4:04
yes...you have to mark the variable of the container as global so that both of the function can access it. — Akash Rajbanshi
– Akash Rajbanshi, Commented May 20, 2015 at 4:04
Then use simple hide() function to hide the unwanted container whereever required — Akash Rajbanshi
– Akash Rajbanshi, Commented May 20, 2015 at 4:05

Akash Rajbanshi · Accepted Answer · 2015-05-20 04:12:40Z

1

Set the global variable for your container:

var nContainer = $(".notification-popup-container");
var nContainer2 = $(".notification2-popup-container");
$(function() {
var nContainer = $(".notification-popup-container");

//notification popup
$("#notification-link").click(function() {
    nContainer.fadeToggle(300);
    nContainer2.hide(); //hide the second container
    return false;
});

//page click to hide the popup
$(document).click(function() {
    nContainer.hide();
});

//popup notification bubble on click
nContainer.click(function() {
    return false;
});
});

And you can do same with other function. DEMO

answered May 20, 2015 at 4:12

Akash Rajbanshi

1,60314 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

phl · Accepted Answer · 2015-05-20 04:38:01Z

There is no need to give the popup containers different classnames. I would give the a-tags a common classname instead of an id. The href can be used to identify the target popup, so the binding between the link and the target popup is set in the origin of action. The JS part would be abstracted and could be reused.

<a class='notification-link' href='#firstpopup'>X</a>
<a class='notification-link' href='#secondpopup'>X</a>
<div class='notification-popup-container' id="firstpopup">
    ... firstpopup
</div>
<div class='notification-popup-container' id="secondpopup">
    ... secondpopup
</div>

The click handler first hides all the popups before opening a new one.

$(".notification-link").click(function () {
    $(".notification-popup-container").hide();
    var targetId = $(this).attr('href');
    $(targetId).fadeIn(300);
    return false;
})

working example: http://jsfiddle.net/qyLekdwk/

Arun P Johny · Accepted Answer · 2015-05-20 04:17:04Z

The problem here is how the event propgation is handled

$(function () {
    var nContainer = $(".notification-popup-container");

    //notification popup
    $("#notification-link").click(function () {
        nContainer.fadeToggle(300);
    });

    //page click to hide the popup
    $(document).click(function (e) {
        if (!$(e.target).closest('#notification-link, .notification-popup-container').length) {
            nContainer.hide();
        }
    });
});
$(function test() {
    var nContainer2 = $(".notification2-popup-container");

    //notification popup
    $("#notification2-link").click(function test() {
        nContainer2.fadeToggle(300);
    });

    $(document).click(function (e) {
        if (!$(e.target).closest('#notification2-link, .notification-popup-container').length) {
            nContainer2.hide();
        }
    });
});

Demo: Fiddle

Collectives™ on Stack Overflow

Javascript function interacts with other function

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related