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 Quote Link to comment 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? Quote Link to comment 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. Quote Link to comment 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. Quote Link to comment 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> Quote Link to comment 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. Quote Link to comment 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... Quote Link to comment 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? Quote Link to comment 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'; } } } } Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.