<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Re: [Seaside] Use of onMouseOver: and onMouseOut: in Seaside 2.8x</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<META content="MSHTML 6.00.2900.3429" name=GENERATOR></HEAD>
<BODY>
<DIV dir=ltr align=left><SPAN class=781252121-09112008><FONT face="Trebuchet MS"
color=#0000ff size=2>Hi,</FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=781252121-09112008><FONT face="Trebuchet MS"
color=#0000ff size=2>Prototype lacks of support to mouse enter/leave. They
implemented the custom events and let that to the users so
far.</FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=781252121-09112008><FONT face="Trebuchet MS"
color=#0000ff size=2>Maybe jQuery supports those but I can't confirm
that.</FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=781252121-09112008><FONT face="Trebuchet MS"
color=#0000ff size=2>cheers,</FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=781252121-09112008><FONT face="Trebuchet MS"
color=#0000ff size=2>Sebastian</FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=781252121-09112008><FONT face="Trebuchet MS"
color=#0000ff size=2></FONT></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN class=781252121-09112008><FONT face="Trebuchet MS"
color=#0000ff size=2></FONT></SPAN> </DIV><BR>
<BLOCKQUOTE dir=ltr
style="PADDING-LEFT: 5px; MARGIN-LEFT: 5px; BORDER-LEFT: #0000ff 2px solid; MARGIN-RIGHT: 0px">
<DIV class=OutlookMessageHeader lang=es dir=ltr align=left>
<HR tabIndex=-1>
<FONT face=Tahoma size=2><B>De:</B> seaside-bounces@lists.squeakfoundation.org
[mailto:seaside-bounces@lists.squeakfoundation.org] <B>En nombre de </B>Boris
Popov<BR><B>Enviado el:</B> Sábado, 08 de Noviembre de 2008
19:54<BR><B>Para:</B> seaside@lists.squeakfoundation.org<BR><B>Asunto:</B> Re:
[Seaside] Use of onMouseOver: and onMouseOut: in Seaside
2.8x<BR></FONT><BR></DIV>
<DIV></DIV><!-- Converted from text/plain format -->
<P><FONT size=2>As a side note, I believe mouseover event keeps on firing when
you are moving mouse around (easy to confirm with firebug) which is why
mootools has something called mouseenter and mouseleave which get fired once
each, not sure about prototype.<BR><BR>Cheers!<BR><BR>-Boris (via
BlackBerry)<BR><BR>----- Original Message -----<BR>From:
seaside-bounces@lists.squeakfoundation.org
<seaside-bounces@lists.squeakfoundation.org><BR>To: Seaside - general
discussion <seaside@lists.squeakfoundation.org><BR>Sent: Sat Nov 08
13:52:58 2008<BR>Subject: Re: [Seaside] Use of onMouseOver: and onMouseOut: in
Seaside 2.8x<BR><BR>Ryan --<BR><BR>Your examples worked like a charm.. Exactly
what I was looking for! <BR>Thanks a million!<BR><BR><BR>On Nov 7,
2008, at 10:30 PM, Rick Flower wrote:<BR><BR>> Thanks Ryan! Just what
the doctor was looking for! I'll check it <BR>>
out!<BR>><BR>> On Fri, November 7, 2008 9:08 pm, Ryan Simmons
wrote:<BR>>> I have attatched two working examples for you to look
at.<BR>>><BR>>> The first assigns a unique id to each row and
attatches a script to <BR>>> the<BR>>> row with<BR>>>
scriptForRow: rowId<BR>>> | script
|<BR>>> script := SUScript new.<BR>>>
script element id: rowId;<BR>>>
on:
'mouseover' do: (SUElement new addClassName: 'highlight');<BR>>>
on:
'mouseout' do: (SUElement new removeClassName: 'highlight').<BR>>>
^script<BR>>><BR>>> The second removes
the unique id and adds the class 'effectTarget' to<BR>>> each row. It
then uses a selector for the script.<BR>>> scriptForRows<BR>>>
| script |<BR>>>
script := SUScript new.<BR>>> script selector
add: 'tr.effectTarget';<BR>>>
do: [:each |<BR>>>
each element on: 'mouseover' do:
(SUElement new addClassName:<BR>>> 'highlight');<BR>>>
on: 'mouseout' do: (SUElement new
removeClassName: 'highlight')].<BR>>>
^script<BR>>><BR>>><BR>>> On Sat, Nov 8, 2008 at 4:57 AM,
Rick Flower <rickf@ca-flower.com> <BR>>>
wrote:<BR>>>> Lukas et-al,<BR>>>><BR>>>> Is the
generated Javascript for the observe function supposed
to <BR>>>> quote<BR>>>> the<BR>>>> first
argument? I wonder if certain key names are OK to be
unquoted<BR>>>> such<BR>>>> as 'window' or 'document' but
others need quoting?... I see <BR>>>> generated<BR>>>>
code<BR>>>> like the following which is not what I see on the various
websites<BR>>>> showing<BR>>>> how Event.observe is used
:<BR>>>><BR>>>> <script
type="text/javascript"><BR>>>>
1/*<![CDATA[*/Event.observe(foobarbaz,'mouseover',function(event)<BR>>>>
{new<BR>>>> Effect.Highlight(this)})/*]]>*/<BR>>>>
</script><BR>>>><BR>>>> The various websites I've seen
(including the one below) show the <BR>>>> first<BR>>>>
arguments in single quotes.. Not sure if that is what is causing
my<BR>>>> problem<BR>>>> currently with firebug saying
'foobarbaz' not found<BR>>>><BR>>>> <A
href="http://joseph.randomnetworks.com/archives/2006/08/01/javascript-events-with-prototype/">http://joseph.randomnetworks.com/archives/2006/08/01/javascript-events-with-prototype/</A><BR>>>><BR>>>>
Below is the sample generated Seaside table :<BR>>>><BR>>>>
<table><BR>>>> <tbody><BR>>>>
<tr><BR>>>> <th
id="foobarbaz"></th><BR>>>> <th
id="foobarbaz"></th><BR>>>> <th
id="foobarbaz">Description</th><BR>>>>
</tr><BR>>>>
...<BR>>>><BR>>>><BR>>>><BR>>>> On Fri,
November 7, 2008 6:35 pm, Rick Flower wrote:<BR>>>>> One more
followup.. I'm getting somewhere -- just not sure
where..<BR>>>>><BR>>>>> Anyway, I've now modified the
following code (yes, I realize I'm<BR>>>>>
whacking<BR>>>>> up my image, but I can live with that!)
:<BR>>>>><BR>>>>>
WATableReport>>renderRowNumber: index item: row on:
html<BR>>>>> html
tableRow<BR>>>>> script:
(Scriptaculous.SUEvent
new<BR>>>>>
observe: (Scriptaculous.SUStream on: <BR>>>>>
'document')<BR>>>>>
on:
'mouseover'<BR>>>>>
do: (html effect
highlight));<BR>>>>>
style: 'background-color: ' , (self colorForRowNumber:<BR>>>>>
index);<BR>>>>>
with:
[<BR>>>>>
columns do: [ :each
|<BR>>>>>
self renderColumn: each row: row on: <BR>>>>>
html<BR>>>>> ] ]<BR>>>>><BR>>>>> It
actually loads but I get identical javascript entries that
are<BR>>>>> identical<BR>>>>> for each row, which
makes me think that my '#observe' method <BR>>>>> above
is<BR>>>>> wrong and is currently telling it to look at the entire
document<BR>>>>> instead<BR>>>>> of the row in
question.. Now, I tried changing 'document' to be<BR>>>>>
'foobar'<BR>>>>> and ensured that the above tableRow had #id:
#foobar but no <BR>>>>> difference<BR>>>>>
and<BR>>>>> Firebug was complaining about foobar not being
defined..<BR>>>>><BR>>>>> Anyway, I think I'm close..
Does anyone have better examples on the<BR>>>>> use of #observe:
on: do:? There are only a few examples and
none <BR>>>>> doing<BR>>>>> anything other than
using the entire document..<BR>>>>><BR>>>>>
HELP?!?<BR>>>>><BR>>>>><BR>>>>><BR>>>>><BR>>>>><BR>>>>><BR>>>>>
On Fri, November 7, 2008 4:58 pm, Rick Flower wrote:<BR>>>>>>
Ok -- just to reply to myself.. I was missing the need to
add<BR>>>>>> SULibrary<BR>>>>>> to the list of
libraries that the Dispatch editor indicates.. <BR>>>>>>
Once I<BR>>>>>> did<BR>>>>>> that the prototype
(and related) libraries were loaded so no more<BR>>>>>>
error..<BR>>>>>> Now, I did end up copying the code below to my
test from one of <BR>>>>>> the<BR>>>>>>
Scriptaculous examples and it runs great and
highlights <BR>>>>>> EVERYTHING
but<BR>>>>>> I<BR>>>>>> only want it to
highlight a single <TR> in a table when the
mouse<BR>>>>>> hovers<BR>>>>>> over it.. Any
ideas how to tailor it to down-scope what it <BR>>>>>>
highlights?<BR>>>>>><BR>>>>>>
MTIA!<BR>>>>>><BR>>>>>> html script:
(Scriptaculous.SUEvent
new<BR>>>>>> observe:
(Scriptaculous.SUStream on:
'document')<BR>>>>>> on:
'mouseover'<BR>>>>>> do: (html
effect highlight; id: Scriptaculous.SUEvent new<BR>>>>>>
element)).<BR>>>>>><BR>>>>>><BR>>>>>><BR>>>>>>
On Fri, November 7, 2008 3:43 pm, Rick Flower
wrote:<BR>>>>>>> By the way, I modified the existing Seaside
Unit Test<BR>>>>>>>
(WATableReportTest)<BR>>>>>>> to have a #renderContentOn:
method as follows (the rest of the <BR>>>>>>>
test<BR>>>>>>> code<BR>>>>>>> is the same)
:<BR>>>>>>><BR>>>>>>>
WATableReportTest>>renderContentOn:
html<BR>>>>>>><BR>>>>>>>
self session addLoadScript: (html
selector<BR>>>>>>>
add:
'tr.effect';<BR>>>>>>>
do: [ :each
|<BR>>>>>>>
each element on: 'mouseover' do:<BR>>>>>>>
'$(event.target).up(''tr'').addClassName(''highlight'')'.<BR>>>>>>>
each element on: 'mouseout' do:<BR>>>>>>>
'$(event.target).up(''tr'').removeClassName(''highlight'')']).<BR>>>>>>>
html render: report.<BR>>>>>>><BR>>>>>>>
Unfortunately, I must be doing something wrong as
Firebug <BR>>>>>>>
complains<BR>>>>>>> about<BR>>>>>>> the
use of '$$' below in the generated script... Any
ideas <BR>>>>>>> what I've<BR>>>>>>>
missed?<BR>>>>>>><BR>>>>>>> <script
type="text/javascript"><BR>>>>>>>
1/*<![CDATA[*/function<BR>>>>>>>
onLoad(){$$('tr.effect').each(function(){$<BR>>>>>>>
(arguments[0]).observe('mouseover',function(event){'$<BR>>>>>>>
(event.target).up(\'tr\').addClassName(\'highlight\')'});$<BR>>>>>>>
(arguments[0]).observe('mouseout',function(event){'$<BR>>>>>>>
(event.target).up(\'tr\').removeClassName(\'highlight\')'})})}/<BR>>>>>>>
*]]>*/<BR>>>>>>>
</script><BR>>>>>>><BR>>>>>>><BR>>>>>>>
_______________________________________________<BR>>>>>>>
seaside mailing list<BR>>>>>>>
seaside@lists.squeakfoundation.org<BR>>>>>>> <A
href="http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/</A><BR>>>>>>>
seaside<BR>>>>>>><BR>>>>>>><BR>>>>>><BR>>>>>><BR>>>>>>
_______________________________________________<BR>>>>>>
seaside mailing list<BR>>>>>>
seaside@lists.squeakfoundation.org<BR>>>>>> <A
href="http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside</A><BR>>>>>><BR>>>>>><BR>>>>><BR>>>>><BR>>>>>
_______________________________________________<BR>>>>> seaside
mailing list<BR>>>>>
seaside@lists.squeakfoundation.org<BR>>>>> <A
href="http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside</A><BR>>>>><BR>>>>><BR>>>><BR>>>><BR>>>>
_______________________________________________<BR>>>> seaside
mailing list<BR>>>>
seaside@lists.squeakfoundation.org<BR>>>> <A
href="http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside</A><BR>>>><BR>>>
_______________________________________________<BR>>> seaside mailing
list<BR>>> seaside@lists.squeakfoundation.org<BR>>> <A
href="http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside</A><BR>>><BR>><BR>><BR>>
_______________________________________________<BR>> seaside mailing
list<BR>> seaside@lists.squeakfoundation.org<BR>> <A
href="http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside</A><BR>><BR><BR>_______________________________________________<BR>seaside
mailing list<BR>seaside@lists.squeakfoundation.org<BR><A
href="http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside</A><BR></FONT></P></BLOCKQUOTE></BODY></HTML>