[Seaside] Use of onMouseOver: and onMouseOut: in Seaside 2.8x
Richard E. Flower
rickf at ca-flower.com
Sat Nov 8 21:52:58 UTC 2008
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
>
More information about the seaside
mailing list