Question

I have a menu plugin in jQuery.
The menu is closed only when i click the inner circle of it…

http://www.tranceil.fm -> click the headphones

I want to close the menu by clicking anywhere, not just the inner circle

the header code is this

<script type="text/javascript">
            jQuery(document).ready(function(){


                var pieMenu = jQuery('#promo').pieMenu({icon : [
                        { 
                            path : "/wp-content/themes/Tersus/images/piemenu/winamp.png",
                            alt  : "Winamp",
                            fn   : function(){('Click:: Plus');window.location.href = 'http://94.23.250.14:2199/tunein/tranceilfm.pls';return false}
                        },  { 
                            path : "/wp-content/themes/Tersus/images/piemenu/vlc.png",
                            alt  : "VLC Media Player",
                            fn   : function(){('Click:: Plus');window.location.href = 'http://94.23.250.14:2199/tunein/tranceilfm.pls';return false}  
                        },{ 
                            path : "/wp-content/themes/Tersus/images/piemenu/QuickTime.png",
                            alt  : "Quick Time Player",
                            fn   : function(){('Click:: Plus');window.location.href = 'http://94.23.250.14:2199/tunein/tranceilfm.qtl';return false}
                        },{ 
                            path : "/wp-content/themes/Tersus/images/piemenu/WMP.png",
                            alt  : "Windows Media Player",
                            fn   : function(){('Click:: Plus');window.location.href = 'http://94.23.250.14:2199/tunein/tranceilfm.asx';return false}
                        },{ 
                            path : "/wp-content/themes/Tersus/images/piemenu/popup.png",
                            alt  : "נגן Popup",
                            fn   : function(){jQuery("#popupplay").click();return false}
                        },{ 
                            path : "/wp-content/themes/Tersus/images/piemenu/iTunes.png",
                            alt  : "iTunes",
                            fn   : function(){alert('...בקרוב');return false}
                        }],
                    beforeMenuOpen: function(){
                        jQuery('<div id="shadow"></div>').css(
                        {
                            'position':'fixed',
                            'background-color':'#000000',
                            'opacity': 0.6,
                            'width':'100%',
                            'height':'100%',
                            'z-index' :999,
                            'top':0,
                            'left':0
                        }).appendTo('body');
                    },
                    beforeMenuClose: function(){
                        jQuery('#shadow').remove();
                    }
                });

                jQuery('#promo').click(function(){
                if(jQuery('#'+pieMenu.id).css('display') != 'block') //if jpie is not visible
                pieMenu.initMenu(760,150);

                })
            });

        </script>   

The click event in the JS file ->

//click event
            jQuery('#'+idCore).live({
                click: function() {
                    if(closable)
                        removeMenu();
                },
                contextmenu:function(e){
                    e.preventDefault(); 
                }
            })

Any thoughts?

Answer 1

Looks like you need to remove the pie0 div and the shadow div when the shadow is clicked, because they’re being entirely generated/re-generated whenever they are brought on/back to the screen.

So just add this:

$('#shadow').on('click', function(event){
    $('#pie0').remove();
    $(this).remove();
});

Update: I just realized: because shadow is added dynamically after a user-event, and not present on documentready, you need to define it by attaching it to the body element, and delegating to a click on the shadow element, like this:

$('body').on('click', 'shadow', function(event){
    $('#pie0').remove();
    $(this).remove();
});