[Seaside] Use of onMouseOver: and onMouseOut: in Seaside 2.8x

Sebastian Sastre ssastre at seaswork.com
Sun Nov 9 21:28:40 UTC 2008


Hi,
Prototype lacks of support to mouse enter/leave. They implemented the custom events and let that to the users so far.
Maybe jQuery supports those but I can't confirm that.
cheers,
Sebastian
 
 


  _____  

De: seaside-bounces at lists.squeakfoundation.org [mailto:seaside-bounces at lists.squeakfoundation.org] En nombre de Boris Popov
Enviado el: Sábado, 08 de Noviembre de 2008 19:54
Para: seaside at lists.squeakfoundation.org
Asunto: Re: [Seaside] Use of onMouseOver: and onMouseOut: in Seaside 2.8x



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.

Cheers!

-Boris (via BlackBerry)

----- Original Message -----
From: seaside-bounces at lists.squeakfoundation.org <seaside-bounces at lists.squeakfoundation.org>
To: Seaside - general discussion <seaside at lists.squeakfoundation.org>
Sent: Sat Nov 08 13:52:58 2008
Subject: Re: [Seaside] Use of onMouseOver: and onMouseOut: in Seaside 2.8x

Ryan --

Your examples worked like a charm.. Exactly what I was looking for!  
Thanks a million!


On Nov 7, 2008, at 10:30 PM, Rick Flower wrote:

