The Little Guy Posted April 8, 2008 Share Posted April 8, 2008 I would like to make a JavaScript drop down menu, that I can do. Basically show a hidden div. What I would like to happen is for that div to stay there, until I click somewhere on the page, then it goes away. How can I do that? Example: - Go here: http://www.google.com/webhp?hl=en - Click on Menu - the menu stays there until you click somewhere else on the screen Link to comment https://forums.phpfreaks.com/topic/100181-solved-menu-dissapear-on-click/ Share on other sites More sharing options...
The Little Guy Posted April 9, 2008 Author Share Posted April 9, 2008 does anyone understand what I am talking about? or do I need a better explanation? Link to comment https://forums.phpfreaks.com/topic/100181-solved-menu-dissapear-on-click/#findComment-512928 Share on other sites More sharing options...
gluck Posted April 9, 2008 Share Posted April 9, 2008 use the same page and type "sucker fish" and hit search. You will have a number of links that will help you implement horizontal and vertical menus. Link to comment https://forums.phpfreaks.com/topic/100181-solved-menu-dissapear-on-click/#findComment-513438 Share on other sites More sharing options...
The Little Guy Posted April 10, 2008 Author Share Posted April 10, 2008 its not the drop down I need help with, its the making the drop down disappear when the user clicks somewhere on the screen. Link to comment https://forums.phpfreaks.com/topic/100181-solved-menu-dissapear-on-click/#findComment-513593 Share on other sites More sharing options...
zenag Posted April 10, 2008 Share Posted April 10, 2008 try this example code... <html> <head> <script type="text/javascript"> function disable() { document.getElementById("mySelect").disabled=true; } function enable() { document.getElementById("mySelect").disabled=false; } </script> </head> <body> <form> <select id="mySelect"> <option>Apple</option> <option>Pear</option> <option>Banana</option> <option>Orange</option> </select> <br /><br /> <input type="button" onclick="disable()" value="Disable list"> <input type="button" onclick="enable()" value="Enable list"> </form> </body> </html> Link to comment https://forums.phpfreaks.com/topic/100181-solved-menu-dissapear-on-click/#findComment-513649 Share on other sites More sharing options...
haku Posted April 10, 2008 Share Posted April 10, 2008 Try this: function setBodyListener() { var target = document.getElementsByTagName("body")[0] target.onclick=function() { var targetMenu = document.getElementById("menu_id") if(targetMenu.style.display == block) { targetMenu.style.display = none } } } window.onload = function() { setBodyListener() } For this to work, you have to give the menu an id of "menu_id". edit: not tested, never used. But it should work. Link to comment https://forums.phpfreaks.com/topic/100181-solved-menu-dissapear-on-click/#findComment-513735 Share on other sites More sharing options...
The Little Guy Posted April 14, 2008 Author Share Posted April 14, 2008 Haku, almost worked... I have this: function setBodyListener(){ var target = document.getElementsByTagName("body")[0]; target.onclick=function(){ for(var i = 0;i<25;i++){ //targetMenu = document.getElementById("usrInfo_"+i); if (document.getElementById("usrInfo_"+i)){ if(document.getElementById("usrInfo_"+i).style.display == 'block'){ document.getElementById("usrInfo_"+i).style.display = 'none'; } }else{ break; } } } } window.onload = function(){ setBodyListener(); } I think the problem is that it makes it a block, then does this: target.onclick=function(). I need to reverse that so it checks if it is a block then sets it to a block.. if you know what I mean... Link to comment https://forums.phpfreaks.com/topic/100181-solved-menu-dissapear-on-click/#findComment-516426 Share on other sites More sharing options...
haku Posted April 14, 2008 Share Posted April 14, 2008 Sorry, I don't get what you mean. What is happening when you click in the body now? Link to comment https://forums.phpfreaks.com/topic/100181-solved-menu-dissapear-on-click/#findComment-516445 Share on other sites More sharing options...
The Little Guy Posted April 14, 2008 Author Share Posted April 14, 2008 Basically what happens is that you click on a users name, and a pop-up box displays where you clicked. So basically my final result was this: function mouseLocation(id,act,e) { var posx = 0; var posy = 0; if (!e) var e = window.event; if (e.pageX || e.pageY) { posx = e.pageX; posy = e.pageY; } else if (e.clientX || e.clientY) { posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; } // posx and posy contain the mouse position relative to the document // Do something with this information if(act == 'hover'){ showImg(posx,posy,id); }else if(act == 'click'){ setBodyListener(id); showInfo(posx,posy,id); } } function setBodyListener(id){ var cled = true; var targetBody = document.getElementsByTagName("body")[0]; targetBody.onclick=function(){ if (document.getElementById("usrInfo_"+id) && cled){ if(document.getElementById("usrInfo_"+id).style.display == 'block'){ document.getElementById("usrInfo_"+id).style.display = 'none'; cled = false }else{ document.getElementById("usrInfo_"+id).style.display = 'block'; } } } } Link to comment https://forums.phpfreaks.com/topic/100181-solved-menu-dissapear-on-click/#findComment-516446 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.