Hi Dave L, copy and paste below the line, you might need to make adjustments for google groups wrapping the posts.
Otherwise download it from. http://www.freshteapot.net/resources/661f1291214063dd.zip 661f1291214063dd.zip includes: 661f1291214063dd.html ( this relates to the thread id on google groups ) prototype-1.6.0.3.js ( courtesy of prototypejs.org of course ) Hope that helps with your little problem. ------------------------------------------------------------------------------------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/ TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>freshteapot.net | Close Div when click outside</title> <script src="./prototype-1.6.0.3.js" type="text/javascript"></ script> </head> <body> <p > <a id="info" href="#">This page</a> demonstrates how to use observe, stopObserving and keep track of when an event ( in this case a click ) happens outside of a trigger area. Potentially, this could lead to a nice class. </p> <p> For more information, please visit <a href="http://groups.google.com/ group/prototype-scriptaculous/browse_thread/thread/ 661f1291214063dd">Google Groups - Prototype & script.aculo.us - Close Div when click outside</a>. Please note clicking this link will take you to the page. Even if you have started the experiment. </p> <p> Outside of the trigger area </p> <p><a id="show_menu" href="#">Show Menu</a></p> <div id="select-pane"> <p>Inside</p> <select> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> <p> Outside of the trigger area </p> <script type="text/javascript"> //<![CDATA[ //scroll down for the code - just wanted to make it clearer to see //We use this to keep track of what element we want to be outsideOf - potentially using this you could expand and create a class var outsideOf = null; //This is just so you can click the top link. Nothing more $("info").observe("click",function(event){ Event.stop(event); alert( "Click on Show Menu, to start the experiment"); }); //Hide the panel in question $("select-pane").hide(); $("show_menu").observe('click',function(event){ Event.stop(event); element = Event.element(event); if( $("select-pane").getStyle("display") == 'none' ) { //this means we are looking for elements which are not descendants of the element with this id. outsideOf = "select-pane"; $("select-pane").show(); //we invoke the call as it is quicker. $(document.body).descendants().invoke('observe','click',outside); //need to then stop this from observing the outside - ie requires it at least element.stopObserving('click',outside); }else{ outsideOf = null; //stopObserving the outside request as we have finished $(document.body).descendants().invoke ('stopObserving','click',outside); $("select-pane").hide(); } }); function outside(event) { if( outsideOf == null ) { //this shouldnt happen, but just incase $(document.body).descendants().invoke ('stopObserving','click',outside); return; } element = Event.element(event); if( element.descendantOf( $(outsideOf) ) !== true) { outsideOf = null; $(document.body).descendants().invoke ('stopObserving','click',outside); $("select-pane").hide(); } } //]]> </script> </body> </html> --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~----------~----~----~----~------~----~------~--~---
