I''m trying to observe mouseout and mouseover events on 5 elements on
my page.
Instead of this verbose method:
Event.observe(''badge1'',''mouseover'',function(e){$(''badge1'').src=''images/
rollover/badge1.jpg'';});
Event.observe(''badge1'',''mouseout'',function(e){$(''badge1'').src=''images/
regular/badge1.jpg'';});
Event.observe(''badge2'',''mouseover'',function(e){$(''badge2'').src=''images/
rollover/badge2.jpg'';});
Event.observe(''badge2'',''mouseout'',function(e){$(''badge2'').src=''images/
regular/badge2.jpg'';});
Event.observe(''badge3'',''mouseover'',function(e){$(''badge3'').src=''images/
rollover/badge3.jpg'';});
Event.observe(''badge3'',''mouseout'',function(e){$(''badge3'').src=''images/
regular/badge3.jpg'';});
Event.observe(''badge4'',''mouseover'',function(e){$(''badge4'').src=''images/
rollover/badge4.jpg'';});
Event.observe(''badge4'',''mouseout'',function(e){$(''badge4'').src=''images/
regular/badge4.jpg'';});
Event.observe(''badge5'',''mouseover'',function(e){$(''badge5'').src=''images/
rollover/badge5.jpg'';});
Event.observe(''badge5'',''mouseout'',function(e){$(''badge5'').src=''images/
regular/badge5.jpg'';});
I tried this method:
for (var x = 1; x <= 5; x++){
var badgeID = "badge" + x;
Event.observe(badgeID,''mouseover'',function(e){$(badgeID).src=''images/
rollover/''+badgeID+''.jpg'';});
Event.observe(badgeID,''mouseout'',function(e){$(badgeID).src=''images/
regular/''+badgeID+''.jpg'';});
}
But the last method only observes the last image. Rolling over images
1-4 changes the 5th image only. any ideas on what I''m missing to
achieve the same effect as the first method?
Thanks!
chris
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
You''ve got a scoping problem. The variable badgeID is populated with
the value it has when the function is run, not when it is declared,
so the behavior you''re seeing is expected. If you rewrite your
function to use Event.element instead of passing the ID, you could
reuse the function, which would also speed up your code.
var f = function (e) {
var id = Event.elment(e).id;
...
}
for ( ... ) {
Event.observe(badgeID, ''mouseover'', f);
Event.observe(badgeID, ''mouseout'', f);
}
But really, this is a job best handled by CSS''s :hover pseudo class,
not Javascript. Something like the following should work well:
a.class img.hover {display:none;}
a.class:hover img {display:none;}
a.class:hover img.hover {display:block;}
<a class="badge"><img src="1.jpg" /><img
class="hover" /></a>
TAG
On Sep 17, 2007, at 2:59 PM, Loony2nz wrote:
>
> I''m trying to observe mouseout and mouseover events on 5 elements
on
> my page.
>
> Instead of this verbose method:
>
Event.observe(''badge1'',''mouseover'',function(e){$
> (''badge1'').src=''images/
> rollover/badge1.jpg'';});
>
Event.observe(''badge1'',''mouseout'',function(e){$(''badge1'').src=''images/
> regular/badge1.jpg'';});
>
Event.observe(''badge2'',''mouseover'',function(e){$
> (''badge2'').src=''images/
> rollover/badge2.jpg'';});
>
Event.observe(''badge2'',''mouseout'',function(e){$(''badge2'').src=''images/
> regular/badge2.jpg'';});
>
Event.observe(''badge3'',''mouseover'',function(e){$
> (''badge3'').src=''images/
> rollover/badge3.jpg'';});
>
Event.observe(''badge3'',''mouseout'',function(e){$(''badge3'').src=''images/
> regular/badge3.jpg'';});
>
Event.observe(''badge4'',''mouseover'',function(e){$
> (''badge4'').src=''images/
> rollover/badge4.jpg'';});
>
Event.observe(''badge4'',''mouseout'',function(e){$(''badge4'').src=''images/
> regular/badge4.jpg'';});
>
Event.observe(''badge5'',''mouseover'',function(e){$
> (''badge5'').src=''images/
> rollover/badge5.jpg'';});
>
Event.observe(''badge5'',''mouseout'',function(e){$(''badge5'').src=''images/
> regular/badge5.jpg'';});
>
> I tried this method:
> for (var x = 1; x <= 5; x++){
> var badgeID = "badge" + x;
>
Event.observe(badgeID,''mouseover'',function(e){$(badgeID).src=''images/
> rollover/''+badgeID+''.jpg'';});
>
Event.observe(badgeID,''mouseout'',function(e){$(badgeID).src=''images/
> regular/''+badgeID+''.jpg'';});
> }
>
> But the last method only observes the last image. Rolling over images
> 1-4 changes the 5th image only. any ideas on what I''m missing to
> achieve the same effect as the first method?
>
> Thanks!
> chris
>
>
> >
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
Tom''s right. Specifically because badgeID is not local in the
"for"
block. Javascript variables are only scoped per function, so badgeID
is being changed after every iteration.
Possible solutions:
1) use ObjectRange - since it is an enumerator that uses a callback
function, the badgeID isn''t reused.
$R(1, 5).each(function(x) {
var badgeID = "badge" + x;
Event.observe(badgeID,''mouseover'',function(e){$(badgeID).src=''images/
rollover/''+badgeID+''.jpg'';});
Event.observe(badgeID,''mouseout'',function(e){$(badgeID).src=''images/
regular/''+badgeID+''.jpg'';});
}
2) get the source element from the event - Event.element(e).
3) Add only one observer
Another better (faster) way would be to only observe the badges parent
element, a div for instance). and call Event.findElement to find the
actual item clicked. Each observer added slows down the browser and
adds to the memory footprint.
-jason
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
Tom, Thank you for explaining this to me. I''m just getting my feet wet with Prototype and Scriptaculous so I thought I''d use a mouseover event listener for this experiment. I''m actually understanding what you mean but, I''m not sure of the actual code and how to fill in your ellipses. Would it be possible to see a more verbose listing to get me started? Also, my badges have 3 states. regular, hover, selected. I''m trying to do an Event.stopObserving on the selected element. is that the right way to do it? Basically click image 1 and remove the observing events from image 1 but add click/mouse over events to the other images. Click image 2 and add teh events observing back to image1 and so on. I might be off base in what I''m trying to do but again this is an experiment with Prototype for me. Thanks for all your help. Chris On Sep 17, 2:35 pm, Tom Gregory <t...-PGZyUNKar/Q@public.gmane.org> wrote:> You''ve got a scoping problem. The variable badgeID is populated with > the value it has when the function is run, not when it is declared, > so the behavior you''re seeing is expected. If you rewrite your > function to use Event.element instead of passing the ID, you could > reuse the function, which would also speed up your code. > > var f = function (e) { > var id = Event.elment(e).id; > ... > > } > > for ( ... ) { > Event.observe(badgeID, ''mouseover'', f); > Event.observe(badgeID, ''mouseout'', f); > > } > > But really, this is a job best handled by CSS''s :hover pseudo class, > not Javascript. Something like the following should work well: > > a.class img.hover {display:none;} > a.class:hover img {display:none;} > a.class:hover img.hover {display:block;} > > <a class="badge"><img src="1.jpg" /><img class="hover" /></a> > > TAG > > On Sep 17, 2007, at 2:59 PM, Loony2nz wrote: > > > > > I''m trying to observe mouseout and mouseover events on 5 elements on > > my page. > > > Instead of this verbose method: > > Event.observe(''badge1'',''mouseover'',function(e){$ > > (''badge1'').src=''images/ > > rollover/badge1.jpg'';}); > > Event.observe(''badge1'',''mouseout'',function(e){$(''badge1'').src=''images/ > > regular/badge1.jpg'';}); > > Event.observe(''badge2'',''mouseover'',function(e){$ > > (''badge2'').src=''images/ > > rollover/badge2.jpg'';}); > > Event.observe(''badge2'',''mouseout'',function(e){$(''badge2'').src=''images/ > > regular/badge2.jpg'';}); > > Event.observe(''badge3'',''mouseover'',function(e){$ > > (''badge3'').src=''images/ > > rollover/badge3.jpg'';}); > > Event.observe(''badge3'',''mouseout'',function(e){$(''badge3'').src=''images/ > > regular/badge3.jpg'';}); > > Event.observe(''badge4'',''mouseover'',function(e){$ > > (''badge4'').src=''images/ > > rollover/badge4.jpg'';}); > > Event.observe(''badge4'',''mouseout'',function(e){$(''badge4'').src=''images/ > > regular/badge4.jpg'';}); > > Event.observe(''badge5'',''mouseover'',function(e){$ > > (''badge5'').src=''images/ > > rollover/badge5.jpg'';}); > > Event.observe(''badge5'',''mouseout'',function(e){$(''badge5'').src=''images/ > > regular/badge5.jpg'';}); > > > I tried this method: > > for (var x = 1; x <= 5; x++){ > > var badgeID = "badge" + x; > > Event.observe(badgeID,''mouseover'',function(e){$(badgeID).src=''images/ > > rollover/''+badgeID+''.jpg'';}); > > Event.observe(badgeID,''mouseout'',function(e){$(badgeID).src=''images/ > > regular/''+badgeID+''.jpg'';}); > > } > > > But the last method only observes the last image. Rolling over images > > 1-4 changes the 5th image only. any ideas on what I''m missing to > > achieve the same effect as the first method? > > > Thanks! > > chris--~--~---------~--~----~------------~-------~--~----~ 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 Sep 18, 6:59 am, Loony2nz <Loony...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> I''m trying to observe mouseout and mouseover events on 5 elements on > my page.[...]> I tried this method: > for (var x = 1; x <= 5; x++){ > var badgeID = "badge" + x; > Event.observe(badgeID,''mouseover'',function(e){$(badgeID).src=''images/ > rollover/''+badgeID+''.jpg'';}); > Event.observe(badgeID,''mouseout'',function(e){$(badgeID).src=''images/ > regular/''+badgeID+''.jpg'';});-------------^^^^^^^ Your issue is here, see below.> } > > But the last method only observes the last image. Rolling over images > 1-4 changes the 5th image only. any ideas on what I''m missing to > achieve the same effect as the first method?The anonymous functions that you assign to the event handlers all have a closure back to the single badgeID variable of the activation object of the function that assigned it. When the handler fires and calls the anonymous function, badgeID is whatever it was last set to, so they all get the same value for the src attribute. -- Rob --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
$R(1, 5).each(function(x) {
var badgeID = "badge" + x;
Event.observe(badgeID,''mouseover'',function(e){ Event.element
(e).src=''images/rollover/''+Event.element(e).id+''.jpg'';});
Event.observe(badgeID,''mouseout'',function(e){Event.element(e).
src=''images/regular/''+Event.element(e).id+''.jpg'';});
}
2007/9/18, Loony2nz
<Loony2nz-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>:>
>
> Tom,
>
> Thank you for explaining this to me. I''m just getting my feet wet
> with Prototype and Scriptaculous so I thought I''d use a mouseover
> event listener for this experiment.
>
> I''m actually understanding what you mean but, I''m not
sure of the
> actual code and how to fill in your ellipses.
> Would it be possible to see a more verbose listing to get me started?
>
> Also, my badges have 3 states. regular, hover, selected. I''m
trying
> to do an Event.stopObserving on the selected element. is that the
> right way to do it? Basically click image 1 and remove the observing
> events from image 1 but add click/mouse over events to the other
> images. Click image 2 and add teh events observing back to image1 and
> so on.
>
> I might be off base in what I''m trying to do but again this is an
> experiment with Prototype for me.
>
> Thanks for all your help.
> Chris
>
> On Sep 17, 2:35 pm, Tom Gregory <t...-PGZyUNKar/Q@public.gmane.org>
wrote:
> > You''ve got a scoping problem. The variable badgeID is
populated with
> > the value it has when the function is run, not when it is declared,
> > so the behavior you''re seeing is expected. If you rewrite
your
> > function to use Event.element instead of passing the ID, you could
> > reuse the function, which would also speed up your code.
> >
> > var f = function (e) {
> > var id = Event.elment(e).id;
> > ...
> >
> > }
> >
> > for ( ... ) {
> > Event.observe(badgeID, ''mouseover'', f);
> > Event.observe(badgeID, ''mouseout'', f);
> >
> > }
> >
> > But really, this is a job best handled by CSS''s :hover pseudo
class,
> > not Javascript. Something like the following should work well:
> >
> > a.class img.hover {display:none;}
> > a.class:hover img {display:none;}
> > a.class:hover img.hover {display:block;}
> >
> > <a class="badge"><img src="1.jpg"
/><img class="hover" /></a>
> >
> > TAG
> >
> > On Sep 17, 2007, at 2:59 PM, Loony2nz wrote:
> >
> >
> >
> > > I''m trying to observe mouseout and mouseover events on 5
elements on
> > > my page.
> >
> > > Instead of this verbose method:
> > >
Event.observe(''badge1'',''mouseover'',function(e){$
> > > (''badge1'').src=''images/
> > > rollover/badge1.jpg'';});
> > >
Event.observe(''badge1'',''mouseout'',function(e){$(''badge1'').src=''images/
> > > regular/badge1.jpg'';});
> > >
Event.observe(''badge2'',''mouseover'',function(e){$
> > > (''badge2'').src=''images/
> > > rollover/badge2.jpg'';});
> > >
Event.observe(''badge2'',''mouseout'',function(e){$(''badge2'').src=''images/
> > > regular/badge2.jpg'';});
> > >
Event.observe(''badge3'',''mouseover'',function(e){$
> > > (''badge3'').src=''images/
> > > rollover/badge3.jpg'';});
> > >
Event.observe(''badge3'',''mouseout'',function(e){$(''badge3'').src=''images/
> > > regular/badge3.jpg'';});
> > >
Event.observe(''badge4'',''mouseover'',function(e){$
> > > (''badge4'').src=''images/
> > > rollover/badge4.jpg'';});
> > >
Event.observe(''badge4'',''mouseout'',function(e){$(''badge4'').src=''images/
> > > regular/badge4.jpg'';});
> > >
Event.observe(''badge5'',''mouseover'',function(e){$
> > > (''badge5'').src=''images/
> > > rollover/badge5.jpg'';});
> > >
Event.observe(''badge5'',''mouseout'',function(e){$(''badge5'').src=''images/
> > > regular/badge5.jpg'';});
> >
> > > I tried this method:
> > > for (var x = 1; x <= 5; x++){
> > > var badgeID = "badge" + x;
> > >
Event.observe(badgeID,''mouseover'',function(e){$(badgeID).src=''images/
> > > rollover/''+badgeID+''.jpg'';});
> > >
Event.observe(badgeID,''mouseout'',function(e){$(badgeID).src=''images/
> > > regular/''+badgeID+''.jpg'';});
> > > }
> >
> > > But the last method only observes the last image. Rolling over
images
> > > 1-4 changes the 5th image only. any ideas on what I''m
missing to
> > > achieve the same effect as the first method?
> >
> > > Thanks!
> > > chris
>
>
> >
>
--
Hambo
szhambo-Re5JQEeQqe8AvxtiuMwx3w@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
-~----------~----~----~----~------~----~------~--~---