Rails spinoffs - Jun 2007 - Event inheritance and finding the right div

Hello, I have a structure like this:

<div id="container">
  <div id="left_side"><p>Here is some
text</p></div>
  <div id="right_side"></div>
</div>


I''ve assigned a click event to the left_side div like this:

Event.observe("left_side","click",functionName);

By default, the ''event'' object is sent to the function when
it''s
fired.  What I''m trying to do is make sure that the function was
called from the either "left_side" div or something inside of it.

For example, if I click the paragraph inside the left_side div, the
click event will fire (which is what I want) - but since I''ve clicked
the paragraph, the event object references the paragraph instead of
the left_side div.  Since I want to do something special whenever the
left_side div (or anything in it) is clicked, I''m trying to find a way
to ensure that anything clicked *inside* of the left_side div will
fire the ''special'' version of the click handler.

Is there a way for me to determine that the click event occurred
within the left_side div - even though the actual element clicked
isn''t the left_side div itself (but is inside of it) - or am I better
off just writing two different event handlers?

Thanks,

Jon

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Hey Jon,

Jon Trelfa a écrit :
> <div id="container">
>   <div id="left_side"><p>Here is some
text</p></div>
>   <div id="right_side"></div>
> </div>
> 
> I''ve assigned a click event to the left_side div like this:
> 
> Event.observe("left_side","click",functionName);
> 
> By default, the ''event'' object is sent to the function
when it''s
> fired.  What I''m trying to do is make sure that the function was
> called from the either "left_side" div or something inside of it.
Why?  You can be sure: it''s per-spec.  Observing an event on a given 
element will only get this event when triggered by the element or its 
descendants tree.
> the left_side div.  Since I want to do something special whenever the
> left_side div (or anything in it) is clicked, I''m trying to find a
way
> to ensure that anything clicked *inside* of the left_side div will
> fire the ''special'' version of the click handler.
Oh, so you mean a distinct behavior for click on the div itself, and 
click on stuff inside the div?  Then just check Event.element(e) against 
  the div itself, and use a if/else.
> Is there a way for me to determine that the click event occurred
> within the left_side div - even though the actual element clicked
> isn''t the left_side div itself (but is inside of it) - or am I
better
> off just writing two different event handlers?
If you''re just trying to handle any click on the div or inside it the 
same way, then there''s *nothing* to do: just write the handler.  If 
you''re going for two behaviors, as described earlier, it''s a
simple ==
matter.

-- 
Christophe Porteneuve aka TDD
tdd-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

On 6/8/07, Christophe Porteneuve
<tdd-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org> wrote:
> Oh, so you mean a distinct behavior for click on the div itself, and
> click on stuff inside the div?  Then just check Event.element(e) against
>   the div itself, and use a if/else.
>
> > Is there a way for me to determine that the click event occurred
> > within the left_side div - even though the actual element clicked
> > isn''t the left_side div itself (but is inside of it) - or am
I better
> > off just writing two different event handlers?
>
> If you''re just trying to handle any click on the div or inside it
the
> same way, then there''s *nothing* to do: just write the handler. 
If
> you''re going for two behaviors, as described earlier,
it''s a simple => matter.
>
What I have is a function called ''toggler''.  The
toggler''s job is to
slide something back and forth in a box.  Here''s the box:

+---+---+
 |    |    |
+---+---+

(hope that showed up right)

The idea is that when the middle bar or anything in the left side is
clicked, the box will grow and the right side box will shrink.  When
you click again, the toggler puts the boxes back to their original
sizes.

This was working - except every single time I clicked the left side,
the toggler would reverse whatever state the boxes were in.

What I really wanted to do was make sure that if the left side box was
already set to it''s larger size, any click *within* the left side
would NOT actually make the boxes go back to their original size -
they would stay the same unless the middle bar was clicked (I wired
the right side box to the toggler as well, so the same rules apply for
the right side, too).

The trouble was that if I clicked an element inside the box that
wasn''t the actual box, the Event.element(e) was returning the actual
element clicked - so I couldn''t differentiate consistently between an
element inside the box or the box itself.

I did some poking around the prototype API and came across this gem:
http://prototypejs.org/api/element/descendantOf

And I ended up doing this: (leftSideToggled is a boolean set when the
box changes size):

toggler(e) {
  if (Event.element(e).descendantOf("left_side") &&
leftSideToggled) {
    return;
  } else {
    //do stuff
  }
}

That way, I was able to avoid writing two functions and got the
behavior I needed.

Thank you for your help!
Jon

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Jon,

You may also need to see if $("left_side") itself was clicked, since
your
snippet there will only evaluate true if the clicked element was *inside* of
it.

Adam

On 6/8/07, Jon Trelfa <jtrelfa-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
>
>
> On 6/8/07, Christophe Porteneuve
<tdd-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org> wrote:
>
> > Oh, so you mean a distinct behavior for click on the div itself, and
> > click on stuff inside the div?  Then just check Event.element(e)
against
> >   the div itself, and use a if/else.
> >
> > > Is there a way for me to determine that the click event occurred
> > > within the left_side div - even though the actual element clicked
> > > isn''t the left_side div itself (but is inside of it) -
or am I better
> > > off just writing two different event handlers?
> >
> > If you''re just trying to handle any click on the div or
inside it the
> > same way, then there''s *nothing* to do: just write the
handler.  If
> > you''re going for two behaviors, as described earlier,
it''s a simple => > matter.
> >
>
> What I have is a function called ''toggler''.  The
toggler''s job is to
> slide something back and forth in a box.  Here''s the box:
>
> +---+---+
> |    |    |
> +---+---+
>
> (hope that showed up right)
>
> The idea is that when the middle bar or anything in the left side is
> clicked, the box will grow and the right side box will shrink.  When
> you click again, the toggler puts the boxes back to their original
> sizes.
>
> This was working - except every single time I clicked the left side,
> the toggler would reverse whatever state the boxes were in.
>
> What I really wanted to do was make sure that if the left side box was
> already set to it''s larger size, any click *within* the left side
> would NOT actually make the boxes go back to their original size -
> they would stay the same unless the middle bar was clicked (I wired
> the right side box to the toggler as well, so the same rules apply for
> the right side, too).
>
> The trouble was that if I clicked an element inside the box that
> wasn''t the actual box, the Event.element(e) was returning the
actual
> element clicked - so I couldn''t differentiate consistently between
an
> element inside the box or the box itself.
>
> I did some poking around the prototype API and came across this gem:
> http://prototypejs.org/api/element/descendantOf
>
> And I ended up doing this: (leftSideToggled is a boolean set when the
> box changes size):
>
> toggler(e) {
>   if (Event.element(e).descendantOf("left_side") &&
leftSideToggled) {
>     return;
>   } else {
>     //do stuff
>   }
> }
>
> That way, I was able to avoid writing two functions and got the
> behavior I needed.
>
> Thank you for your help!
> Jon
>
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Thanks :)  I expanded the functionality a bit more and started
checking for other stuff within the left_side.  For example, some
anchors needed to behave like the right side, so I checked descendant
and tagName and other ''stuff''.

On 6/11/07, Adam McCrea
<adam.mccrea-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> Jon,
>
> You may also need to see if $("left_side") itself was clicked,
since your
> snippet there will only evaluate true if the clicked element was *inside*
of
> it.
>
> Adam
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---