Make Notification Div Fade Out When User Click Anywhere Outside The Notification Div

Question

I'm making website that have notification 'button'. When user click this button, notification div will appear at the bottom of the button.

I want to make its behaviour like notifacation in facebook. the notification will disappear when user click anywhere outside the notification div element.

So far, i've succeed to make the notification div to fade in and fade out when the notification button clicked. i'm using jquery to do this.

but, i don't know how to make it fade out when user click anywhere outside the notification div.

Can anyone help me?

Here is my code that i've made:

<div id="notifikasi" style="position:relative; cursor:pointer">Notification<sup style="padding: 2px 4px 2px 4px; background: red"></sup>
    <div id="theNotif" style="position: absolute; top: 20px; left: 0px; background: #fff; color: #000; border: solid 1px #999; z-index: 999; padding: 10px 20px 10px 0px; width:200px; display:none">
        <ul>
            <li>Some Notification</li>
            <li>Some Notification</li>
            <li>Some Notification</li>
        </ul>
    </div>
</div>

<script>
$('#notifikasi').click(function(){
    if($('#theNotif').css('display') == 'none'){
        $('#theNotif').fadeIn('fast');
    }
    else{
        $('#theNotif').fadeOut('fast');
    }
});
</script>

Answer 1

Try this:

$(document).mouseup(function (e)
{
    var myDiv = $("#theNotif");
    if (myDiv.has(e.target).length === 0)
        myDiv.hide();
});

Answer 2

How about:

$('#notifikasi').click(function(){
    $('#theNotif').fadeIn('fast', function() {
        $(document).one('click', function(e) {
            $('#theNotif').fadeOut('fast');
        });
    });
});

// prevent triggering when clicking the actual notification
$('#theNotif').click(function() { return false; });​

Demo

Once the notification has faded in, a one-time-only click listener will be added to the document listening to any click.

---

Edit

Having played around like this a bit myself, I've come to the conclusion that .one is not really as useful here as I first imagined, as it requires a few other workarounds. The reason I used it was that it irked me to have to constantly listen to every single document click, just to cover the scenario where a notification was open.

I've decided instead that a neater way would be to use bind and unbind.

function closeNotification(e) {
   if($(e.target).closest('#theNotif').length > 0) {
      // notification or child of notification was clicked; ignore
      return;
   }

   $('#theNotif').fadeOut('fast');
   $(document).unbind('click', closeNotification);
};

$('#notifikasi').click(function(){
    $('#theNotif').fadeIn('fast', function() {
        $(document).bind('click', closeNotification);
    });
});

Demo

The code above is conceptually rather similar to the original code. After fade-in, a click listener is registered at the document. This time, a check is made within the document click listener, to see if the clicked element was #theNotif or a child of #theNotif , in which case the close function exits immediately.

Otherwise, it proceeds to close the notification and then immediately unbind the listener.

Note that you'll have to use a named function, not an anonymous inline one as you might be used to in jQuery, in order to be able to properly unbind it.

Answer 3

Set a variable when mouse moves over notifikasi (say a=1), unset it when moves outside. Similarly for theNotif. Now

$(document).click(function(){
    if(a == 0){
        if($('#theNotif').css('display') == 'block' || $('#theNotif').css('display') == ''){
            $('#theNotif').fadeOut('fast');
        }
    }
});