Hi,
This is a simplification of the thing I''m having problems with, just
to illustrate...
<div id="myDiv">
<ul>
<li><p>foo</p><span>bar</span><a
name="1">one</a></li>
...
<li><p>foo9</p><span>bar9</span><a
name="9">nine</a></li>
</ul>
</div>
<script>
$$(''#myDiv li'').each(function(liElement) {
liElement.observe(''mouseover'',function(event) {
var anchorElement = Event.element(event).down(''a'');
$(anchorElement).setStyle({
color: ''#fff''
});
});
})
</script>
My expection for the above was that each time the mouseover event
fires on a <li>, the function will cause the <a> inside that
<li> to
turn white. But unfortunately the event also seems to fire when any
other nested element within the <li> (i.e. the <div>s and
<span>s) get
moused-over. This gives me lots of nasty errors in Firebug:
$(anchorElement) has no properties
I realise that this is because when I mouseover the <p>s and
<span>s,
they are becoming the subject of the Event (Event.element), and they
don''t have a <a> inside them, so the ''down''
call is drawing a blank.
Is there something I should be doing to make sure only the <li>s''
mouseover events are is listened for?
What am I doing so badly wrong? I want the function to just be
triggered when I mouseover the <li>s.
Thanks,
Jonny
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
That''s a known annoyance.
You might consider using event#findElement [1].
Also, why not observe anchors directly?
$$(''#myDiv li > a'').invoke(''observe'',
''mouseover'', function(e) {
var element = e.findElement(''a'');
if (!element) return;
element.setStyle({ color: ''#fff'' });
})
[1] http://www.prototypejs.org/api/event/findElement
- kangax
On Apr 21, 9:09 pm, Jonny Nott
<jonn...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> Hi,
>
> This is a simplification of the thing I''m having problems with,
just
> to illustrate...
>
> <div id="myDiv">
> <ul>
> <li><p>foo</p><span>bar</span><a
name="1">one</a></li>
> ...
> <li><p>foo9</p><span>bar9</span><a
name="9">nine</a></li>
> </ul>
> </div>
>
> <script>
> $$(''#myDiv li'').each(function(liElement) {
> liElement.observe(''mouseover'',function(event) {
> var anchorElement =
Event.element(event).down(''a'');
> $(anchorElement).setStyle({
> color: ''#fff''
> });
> });})
>
> </script>
>
> My expection for the above was that each time the mouseover event
> fires on a <li>, the function will cause the <a> inside that
<li> to
> turn white. But unfortunately the event also seems to fire when any
> other nested element within the <li> (i.e. the <div>s and
<span>s) get
> moused-over. This gives me lots of nasty errors in Firebug:
>
> $(anchorElement) has no properties
>
> I realise that this is because when I mouseover the <p>s and
<span>s,
> they are becoming the subject of the Event (Event.element), and they
> don''t have a <a> inside them, so the
''down'' call is drawing a blank.
> Is there something I should be doing to make sure only the
<li>s''
> mouseover events are is listened for?
>
> What am I doing so badly wrong? I want the function to just be
> triggered when I mouseover the <li>s.
>
> Thanks,
> Jonny
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
Perfect, thanks!
The reason for not observing anchors directly is because I explicitly
want the styling of the <a> to change when I mouseover the <li> that
contains it. The solution I''ve arrived at is thus:
$$(''#myDiv li'').invoke(''observe'',
''mouseover'', function(e) {
var element = $(Event.element(e)).down(''a'');
if (!element) return;
element.setStyle({ color: ''#fff'' });
})
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---