Hey all,
I working on a project, but I am not sure I can do what I want to
do. The following works beautifully:
Event.observe(el, ''click'', function () { this.className +=
"
myClass"; return false; });
I have also tried doing this:
this.varname = ''test'';
Event.observe(el, ''click'', function () { alert (this.varname);
}.bind
(this));
However these calls both fail:
this.myClassName = ''myClass'';
Event.observe(el, ''click'', function () { this.className +=
" "+
this.myClassName; return false; }.bind(this));
or
this.myClassName = ''myClass'';
Event.observe(el, ''click'', function () { this.className +=
"
myClass"; return false; }.bind(this));
I think I have a clue as to what is happening, but no clue on how to
solve it. I am guessing that somehow the bind() method is somehow
messing with the this.className property. Is there a way around this
one?
-Greg
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
On 2/9/06, Greg Militello <junk-I5hbk0M9kNPR7s880joybQ@public.gmane.org> wrote:> Hey all, > I working on a project, but I am not sure I can do what I want to do. The > following works beautifully: > > Event.observe(el, ''click'', function () { this.className += " myClass"; > return false; }); > > I have also tried doing this: > > this.varname = ''test''; > Event.observe(el, ''click'', function () { alert (this.varname); > }.bind(this)); > > > > However these calls both fail: > this.myClassName = ''myClass''; > Event.observe(el, ''click'', function () { this.className += " "+ > this.myClassName; return false; }.bind(this)); > > or > > this.myClassName = ''myClass''; > Event.observe(el, ''click'', function () { this.className += " myClass"; > return false; }.bind(this)); > > > > > I think I have a clue as to what is happening, but no clue on how to solve > it. I am guessing that somehow the bind() method is somehow messing with > the this.className property. Is there a way around this one?Without more context, I''m guessing that you''re executing this code directly in a <script></script> set. In that case, ''this'' is the global object (aka, the window). I suspect this (pun intended) isn''t what you expect. Event.observe(el, ''click'', function(event) { event = event || window.event; var element = Event.element(event); Element.addClassName(element, ''myClass''); }); I''m not sure if there''s a more Prototype-centric way to smooth out retreiving the event in the handler Todd
On 2/9/06, Todd Ross <rails-spinoffs-25kFIyuv2iRiLUuM0BA3LQ@public.gmane.org> wrote:> Event.observe(el, ''click'', function(event) { > event = event || window.event; > var element = Event.element(event); > Element.addClassName(element, ''myClass''); > }); > > I''m not sure if there''s a more Prototype-centric way to smooth out > retreiving the event in the handlerSorry ... I know it''s bad form to reply to yourself, but I just had a "duh" moment. This is untested, but I think this would work: Event.observe(el, ''click'', (function(event) { Element.addClassName(this, ''myClass''); }).bindAsEventListener(el)); So, you were close with your first attempts, but in order for the ''this'' to be useful to you, you need to bind it to the element (el), not the window (the default ''this'' object). Todd
On Thursday 09 February 2006 17:23, Todd Ross wrote:> On 2/9/06, Todd Ross <rails-spinoffs-25kFIyuv2iRiLUuM0BA3LQ@public.gmane.org> wrote: > > Event.observe(el, ''click'', function(event) { > > event = event || window.event; > > var element = Event.element(event); > > Element.addClassName(element, ''myClass''); > > }); > > > > I''m not sure if there''s a more Prototype-centric way to smooth out > > retreiving the event in the handleras for this, I believe Event.observe handles finding the proper event object for you and passes that to your function. This is what I''ve experienced anyways :) Since I''m using behaviour.js and sometimes calling behaviour.apply() multiple times per page-session, I can''t use Event.observe, unfortunately :( I probably can, but just don''t know how, yet ;)> Sorry ... I know it''s bad form to reply to yourself, but I just had a > "duh" moment. > > This is untested, but I think this would work: > > Event.observe(el, ''click'', (function(event) { > Element.addClassName(this, ''myClass''); > }).bindAsEventListener(el));> So, you were close with your first attempts, but in order for the > ''this'' to be useful to you, you need to bind it to the element (el), > not the window (the default ''this'' object).Flame me if I''m wrong, but couldn''t you just skip the ''this'' part and use ''el'' directly? something like: Event.observe(el, ''click'', (function(event) { Element.addClassName(el, ''myClass''); ); -Jeremy -- Jeremy Kitchen ++ kitchen-RA8HwDor7flnDGu+y90WmgC/G2K4zDHf@public.gmane.org In the beginning was The Word and The Word was Content-type: text/plain -- The Word of Bob. _______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Todd,
I read your email and thought I should get around to posting the
project anyway. So here''s a link to the project:
http://thinkof.net/projects/js/highlight/highlight.html
If you open the relevant JS file:
http://thinkof.net/projects/js/highlight/javascript/highlight.js
You will see the code I wrote. The code is being executed from the
HTML document as
<script language="javascript">
new HighlightAlternate.table(''numbers'');
</script>
The code I am specifically talking about it in the highlight.js file
lines 165-166:
setMouseEvents: function(el) {
Event.observe(el, ''mouseover'', function () { this.className
+= "
highlightHover"; return false; });
Event.observe(el, ''mouseout'', function () { this.className =
this.className.replace(" highlightHover", ""); return false;
});
}
That code works fine, but it not quite what I want. I want the user
of the script to be about to customize the class that gets added to
the <tr/> or <li/>. With a simple call like:
<script language="javascript">
new HighlightAlternate.table(''numbers'', {hoverClass:
"mySpecialHoverClass"});
</script>
setMouseEvents() has access to this.options.hoverClass. But I can
do this:
Event.observe(el, ''mouseover'', function () { this.className +=
" " +
this.options.hoverClass; return false; }.bind(this));
Does that help clearify?
-Greg
PS: As with my notify script, any comments are welcome about this
one. It is a combo of alistapart''s Zebra Tables, and Table Ruler.
PSS: Thanks again guys... you all rock.
On Feb 9, 2006, at 8:23 PM, Todd Ross wrote:
> On 2/9/06, Todd Ross
<rails-spinoffs-25kFIyuv2iRiLUuM0BA3LQ@public.gmane.org> wrote:
>> Event.observe(el, ''click'', function(event) {
>> event = event || window.event;
>> var element = Event.element(event);
>> Element.addClassName(element, ''myClass'');
>> });
>>
>> I''m not sure if there''s a more Prototype-centric way
to smooth out
>> retreiving the event in the handler
>
> Sorry ... I know it''s bad form to reply to yourself, but I just
had a
> "duh" moment.
>
> This is untested, but I think this would work:
>
> Event.observe(el, ''click'', (function(event) {
> Element.addClassName(this, ''myClass'');
> }).bindAsEventListener(el));
>
> So, you were close with your first attempts, but in order for the
> ''this'' to be useful to you, you need to bind it to the
element (el),
> not the window (the default ''this'' object).
>
> Todd
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Probably can''t use the element directly like that, but this should
work:
Event.observe(el, ''click'', (function(event) {
Element.addClassName(event.element, ''myClass'');
);
On 2/9/06, Jeremy Kitchen
<kitchen-RA8HwDor7flnDGu+y90WmgC/G2K4zDHf@public.gmane.org>
wrote:>
> On Thursday 09 February 2006 17:23, Todd Ross wrote:
> > On 2/9/06, Todd Ross
<rails-spinoffs-25kFIyuv2iRiLUuM0BA3LQ@public.gmane.org> wrote:
> > > Event.observe(el, ''click'', function(event) {
> > > event = event || window.event;
> > > var element = Event.element(event);
> > > Element.addClassName(element, ''myClass'');
> > > });
> > >
> > > I''m not sure if there''s a more
Prototype-centric way to smooth out
> > > retreiving the event in the handler
>
> as for this, I believe Event.observe handles finding the proper event
> object
> for you and passes that to your function. This is what I''ve
experienced
> anyways :)
>
> Since I''m using behaviour.js and sometimes calling
behaviour.apply()
> multiple
> times per page-session, I can''t use Event.observe, unfortunately
:( I
> probably can, but just don''t know how, yet ;)
>
> > Sorry ... I know it''s bad form to reply to yourself, but I
just had a
> > "duh" moment.
> >
> > This is untested, but I think this would work:
> >
> > Event.observe(el, ''click'', (function(event) {
> > Element.addClassName(this, ''myClass'');
> > }).bindAsEventListener(el));
>
> > So, you were close with your first attempts, but in order for the
> > ''this'' to be useful to you, you need to bind it to
the element (el),
> > not the window (the default ''this'' object).
>
> Flame me if I''m wrong, but couldn''t you just skip the
''this'' part and use
> ''el''
> directly?
>
> something like:
> Event.observe(el, ''click'', (function(event) {
> Element.addClassName(el, ''myClass'');
> );
>
> -Jeremy
>
> --
> Jeremy Kitchen ++ kitchen-RA8HwDor7flnDGu+y90WmgC/G2K4zDHf@public.gmane.org
>
> In the beginning was The Word and The Word was Content-type: text/plain
> -- The Word of Bob.
>
>
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>
>
>
>
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
And another reply-to-self...make that:
Event.observe(el, ''click'', (function(event) {
Element.addClassName(Event.element(event), ''myClass'');
);
On 2/9/06, Jerod Venema <jvenema-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:>
> Probably can''t use the element directly like that, but this should
work:
>
> Event.observe(el, ''click'', (function(event) {
> Element.addClassName(event.element, ''myClass'');
> );
>
> On 2/9/06, Jeremy Kitchen
<kitchen-RA8HwDor7flnDGu+y90WmgC/G2K4zDHf@public.gmane.org> wrote:
>
> > On Thursday 09 February 2006 17:23, Todd Ross wrote:
> > > On 2/9/06, Todd Ross
<rails-spinoffs-25kFIyuv2iRiLUuM0BA3LQ@public.gmane.org> wrote:
> > > > Event.observe(el, ''click'', function(event)
{
> > > > event = event || window.event;
> > > > var element = Event.element(event);
> > > > Element.addClassName(element,
''myClass'');
> > > > });
> > > >
> > > > I''m not sure if there''s a more
Prototype-centric way to smooth out
> > > > retreiving the event in the handler
> >
> > as for this, I believe Event.observe handles finding the proper event
> > object
> > for you and passes that to your function. This is what I''ve
experienced
> > anyways :)
> >
> > Since I''m using behaviour.js and sometimes calling
behaviour.apply()
> > multiple
> > times per page-session, I can''t use Event.observe,
unfortunately :( I
> > probably can, but just don''t know how, yet ;)
> >
> > > Sorry ... I know it''s bad form to reply to yourself, but
I just had a
> > > "duh" moment.
> > >
> > > This is untested, but I think this would work:
> > >
> > > Event.observe(el, ''click'', (function(event) {
> > > Element.addClassName(this, ''myClass'');
> > > }).bindAsEventListener(el));
> >
> > > So, you were close with your first attempts, but in order for the
> > > ''this'' to be useful to you, you need to bind it
to the element (el),
> > > not the window (the default ''this'' object).
> >
> > Flame me if I''m wrong, but couldn''t you just skip
the ''this'' part and
> > use ''el''
> > directly?
> >
> > something like:
> > Event.observe(el, ''click'', (function(event) {
> > Element.addClassName(el, ''myClass'');
> > );
> >
> > -Jeremy
> >
> > --
> > Jeremy Kitchen ++
kitchen-RA8HwDor7flnDGu+y90WmgC/G2K4zDHf@public.gmane.org
> >
> > In the beginning was The Word and The Word was Content-type:
text/plain
> > -- The Word of Bob.
> >
> >
> > _______________________________________________
> > Rails-spinoffs mailing list
> > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
> >
> >
> >
> >
>
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
This works:
Event.observe(el, ''click'', (function() {
Element.addClassName(this, ''myClass'');
}
));
This works, just not the way I want:
Event.observe(el, ''click'', (function(event) {
Element.addClassName(Event.element(event), ''myClass'');
}
));
However, getting this to work is my issue. I still need to make the
string ''myClass'' definable from outside of the scope of the
anonymous
function. The only idea I had for this was binding, per an email
Greg Hill wrote a bit back. bind() is not working... I need to be
able to do something like this:
this.classString = ''myClass'';
Event.observe(el, ''click'', (function() {
Element.addClassName(this, this.classString);
}.bind(this)
));
But, that doesn''t work. I need the class name that gets added to the
element to be dynamic....
:\
-Greg
On Feb 9, 2006, at 11:42 PM, Jerod Venema wrote:
> And another reply-to-self...make that:
>
> Event.observe(el, ''click'', (function(event) {
> Element.addClassName(Event.element(event),
''myClass'');
> );
>
> On 2/9/06, Jerod Venema
<jvenema-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> Probably can''t use the element directly like that, but this should
> work:
>
> Event.observe(el, ''click'', (function(event) {
> Element.addClassName(event.element, ''myClass'');
> );
>
> On 2/9/06, Jeremy Kitchen
<kitchen-RA8HwDor7flnDGu+y90WmgC/G2K4zDHf@public.gmane.org> wrote:
> On Thursday 09 February 2006 17:23, Todd Ross wrote:
> > On 2/9/06, Todd Ross
<rails-spinoffs-25kFIyuv2iRiLUuM0BA3LQ@public.gmane.org > wrote:
> > > Event.observe(el, ''click'', function(event) {
> > > event = event || window.event;
> > > var element = Event.element(event);
> > > Element.addClassName(element, ''myClass'');
> > > });
> > >
> > > I''m not sure if there''s a more
Prototype-centric way to smooth out
> > > retreiving the event in the handler
>
> as for this, I believe Event.observe handles finding the proper
> event object
> for you and passes that to your function. This is what I''ve
> experienced
> anyways :)
>
> Since I''m using behaviour.js and sometimes calling behaviour.apply
> () multiple
> times per page-session, I can''t use Event.observe, unfortunately
:( I
> probably can, but just don''t know how, yet ;)
>
> > Sorry ... I know it''s bad form to reply to yourself, but I
just
> had a
> > "duh" moment.
> >
> > This is untested, but I think this would work:
> >
> > Event.observe(el, ''click'', (function(event) {
> > Element.addClassName(this, ''myClass'');
> > }).bindAsEventListener(el));
>
> > So, you were close with your first attempts, but in order for the
> > ''this'' to be useful to you, you need to bind it to
the element (el),
> > not the window (the default ''this'' object).
>
> Flame me if I''m wrong, but couldn''t you just skip the
''this'' part
> and use ''el''
> directly?
>
> something like:
> Event.observe(el, ''click'', (function(event) {
> Element.addClassName(el, ''myClass'');
> );
>
> -Jeremy
>
> --
> Jeremy Kitchen ++ kitchen-RA8HwDor7flnDGu+y90WmgC/G2K4zDHf@public.gmane.org
>
> In the beginning was The Word and The Word was Content-type: text/
> plain
> -- The Word of Bob.
>
>
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>
>
>
>
>
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
I also sent a previous email trying to explain my problem (it has my actual code referenced in it) subject: Re: [Rails-spinoffs] HighlightJS formerly: Element.observe () binding Sorry to keep email the list, I just want to solve this. Thanks all, -Greg PS: Night all. On Feb 10, 2006, at 12:13 AM, Greg Militello wrote:> This works: > > Event.observe(el, ''click'', (function() { > Element.addClassName(this, ''myClass''); > } > )); > > This works, just not the way I want: > > Event.observe(el, ''click'', (function(event) { > Element.addClassName(Event.element(event), ''myClass''); > } > )); > > However, getting this to work is my issue. I still need to make > the string ''myClass'' definable from outside of the scope of the > anonymous function. The only idea I had for this was binding, per > an email Greg Hill wrote a bit back. bind() is not working... I > need to be able to do something like this: > > this.classString = ''myClass''; > Event.observe(el, ''click'', (function() { > Element.addClassName(this, this.classString); > }.bind(this) > )); > > But, that doesn''t work. I need the class name that gets added to > the element to be dynamic.... > > :\ > > -Greg > > > > > On Feb 9, 2006, at 11:42 PM, Jerod Venema wrote: > >> And another reply-to-self...make that: >> >> Event.observe(el, ''click'', (function(event) { >> Element.addClassName(Event.element(event), ''myClass''); >> ); >> >> On 2/9/06, Jerod Venema <jvenema-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: >> Probably can''t use the element directly like that, but this should >> work: >> >> Event.observe(el, ''click'', (function(event) { >> Element.addClassName(event.element, ''myClass''); >> ); >> >> On 2/9/06, Jeremy Kitchen <kitchen-RA8HwDor7flnDGu+y90WmgC/G2K4zDHf@public.gmane.org> wrote: >> On Thursday 09 February 2006 17:23, Todd Ross wrote: >> > On 2/9/06, Todd Ross <rails-spinoffs-25kFIyuv2iRiLUuM0BA3LQ@public.gmane.org > wrote: >> > > Event.observe(el, ''click'', function(event) { >> > > event = event || window.event; >> > > var element = Event.element(event); >> > > Element.addClassName(element, ''myClass''); >> > > }); >> > > >> > > I''m not sure if there''s a more Prototype-centric way to smooth >> out >> > > retreiving the event in the handler >> >> as for this, I believe Event.observe handles finding the proper >> event object >> for you and passes that to your function. This is what I''ve >> experienced >> anyways :) >> >> Since I''m using behaviour.js and sometimes calling behaviour.apply >> () multiple >> times per page-session, I can''t use Event.observe, unfortunately : >> ( I >> probably can, but just don''t know how, yet ;) >> >> > Sorry ... I know it''s bad form to reply to yourself, but I just >> had a >> > "duh" moment. >> > >> > This is untested, but I think this would work: >> > >> > Event.observe(el, ''click'', (function(event) { >> > Element.addClassName(this, ''myClass''); >> > }).bindAsEventListener(el)); >> >> > So, you were close with your first attempts, but in order for the >> > ''this'' to be useful to you, you need to bind it to the element >> (el), >> > not the window (the default ''this'' object). >> >> Flame me if I''m wrong, but couldn''t you just skip the ''this'' part >> and use ''el'' >> directly? >> >> something like: >> Event.observe(el, ''click'', (function(event) { >> Element.addClassName(el, ''myClass''); >> ); >> >> -Jeremy >> >> -- >> Jeremy Kitchen ++ kitchen-RA8HwDor7flnDGu+y90WmgC/G2K4zDHf@public.gmane.org >> >> In the beginning was The Word and The Word was Content-type: text/ >> plain >> -- The Word of Bob. >> >> >> _______________________________________________ >> Rails-spinoffs mailing list >> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org >> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs >> >> >> >> >> >> _______________________________________________ >> Rails-spinoffs mailing list >> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org >> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs_______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
On 2/9/06, Jeremy Kitchen <kitchen-RA8HwDor7flnDGu+y90WmgC/G2K4zDHf@public.gmane.org> wrote:> as for this, I believe Event.observe handles finding the proper event object > for you and passes that to your function. This is what I''ve experienced > anyways :)Event.observe() does nothing to smooth out passing the event in as a parameter to your handler; that''s what bindAsEventListener does. Firefox/Mozilla/? pass the event in as a parameter. Internet Explorer expects you to use window.event to get at it. If you use the event object (say to get at the target), then you either need to smooth out the differences yourself or just use bindAsEventListener.> Since I''m using behaviour.js and sometimes calling behaviour.apply() multiple > times per page-session, I can''t use Event.observe, unfortunately :( I > probably can, but just don''t know how, yet ;)There''s a patch in trac to add behavior-like functionality directly to Prototype. Sam has expressed interest in it. http://dev.rubyonrails.org/ticket/3568> Flame me if I''m wrong, but couldn''t you just skip the ''this'' part and use ''el'' > directly? > > something like: > Event.observe(el, ''click'', (function(event) { > Element.addClassName(el, ''myClass''); > );Yes, but without seeing more of the code, I can''t guarantee that he''s not corrupting ''el'' elsewhere. He might be re-using it. The bindAsEventListener creates another closure and guarantees that ''this'' is what he wants inside of his handler. Todd
On 2/9/06, Jerod Venema <jvenema-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> And another reply-to-self...make that: > > Event.observe(el, ''click'', (function(event) { > Element.addClassName(Event.element(event), ''myClass''); > );... and you''re missing a '')'', or I could argue that you have one ''('' too many. Todd
Todd, I finally got it working, though IE is a lot slower than Safari, or Firefox. You can check out my code here,: http://thinkof.net/projects/js/highlight/highlight.html http://thinkof.net/projects/js/highlight/javascript/highlight.js Or you can download the entire thing to your local machine here: http://thinkof.net/projects/downloads/highlightJs-v0.1.1.tar.gz It takes lists and tables, and highlights rows in alternating classes (you can define as many classes as you like, so you can have 2, 3 or more row colors). Lastly (why I have been asking about all this) when you mouse over the <li/> or <tr/> It will highlight the row. Three things remain for me to do (though I am not sure how at this point): 1.) Give the user the ability to change the hover class name. The row highlight classes are currently customizable. 2.) Speed up the onMouseOver event in IE, it''s slow 3.) Allow the onMouseOver event to be triggered on lists in IE when the mouse is not over text Any thoughts? #1 is still the reason I started this thread, though we have fixed my code so it actually works in IE (yippy!) Todd/Jeremy/Jerod, I am crediting you guys for helping with the IE issue. If you don''t want your name up on my project page let me know (just send me an email, no need to send it to the list). -Greg On Feb 10, 2006, at 6:49 AM, Todd Ross wrote:> On 2/9/06, Jeremy Kitchen <kitchen-RA8HwDor7flnDGu+y90WmgC/G2K4zDHf@public.gmane.org> wrote: >> as for this, I believe Event.observe handles finding the proper >> event object >> for you and passes that to your function. This is what I''ve >> experienced >> anyways :) > > Event.observe() does nothing to smooth out passing the event in as a > parameter to your handler; that''s what bindAsEventListener does. > > Firefox/Mozilla/? pass the event in as a parameter. Internet Explorer > expects you to use window.event to get at it. If you use the event > object (say to get at the target), then you either need to smooth out > the differences yourself or just use bindAsEventListener. > >> Since I''m using behaviour.js and sometimes calling behaviour.apply >> () multiple >> times per page-session, I can''t use Event.observe, unfortunately : >> ( I >> probably can, but just don''t know how, yet ;) > > There''s a patch in trac to add behavior-like functionality directly to > Prototype. Sam has expressed interest in it. > > http://dev.rubyonrails.org/ticket/3568 > >> Flame me if I''m wrong, but couldn''t you just skip the ''this'' part >> and use ''el'' >> directly? >> >> something like: >> Event.observe(el, ''click'', (function(event) { >> Element.addClassName(el, ''myClass''); >> ); > > Yes, but without seeing more of the code, I can''t guarantee that he''s > not corrupting ''el'' elsewhere. He might be re-using it. The > bindAsEventListener creates another closure and guarantees that ''this'' > is what he wants inside of his handler. > > Todd > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
EUREKA! WOOO HOOO I finally got it... ! ! !
Here is the old code:
setMouseEvents: function(el) {
Event.observe(el, ''mouseover'', (function(event) {
Element.addClassName(el, ''highlightHover'');
}
));
}
Here''s what I did (works IE 6, Firefox 1.5, Safari 2.0.3):
setMouseEvents: function(el) {
var mouseoverEventFunction = function(event) {
if (!Element.hasClassName(el, this.options.hoverClass)) {
Element.addClassName(el, this.options.hoverClass);
}
}.bind(this);
Event.observe(el, ''mouseover'', (mouseoverEventFunction));
}
You will notice former code had the hardcoded string
''highlightHover'', but the new code get the value of that class
via
the class options.
I still have an issue with IE not row highlighting the <li/>''s
(if
the cursor is over the tag boundry, not the text) but it''s IE and I
expect some issues. Seeing as I am not an IE guy, is there a hack or
anything I can do to fix this?
Check out the demo here:
http://thinkof.net/projects/js/highlight/highlight.html
I simply commented the old code so you guys can see it all inline;
http://thinkof.net/projects/js/highlight/javascript/highlight.js
What do you guys think? To much of a hack? Is there a better way?
-Greg
On Feb 10, 2006, at 11:10 AM, Greg Militello wrote:
> Todd,
> I finally got it working, though IE is a lot slower than Safari,
> or Firefox.
>
> You can check out my code here,:
> http://thinkof.net/projects/js/highlight/highlight.html
> http://thinkof.net/projects/js/highlight/javascript/highlight.js
> Or you can download the entire thing to your local machine here:
> http://thinkof.net/projects/downloads/highlightJs-v0.1.1.tar.gz
>
>
> It takes lists and tables, and highlights rows in alternating
> classes (you can define as many classes as you like, so you can
> have 2, 3 or more row colors). Lastly (why I have been asking
> about all this) when you mouse over the <li/> or <tr/> It will
> highlight the row.
>
> Three things remain for me to do (though I am not sure how at this
> point):
> 1.) Give the user the ability to change the hover class name.
> The row highlight classes are currently customizable.
> 2.) Speed up the onMouseOver event in IE, it''s slow
> 3.) Allow the onMouseOver event to be triggered on lists in IE
> when the mouse is not over text
>
>
> Any thoughts? #1 is still the reason I started this thread,
> though we have fixed my code so it actually works in IE (yippy!)
>
>
>
> Todd/Jeremy/Jerod,
> I am crediting you guys for helping with the IE issue. If you
> don''t want your name up on my project page let me know (just send
> me an email, no need to send it to the list).
>
> -Greg
>
>
>
> On Feb 10, 2006, at 6:49 AM, Todd Ross wrote:
>
>> On 2/9/06, Jeremy Kitchen
<kitchen-RA8HwDor7flnDGu+y90WmgC/G2K4zDHf@public.gmane.org> wrote:
>>> as for this, I believe Event.observe handles finding the proper
>>> event object
>>> for you and passes that to your function. This is what
I''ve
>>> experienced
>>> anyways :)
>>
>> Event.observe() does nothing to smooth out passing the event in as a
>> parameter to your handler; that''s what bindAsEventListener
does.
>>
>> Firefox/Mozilla/? pass the event in as a parameter. Internet
>> Explorer
>> expects you to use window.event to get at it. If you use the event
>> object (say to get at the target), then you either need to smooth out
>> the differences yourself or just use bindAsEventListener.
>>
>>> Since I''m using behaviour.js and sometimes calling
behaviour.apply
>>> () multiple
>>> times per page-session, I can''t use Event.observe,
unfortunately :
>>> ( I
>>> probably can, but just don''t know how, yet ;)
>>
>> There''s a patch in trac to add behavior-like functionality
>> directly to
>> Prototype. Sam has expressed interest in it.
>>
>> http://dev.rubyonrails.org/ticket/3568
>>
>>> Flame me if I''m wrong, but couldn''t you just skip
the ''this'' part
>>> and use ''el''
>>> directly?
>>>
>>> something like:
>>> Event.observe(el, ''click'', (function(event) {
>>> Element.addClassName(el, ''myClass'');
>>> );
>>
>> Yes, but without seeing more of the code, I can''t guarantee
that he''s
>> not corrupting ''el'' elsewhere. He might be re-using
it. The
>> bindAsEventListener creates another closure and guarantees that
>> ''this''
>> is what he wants inside of his handler.
>>
>> Todd
>> _______________________________________________
>> Rails-spinoffs mailing list
>> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
>> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
On 2/10/06, Greg Militello <junk-I5hbk0M9kNPR7s880joybQ@public.gmane.org> wrote:> You will notice former code had the hardcoded string ''highlightHover'', but > the new code get the value of that class via the class options.Yup. Looks good. An option that doesn''t do anything doesn''t sound like a very good option. :)> Check out the demo here: > http://thinkof.net/projects/js/highlight/highlight.html > I simply commented the old code so you guys can see it all inline; > http://thinkof.net/projects/js/highlight/javascript/highlight.js > > > What do you guys think? To much of a hack? Is there a better way?I think your indenting and some of your parenthesis'' are weird. I really only looked at the event code because that seemed to be what you were stuck on, but a few observations: var mouseoverEventFunction = function(event) { if (!Element.hasClassName(el, this.options.hoverClass)) { Element.addClassName(el, this.options.hoverClass); } }.bind(this); Event.observe(el, ''mouseover'', (mouseoverEventFunction)); You don''t need to check if the Element hasClassName; the addClassName function does that internally. The same applies to the removeClassName function. You define a clickClass var that you never use: var clickClass = this.options.clickClass; There''s an extra ; at the end of your clickEventFunction bind: }.bind(this);; Do you understand why el is available in your functions but that ''this'' isn''t any good unless you .bind(this)? The closures in JavaScript are one of the most difficult parts of the language to understand, but they''re really powerful. Todd