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