Morsusy2k Posted December 10, 2012 Share Posted December 10, 2012 I'm trying to make some kind of menu. I used codes from jQuery slide and events examples,but i'm stuck with this.If you run this php you get a menu that falls down but never goes up. <!DOCTYPE html><html><head><script src="jquery.js"></script><script>$(document).ready(function(){ $("#flip").mouseenter(function(){ $("#panel").slideDown("fast"); });}); $("#flip,#panel").mouseleave(function(){ $("#panel").slideUp("fast");});</script><style type="text/css">#flip{padding:5px;font-size: 20px;text-align:left;background-color:#fff;border:0px;width:150px;}#panel{padding:5px;font-size: 15px;text-align:left;background-color:#fff;border:0px;width:150px;}#panel{width:150px;display:none;}</style></head><body><div id="flip">AAAAAAAAAA</div><div id="panel">Hello world!<br>Hello world!<br>Hello world!</div></body></html> This aint working also...If someone rollsover with mouse he cant pick any of items below (Any of "Hello world!"s) because it closes....I know i'm missing something stupid,but help <!DOCTYPE html><html><head><script src="jquery.js"></script><script>$(document).ready(function(){ $("#flip").hover(function(){ $("#panel").slideDown("fast"); });}); $("#flip,#panel").mouseleave(function(){ $("#panel").slideUp("fast");});</script><style type="text/css">#flip{padding:5px;font-size: 20px;text-align:left;background-color:#fff;border:0px;width:150px;}#panel{padding:5px;font-size: 15px;text-align:left;background-color:#fff;border:0px;width:150px;}#panel{width:150px;display:none;}</style></head><body><div id="flip">AAAAAAAAAA</div><div id="panel">Hello world!<br>Hello world!<br>Hello world!</div></body></html> Thanks Link to comment Share on other sites More sharing options...
dsonesuk Posted December 10, 2012 Share Posted December 10, 2012 You have the closing tag for $(document).ready BEFORE the mouseleave code, it therefore tries to find the element with flip. panel id reference for mouseleave on reaching the code, they don't exist yet, so it fails, the rest of page is rendered then document ready kicks in, where these id reference can now be found and only the mouseover is applied, the same applies to other version as well. Link to comment Share on other sites More sharing options...
Morsusy2k Posted December 10, 2012 Author Share Posted December 10, 2012 So this should be the solution,but it isn't. It still slides up even if my mouse is on #panel... <script>$(document).ready(function(){ $("#flip").mouseenter(function(){ $("#panel").slideDown("fast"); }); $("#flip,#panel").mouseleave(function(){ $("#panel").slideUp("fast");});});</script> Link to comment Share on other sites More sharing options...
justsomeguy Posted December 10, 2012 Share Posted December 10, 2012 If the mouse leaves #flip, then #panel closes. It's not saying to only close #panel if the mouse is not over #panel, you're just saying that if the mouse leaves either #flip or #panel, then close #panel. Maybe you need additional code to check if the mouse is over #flip or #panel before closing #panel. Link to comment Share on other sites More sharing options...
Morsusy2k Posted December 10, 2012 Author Share Posted December 10, 2012 Any suggestions? Link to comment Share on other sites More sharing options...
justsomeguy Posted December 10, 2012 Share Posted December 10, 2012 http://www.google.com/search?client=opera&rls=en&q=jquery+check+if+mouse+is+over+an+element&sourceid=opera&ie=utf-8&oe=utf-8&channel=suggest Link to comment Share on other sites More sharing options...
dsonesuk Posted December 10, 2012 Share Posted December 10, 2012 (edited) Normally with menus you would use an unordered list, because the sub ul list items which would the #panel content would be the child of parent li, and therefore you would target the parent to hide or show sublist, on mouseover or leave. For your example you would have to target the next sibling, using '+' $(document).ready(function(){ $("#flip").mouseenter(function(){ $("#panel").slideDown("fast"); }); $("#flip + #panel").mouseleave(function(){ $("#panel").slideUp("fast");}); }); or $(document).ready(function(){ $("#flip").mouseenter(function(){ $("#panel").slideDown("fast"); }); $("#flip").next('#panel').mouseleave(function(){ $("#panel").slideUp("fast");}); }); The unordered list option would be better, because you can a normal dropdown with css alone, and when JavaScript is enabled, the jquery effect. Edited December 10, 2012 by dsonesuk Link to comment Share on other sites More sharing options...
Morsusy2k Posted December 10, 2012 Author Share Posted December 10, 2012 Thats what i'm talking about xDI knew it was simple...thanks Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now