SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Addict say's Avatar
    Join Date
    Sep 2003
    Location
    At work
    Posts
    371
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    document.onmousedown close menu

    Hi,

    I currently have a image button that does a dropmenu onclick. However, I need to be able to close the menu when user click on outside of the image (so i use document.onmousedown to capture the event). Everything went well, except now that when the user click on the image itself "again" when the menu is open, i'd want it to close the menu but instead, once you click on the image, the document.onmousedown event will close the menu first and then reopen the menu. The simpler sense, it is currently conflicting with document.onmousedown event.

    The full code is here (Hope someone have any ideas?):

    PHP Code:
    function showuserinputObj )
    {
        if( $(
    'usermenu').style.display == 'none' )
        {
            $(
    'usermenu').style.position 'absolute';
            $(
    'usermenu').style.display 'block';
            
            var 
    leftPos = (getLeftPos(inputObj) - 38);
            var 
    topPos  =  getTopPos(inputObj) + 30;
            
            $(
    'usermenu').style.left leftPos 'px';
            $(
    'usermenu').style.top  topPos  'px';
        }
        
        
    document.onmousedown = function( )
        {
            
    hideUserMenu( );
            return;
        }
    }

    function 
    hideUserMenu( )
    {
        $(
    'usermenu').style.display 'none';


  2. #2
    SitePoint Wizard Young Twig's Avatar
    Join Date
    Dec 2003
    Location
    Albany, New York
    Posts
    1,355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    var open = false;
    
    document.onmousedown = function(e)
    {
    	if(open)
    	{
    		hideUserMenu();
    	}
    
    	else
    	{
    		showUserMenu();
    	}
    
    	open = !open;
    }

  3. #3
    SitePoint Addict say's Avatar
    Join Date
    Sep 2003
    Location
    At work
    Posts
    371
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Young,

    no dice. Is not working. Still the same result as in reopen the menu after mousedown. I forgot to mention, even by clicking on the open menu links, it doesnt go to the link, instead it just close off the menu.

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, what happens is the onmousedown event fires before the onclick event, and since you're not capturing onmousedown for the image or menu it bubbles/propagates up to the document.

    Did you try using document.onclick to close the menu? Like:

    Code:
    open = false;
    
    myImage.onclick = function() {
    	if( open ) {
    		hideMenu();
    	} else {
    		showMenu();
    	}
    	open = !open;
    }
    
    document.onclick = function() {
    	if( open ) {
    		hideMenu();
    		open = false;
    	}
    }
    If that doesn't work and it's still propagating, try using a function like this to handle your menu onclick:

    Code:
    myMenuItem.onclick = function(evt) {
    	// do stuff
    	
    	evt = evt ? evt : window.event;
    	if (evt.stopPropagation) {
    		evt.stopPropagation();
    	} else if (evt.cancelBubble) {
    		evt.cancelBubble = true;
    	}
    }

  5. #5
    SitePoint Addict say's Avatar
    Join Date
    Sep 2003
    Location
    At work
    Posts
    371
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Jim,

    the first method I've just tried. Doesn't work. For the second propagating method, i've no idea how to implement it to my code :S

    PHP Code:
    openM false;

    function 
    showuserinputObj )
    {
        
    openM true;
        
        if( $(
    'usermenu').style.display == 'none' )
        {
            $(
    'usermenu').style.position 'absolute';
            $(
    'usermenu').style.display 'block';
            
            var 
    leftPos = (getLeftPos(inputObj) - 38);
            var 
    topPos  =  getTopPos(inputObj) + 30;
            
            $(
    'usermenu').style.left leftPos 'px';
            $(
    'usermenu').style.top  topPos  'px';
        }
        
        
    /*
        document.onmousedown = function( e )
        {
            hideUserMenu( );
            return;
        }
        */
        
    $('avatar_pull').onclick = function( )
        {        
            if( 
    openM )
            {
                
    hideUserMenu( );
            }
            else
            {
                
    showuser( );
            }
            
    openM = !openM;
        }

        
    document.onclick = function( )
        {
            if( 
    openM )
            {
                
    hideUserMenu( );
                
    openM false;
            }
        }
    }

    function 
    hideUserMenu( )
    {
        $(
    'usermenu').style.display 'none';


  6. #6
    SitePoint Addict say's Avatar
    Join Date
    Sep 2003
    Location
    At work
    Posts
    371
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    is getting close. Right now, the situation is:

    Scenerio #1:
    1) Click on the image button, the menu open
    2) Click on the image button again, the menu close

    Scenerio #2:
    1) Click on the image button, the menu open
    2) Click on outside of the document, the menu close
    3) click on the image button again, dont work the first time. Click again and it will open back the menu.

    So the problem now is @ Scenerio #2: point 3

    PHP Code:
    openM false;

    function 
    showuserinputObj )
    {
        if( $(
    'usermenu').style.display == 'none' )
        {
            
    openM true;
            
            $(
    'usermenu').style.position 'absolute';
            $(
    'usermenu').style.display 'block';
            
            var 
    leftPos = (getLeftPos(inputObj) - 38);
            var 
    topPos  =  getTopPos(inputObj) + 30;
            
            $(
    'usermenu').style.left leftPos 'px';
            $(
    'usermenu').style.top  topPos  'px';
            
            
    document.onkeydown = function( )
            {
                if( !
    window.event;
                if( 
    e.keyCode == 27 ) { hideUserMenu(); }
            }
            
    document.onmousedown = function( )
            {
                
    hideUserMenu( );
                return;
            }
        }

        
    inputObj.onclick = function(evt)
        {
            if( 
    openM )
            {
                
    // do stuff
                
    hideUserMenu( );
                
                
    evt evt evt window.event;
                if (
    evt.stopPropagation) {
                    
    evt.stopPropagation();
                } else if (
    evt.cancelBubble) {
                    
    evt.cancelBubble true;
                }
                
                
    openM false;
                return;
            }
            else
            {
                
    showuserinputObj );
                
    openM true;
                return;
            }
        }
    }

    function 
    hideUserMenu( )
    {
        $(
    'usermenu').style.display 'none';



Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •