Wow, this looks promising. I will take a look, thanks for helping me
out.

On Jan 21, 7:56 am, freshteapot <ch...@freshteapot.net> wrote:
> 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 prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to 
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to