Hi,

Actually, sorry, in the quoted code change this:

    if (this.id != 'the_ID_of_your_special_div') {

to

    if (!event.findElement("#the_ID_of_your_special_div")) {

...to ensure that clicks on child elements of your special div are
handled correctly.

Here's the updated JSBin: http://jsbin.com/ukitu3/2 (http://jsbin.com/
ukitu3/2/edit)

-- T.J.

On Sep 21, 10:42 am, "T.J. Crowder" <t...@crowdersoftware.com> wrote:
> Hi,
>
> > I want the div to close when the user clicks
> > on anything BUT the div.
>
> Well, we can't do that with delegation, because the elements
> themselves may have click handlers or default behaviors that would
> happen before the click bubbled up to the document body.
>
> You *could* do that by setting an observer on every other element
> while your div is showing. The code's small, but calling it a
> sledgehammer would be an understatement:
> * * * *
>   var list = $$("*");
>   list.invoke('observe', 'click', handleAllClicks);
>   function handleAllClicks(event) {
>     event.stop();
>     if (this.id != 'the_ID_of_your_special_div') {
>       // Remove/hide/whatever the special div
>       ...
>
>       // Unhook the handlers:
>       list.invoke('stopObserving', 'click', handleAllClicks);
>     }
>   }
> * * * *
> Example:http://jsbin.com/ukitu3(http://jsbin.com/ukitu3/editto
> edit)
>
> But that just seems like a really bad idea.
>
> The usual way you handle this is with an iframe shim, which also
> handles ensuring your pop-up correctly pops up over plug-ins and OS-
> rendered controls. This basically involves creating a transparent
> iframe that covers the entire document/viewport (or semi-transparent
> if you want that "dimmed out" effect), giving it a z-index so that it
> appears above everything else, and then giving your pop-up div a
> higher z-index than the iframe. If you search for "iframe shim" you'll
> find several examples. Then you just use clicks on the iframe to
> dismiss your "modal" popup.
>
> HTH,
> --
> T.J. Crowder
> Independent Software Engineer
> tj / crowder software / com
> www / crowder software / com
>
> On Sep 20, 9:07 pm, Jason <jasonstanle...@gmail.com> wrote:
>
>
>
> > Hi T.J.
>
> > Sorry for being unclear. I want the div to close when the user clicks
> > on anything BUT the div.
>
> > What you have written makes sense with the findElement. Can
> > findElement by used to literally find any element and then compare it
> > to find out if it is a child or parent of the relevant div. This way I
> > could determine if the clicked element is part of the open div, if it
> > isn't I could then hide the div.
>
> > On Sep 20, 8:12 am, "T.J. Crowder" <t...@crowdersoftware.com> wrote:
>
> > > Hi,
>
> > > Not entirely sure what you're trying to do, but this will fail:
>
> > >     $(document.body).descendants().observe
> > >                                    ^-- Problem here
>
> > > `#observe` is a function Prototype adds to *elements*, not arrays.
> > > `#descendants` returns an array. Although you could fix this via
> > > `#invoke`, here's an alternative:
>
> > > If you're trying to catch a click wherever it occurs, just watch for
> > > it on `document` -- the click event bubbles up the hierarchy. You can
> > > find out what element the click actually happened on by using the
> > > `Event#findElement` function. That starts with the deepest-down
> > > element on which the event occurred and then searches upward for the
> > > first element matching the selector you give it. So for example, this
> > > code handles a click if it occurs in any `a` element, even if it
> > > actually occurs in a `strong` or `span` or whatever within the `a`
> > > element:
>
> > > Example:http://jsbin.com/upetu
> > > * * * *
> > > document.observe("click", function(event) {
> > >   display("Document clicked");
> > >   var a = event.findElement('a');
> > >   if (a) {
> > >     display("Click was anchor '" + a.id + "'!");
> > >     event.stop(); // Just for our purposes
> > >     a.setStyle({backgroundColor: blue});
> > >   }
>
> > >   function display(msg) {
> > >     document.body.appendChild(new Element('p').update(msg));
> > >   }});
>
> > > * * * *
>
> > > HTH,
> > > --
> > > T.J. Crowder
> > > Independent Software Engineer
> > > tj / crowder software / com
> > > www / crowder software / com
>
> > > On Sep 20, 11:47 am, Jason <jasonstanle...@gmail.com> wrote:
>
> > > > Hello,
>
> > > > I am modifying this:http://cpicker.com/
>
> > > > I have made good progress, everything is working great. I now need to
> > > > make one last modification.
>
> > > > I think I need to do something like this but I am new to prototype and
> > > > don't really get it.
>
> > > > $(document.body).descendants().observe('click', function() {
> > > >         if ($('stroke_color').getStyle('display') == 'block') {
> > > >                 if ({not a decendant of stroke_color}) {
> > > >                      $('stroke_color').hide();
> > > >                 }
> > > >         }
>
> > > > });
>
> > > > Can anyone help please?
>
> > > > Thanks.

-- 
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-scriptacul...@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