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.


661f1291214063dd.html ( this relates to the thread id on google
groups )
prototype- ( 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/
                <meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
                <title>freshteapot.net | Close Div when click outside</title>
                <script src="./prototype-" type="text/javascript"></
<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.
        For more information, please visit <a href="http://groups.google.com/
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.
        Outside of the trigger area
<p><a id="show_menu" href="#">Show Menu</a></p>
<div id="select-pane">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
        Outside of the trigger area
<script type="text/javascript">

//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
        alert( "Click on Show Menu, to start the experiment");

//Hide the panel in question

        element = Event.element(event);
        if( $("select-pane").getStyle("display") == 'none' )
                //this means we are looking for elements which are not 
of the element with this id.
                outsideOf = "select-pane";
                //we invoke the call as it is quicker.
                //need to then stop this from observing the outside - ie 
requires it
at least
                outsideOf = null;
                //stopObserving the outside request as we have finished

function outside(event)
        if( outsideOf == null )
                //this shouldnt happen, but just incase
        element = Event.element(event);
        if( element.descendantOf( $(outsideOf) ) !== true)
                outsideOf = null;

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 
For more options, visit this group at 

Reply via email to