> Thanks Ryan!  Just what the doctor was looking for!  I'll check it 
> out!
>
> On Fri, November 7, 2008 9:08 pm, Ryan Simmons wrote:
>> I have attatched two working examples for you to look at.
>>
>> The first assigns a unique id to each row and attatches a script to 
>> the
>> row with
>> scriptForRow: rowId
>>      | script |
>>      script := SUScript new.
>>      script element id: rowId;
>>              on: 'mouseover' do: (SUElement new addClassName: 'highlight');
>>              on: 'mouseout' do: (SUElement new removeClassName: 'highlight').
>>      ^script
>>
>> The second removes the unique id and adds the class 'effectTarget' to
>> each row. It then uses a selector for the script.
>> scriptForRows
>>      | script |
>>      script := SUScript new.
>>      script selector add: 'tr.effectTarget';
>>              do: [:each |
>>                      each element on: 'mouseover' do: (SUElement new addClassName:
>> 'highlight');
>>                              on: 'mouseout' do: (SUElement new removeClassName: 'highlight')].
>>      ^script
>>
>>
>> On Sat, Nov 8, 2008 at 4:57 AM, Rick Flower <rickf at ca-flower.com> 
>> wrote:
>>> Lukas et-al,
>>>
>>> Is the generated Javascript for the observe function supposed to 
>>> quote
>>> the
>>> first argument?  I wonder if certain key names are OK to be unquoted
>>> such
>>> as 'window' or 'document' but others need quoting?... I see 
>>> generated
>>> code
>>> like the following which is not what I see on the various websites
>>> showing
>>> how Event.observe is used :
>>>
>>> <script type="text/javascript">
>>> 1/*<![CDATA[*/Event.observe(foobarbaz,'mouseover',function(event)
>>> {new
>>> Effect.Highlight(this)})/*]]>*/
>>> </script>
>>>
>>> The various websites I've seen (including the one below) show the 
>>> first
>>> arguments in single quotes.. Not sure if that is what is causing my
>>> problem
>>> currently with firebug saying 'foobarbaz' not found
>>>
>>> http://joseph.randomnetworks.com/archives/2006/08/01/javascript-events-with-prototype/
>>>
>>> Below is the sample generated Seaside table :
>>>
>>> <table>
>>> <tbody>
>>> <tr>
>>> <th id="foobarbaz"></th>
>>> <th id="foobarbaz"></th>
>>> <th id="foobarbaz">Description</th>
>>> </tr>
>>> ...
>>>
>>>
>>>
>>> On Fri, November 7, 2008 6:35 pm, Rick Flower wrote:
>>>> One more followup.. I'm getting somewhere -- just not sure where..
>>>>
>>>> Anyway, I've now modified the following code (yes, I realize I'm
>>>> whacking
>>>> up my image, but I can live with that!) :
>>>>
>>>> WATableReport>>renderRowNumber: index item: row on: html
>>>>      html tableRow
>>>>      script: (Scriptaculous.SUEvent new
>>>>                      observe: (Scriptaculous.SUStream on: 
>>>> 'document')
>>>>                      on: 'mouseover'
>>>>                      do: (html effect highlight));
>>>>              style: 'background-color: ' , (self colorForRowNumber:
>>>> index);
>>>>              with: [
>>>>                      columns do: [ :each |
>>>>                              self renderColumn: each row: row on: 
>>>> html
>>>> ] ]
>>>>
>>>> It actually loads but I get identical javascript entries that are
>>>> identical
>>>> for each row, which makes me think that my '#observe' method 
>>>> above is
>>>> wrong and is currently telling it to look at the entire document
>>>> instead
>>>> of the row in question..  Now, I tried changing 'document' to be
>>>> 'foobar'
>>>> and ensured that the above tableRow had #id: #foobar but no 
>>>> difference
>>>> and
>>>> Firebug was complaining about foobar not being defined..
>>>>
>>>> Anyway, I think I'm close.. Does anyone have better examples on the
>>>> use of #observe: on: do:?  There are only a few examples and none 
>>>> doing
>>>> anything other than using the entire document..
>>>>
>>>> HELP?!?
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>> On Fri, November 7, 2008 4:58 pm, Rick Flower wrote:
>>>>> Ok -- just to reply to myself.. I was missing the need to add
>>>>> SULibrary
>>>>> to the list of libraries that the Dispatch editor indicates.. 
>>>>> Once I
>>>>> did
>>>>> that the prototype (and related) libraries were loaded so no more
>>>>> error..
>>>>> Now, I did end up copying the code below to my test from one of 
>>>>> the
>>>>> Scriptaculous examples and it runs great and highlights 
>>>>> EVERYTHING but
>>>>> I
>>>>> only want it to highlight a single <TR> in a table when the mouse
>>>>> hovers
>>>>> over it.. Any ideas how to tailor it to down-scope what it 
>>>>> highlights?
>>>>>
>>>>> MTIA!
>>>>>
>>>>>   html script: (Scriptaculous.SUEvent new
>>>>>      observe: (Scriptaculous.SUStream on: 'document')
>>>>>      on: 'mouseover'
>>>>>      do: (html effect highlight; id: Scriptaculous.SUEvent new
>>>>> element)).
>>>>>
>>>>>
>>>>>
>>>>> On Fri, November 7, 2008 3:43 pm, Rick Flower wrote:
>>>>>> By the way, I modified the existing Seaside Unit Test
>>>>>> (WATableReportTest)
>>>>>> to have a #renderContentOn: method as follows (the rest of the 
>>>>>> test
>>>>>> code
>>>>>> is the same) :
>>>>>>
>>>>>> WATableReportTest>>renderContentOn: html
>>>>>>
>>>>>>        self session addLoadScript: (html selector
>>>>>>              add: 'tr.effect';
>>>>>>              do: [ :each |
>>>>>>                        each element on: 'mouseover' do:
>>>>>> '$(event.target).up(''tr'').addClassName(''highlight'')'.
>>>>>>                       each element on: 'mouseout' do:
>>>>>> '$(event.target).up(''tr'').removeClassName(''highlight'')']).
>>>>>>    html render: report.
>>>>>>
>>>>>> Unfortunately, I must be doing something wrong as Firebug 
>>>>>> complains
>>>>>> about
>>>>>> the use of '$$' below in the generated script...  Any ideas 
>>>>>> what I've
>>>>>> missed?
>>>>>>
>>>>>> <script type="text/javascript">
>>>>>> 1/*<![CDATA[*/function
>>>>>> onLoad(){$$('tr.effect').each(function(){$
>>>>>> (arguments[0]).observe('mouseover',function(event){'$
>>>>>> (event.target).up(\'tr\').addClassName(\'highlight\')'});$
>>>>>> (arguments[0]).observe('mouseout',function(event){'$
>>>>>> (event.target).up(\'tr\').removeClassName(\'highlight\')'})})}/
>>>>>> *]]>*/
>>>>>> </script>
>>>>>>
>>>>>>
>>>>>> _______________________________________________
>>>>>> seaside mailing list
>>>>>> seaside at lists.squeakfoundation.org
>>>>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/
>>>>>> seaside
>>>>>>
>>>>>>
>>>>>
>>>>>
>>>>> _______________________________________________
>>>>> seaside mailing list
>>>>> seaside at lists.squeakfoundation.org
>>>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>>>>
>>>>>
>>>>
>>>>
>>>> _______________________________________________
>>>> seaside mailing list
>>>> seaside at lists.squeakfoundation.org
>>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>>>
>>>>
>>>
>>>
>>> _______________________________________________
>>> seaside mailing list
>>> seaside at lists.squeakfoundation.org
>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>>
>> _______________________________________________
>> seaside mailing list
>> seaside at lists.squeakfoundation.org
>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>
>
>
> _______________________________________________
> seaside mailing list
> seaside at lists.squeakfoundation.org
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>

_______________________________________________
seaside mailing list
seaside at lists.squeakfoundation.org
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside


-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.squeakfoundation.org/pipermail/seaside/attachments/20081109/418c35a7/attachment-0001.htm


More information about the seaside mailing list