Wow, this looks promising. I will take a look, thanks for helping me
out.
On Jan 21, 7:56 am, freshteapot <[email protected]> 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 [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
-~----------~----~----~----~------~----~------~--~---
