SitePoint Sponsor |
|
User Tag List
Results 1 to 6 of 6
Thread: document.onmousedown close menu
-
Jul 17, 2006, 09:09 #1
- 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 showuser( inputObj )
{
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;
}
}
function hideUserMenu( )
{
$('usermenu').style.display = 'none';
}
-
Jul 17, 2006, 09:57 #2
- 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; }
-
Jul 17, 2006, 10:26 #3
- 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.
-
Jul 17, 2006, 11:42 #4
- 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; } }
Code:myMenuItem.onclick = function(evt) { // do stuff evt = evt ? evt : window.event; if (evt.stopPropagation) { evt.stopPropagation(); } else if (evt.cancelBubble) { evt.cancelBubble = true; } }
-
Jul 17, 2006, 19:46 #5
- 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 showuser( inputObj )
{
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';
}
-
Jul 17, 2006, 20:23 #6
- 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 showuser( inputObj )
{
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( e )
{
if( !e ) e = window.event;
if( e.keyCode == 27 ) { hideUserMenu(); }
}
document.onmousedown = function( e )
{
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
{
showuser( inputObj );
openM = true;
return;
}
}
}
function hideUserMenu( )
{
$('usermenu').style.display = 'none';
}
Bookmarks