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/edit to
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 <[email protected]> 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" <[email protected]> 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 <[email protected]> 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 [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.
