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