Use of onMouseOver: and onMouseOut: in Seaside 2.8x

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
17 messages Options
Reply | Threaded
Open this post in threaded view
|

Use of onMouseOver: and onMouseOut: in Seaside 2.8x

Rick Flower
As I mentioned earlier today, I'm updating some older code that was  
written for Seaside 2.6x and the following code
does not appear to work -- at least to what I'm expecting -- it does  
not get any DNUs or anything like that..
I'm guessing it's an outdated construct.  If I put a breakpoint in the  
onMouseOver it is only
called during initial rendering but never when the event occurs which  
is what I'm expecting.
  I've never used these events before and perhaps the constructs are  
different for the newer Seaside?

Below is the offending code snippet:

renderRowNumber: index item: row on: html
        html tableRow id: 'row' , index asString;
                class: (self classForRowNumber: index);
                 onClick: (html evaluator
                        callback: [:aScript | self adjustRowColorsUsingIndex: index  
onScript: aScript];
                         return: false);
                 onMouseOver: ('javascript:Element.addClassName("row', index  
asString, '","RowColor-', self highlightColor, '")');
                  onMouseOut: ('javascript:Element.removeClassName("row', index  
asString, '","RowColor-', self highlightColor, '")');
                with: [columns
                                do: [:ea | self
                                                renderColumn: ea
                                                row: row
                                                on: html]]
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

RE: Use of onMouseOver: and onMouseOut: in Seaside 2.8x

Sebastian Sastre-2

Hi Richard,

that will be rendered as javascript so you can't expect a server side halt for
code that runs in DOM unless a callback is envolved. Unfortunately there is not
Firebug code halts yet to mimic our debugging style. I miss that when
javascripting.

You can use this to check in firebug's console if your code executes under your
condition:

        SUScript new
                add: (SULogger new log: 'The mouse is over!');
                add: (your javascript serius code here);
                yourself

Usage of onClick, onMouseOver, etc are considered the "vile way" to do it.
Instead prefer observe(). Details here:
http://www.prototypejs.org/api/event/observe

Cheers,

Sebastian Sastre

 

> -----Mensaje original-----
> De: [hidden email]
> [mailto:[hidden email]] En nombre
> de Richard E. Flower
> Enviado el: Jueves, 06 de Noviembre de 2008 04:36
> Para: Seaside - general discussion
> Asunto: [Seaside] Use of onMouseOver: and onMouseOut: in Seaside 2.8x
>
> As I mentioned earlier today, I'm updating some older code that was  
> written for Seaside 2.6x and the following code
> does not appear to work -- at least to what I'm expecting -- it does  
> not get any DNUs or anything like that..
> I'm guessing it's an outdated construct.  If I put a
> breakpoint in the  
> onMouseOver it is only
> called during initial rendering but never when the event
> occurs which  
> is what I'm expecting.
>   I've never used these events before and perhaps the constructs are  
> different for the newer Seaside?
>
> Below is the offending code snippet:
>
> renderRowNumber: index item: row on: html
> html tableRow id: 'row' , index asString;
> class: (self classForRowNumber: index);
> onClick: (html evaluator
> callback: [:aScript | self
> adjustRowColorsUsingIndex: index  
> onScript: aScript];
> return: false);
> onMouseOver:
> ('javascript:Element.addClassName("row', index  
> asString, '","RowColor-', self highlightColor, '")');
>  onMouseOut:
> ('javascript:Element.removeClassName("row', index  
> asString, '","RowColor-', self highlightColor, '")');
> with: [columns
> do: [:ea | self
> renderColumn: ea
> row: row
> on: html]]
> _______________________________________________
> seaside mailing list
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: Use of onMouseOver: and onMouseOut: in Seaside 2.8x

Rick Flower
On Nov 6, 2008, at 1:11 AM, Sebastian Sastre wrote:

>
> Hi Richard,
>
> that will be rendered as javascript so you can't expect a server  
> side halt for
> code that runs in DOM unless a callback is envolved. Unfortunately  
> there is not
> Firebug code halts yet to mimic our debugging style. I miss that when
> javascripting.
>
> You can use this to check in firebug's console if your code executes  
> under your
> condition:
>
> SUScript new
> add: (SULogger new log: 'The mouse is over!');
> add: (your javascript serius code here);
> yourself
>
> Usage of onClick, onMouseOver, etc are considered the "vile way" to  
> do it.
> Instead prefer observe(). Details here:
> http://www.prototypejs.org/api/event/observe

Sebastian-

I don't suppose you've got an example using the above mentioned  
observe() code in Prototype
do you?  Is this what is used by Scriptaculous' SUElement?  I saw a  
reference to 'observe'
in there but wasn't sure.. I've just spent the last hour or so looking  
thru the old email
archives for this list and saw some tidbits but no concrete  
examples..  I also looked at the test
code for Scriptaculous but nothing similar to what I want to do, which  
is to change the css for
an id when the mouse goes over the row in a table...

I saw a reference in an email you wrote this past August talking about  
using :

========================
> From Seaside you access that with anElement>>on: anEventString do:
aHandlerObject
With prototype you can even use your own custom events like this:  
anElement
fire: 'mouse:enter'
========================

However, I'm not sure about the context in which to use the above..  
An example would
be great!

Currently my row rendering code looks something like :

renderRowNumber: index item: row on: html

        html tableRow id: 'row' , index asString;
                class: (self classForRowNumber: index);
                script: (self componentScriptOn: html);
                 onClick: (html evaluator
                        callback: [:aScript | self adjustRowColorsUsingIndex: index  
onScript: aScript];
                         return: false);
                with: [columns
                                do: [:ea | self
                                                renderColumn: ea
                                                row: row
                                                on: html]]

componentScriptOn: html

        ^(Scriptaculous.SUScript new
                add: (Scriptaculous.SUEvent new
                        observe: html scriptaculous document
                        on: 'mouseover'
                        do: (Scriptaculous.SULogger new log: 'The mouse is over!')
                        ); yourself;
        yourself).

====================================================
When I execute this with Firefox (and Firebug) I get the following  
error in the console window:

Event.observe is not a function
   onLoad()
   onLoad(load)

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: Use of onMouseOver: and onMouseOut: in Seaside 2.8x

Gerhard Obermann
Hi!

You could try something like this!
You will need an extra CSS class for your rows!

     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'')']).

cheers
Gerhard

On Fri, Nov 7, 2008 at 7:55 AM, Richard E. Flower <[hidden email]> wrote:
On Nov 6, 2008, at 1:11 AM, Sebastian Sastre wrote:


Hi Richard,

that will be rendered as javascript so you can't expect a server side halt for
code that runs in DOM unless a callback is envolved. Unfortunately there is not
Firebug code halts yet to mimic our debugging style. I miss that when
javascripting.

You can use this to check in firebug's console if your code executes under your
condition:

       SUScript new
               add: (SULogger new log: 'The mouse is over!');
               add: (your javascript serius code here);
               yourself

Usage of onClick, onMouseOver, etc are considered the "vile way" to do it.
Instead prefer observe(). Details here:
http://www.prototypejs.org/api/event/observe

Sebastian-

I don't suppose you've got an example using the above mentioned observe() code in Prototype
do you?  Is this what is used by Scriptaculous' SUElement?  I saw a reference to 'observe'
in there but wasn't sure.. I've just spent the last hour or so looking thru the old email
archives for this list and saw some tidbits but no concrete examples..  I also looked at the test
code for Scriptaculous but nothing similar to what I want to do, which is to change the css for
an id when the mouse goes over the row in a table...

I saw a reference in an email you wrote this past August talking about using :

========================
>From Seaside you access that with anElement>>on: anEventString do:
aHandlerObject
With prototype you can even use your own custom events like this: anElement
fire: 'mouse:enter'
========================

However, I'm not sure about the context in which to use the above..  An example would
be great!

Currently my row rendering code looks something like :


renderRowNumber: index item: row on: html

       html tableRow id: 'row' , index asString;
               class: (self classForRowNumber: index);
               script: (self componentScriptOn: html);

                onClick: (html evaluator
                       callback: [:aScript | self adjustRowColorsUsingIndex: index onScript: aScript];
                        return: false);
               with: [columns
                               do: [:ea | self
                                               renderColumn: ea
                                               row: row
                                               on: html]]

componentScriptOn: html

       ^(Scriptaculous.SUScript new
               add: (Scriptaculous.SUEvent new
                       observe: html scriptaculous document
                       on: 'mouseover'
                       do: (Scriptaculous.SULogger new log: 'The mouse is over!')
                       ); yourself;
       yourself).

====================================================
When I execute this with Firefox (and Firebug) I get the following error in the console window:

Event.observe is not a function
 onLoad()
 onLoad(load)


_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside


_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: Use of onMouseOver: and onMouseOut: in Seaside 2.8x

Rick Flower
Garhard -

Thanks!  One more stupid question..  Where does that fit into the rest of the rendering code that
is creating the TableRows? Is this going to be put in for any TR's for the entire form that was rendered
and there is no relationship (direct anyway) between the two?  Anyway, just curious.. Thx!

-- Rick


On Nov 7, 2008, at 12:37 AM, Gerhard Obermann wrote:

Hi!

You could try something like this!
You will need an extra CSS class for your rows!

     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'')']).

cheers
Gerhard

On Fri, Nov 7, 2008 at 7:55 AM, Richard E. Flower <[hidden email]> wrote:
On Nov 6, 2008, at 1:11 AM, Sebastian Sastre wrote:


Hi Richard,

that will be rendered as javascript so you can't expect a server side halt for
code that runs in DOM unless a callback is envolved. Unfortunately there is not
Firebug code halts yet to mimic our debugging style. I miss that when
javascripting.

You can use this to check in firebug's console if your code executes under your
condition:

       SUScript new
               add: (SULogger new log: 'The mouse is over!');
               add: (your javascript serius code here);
               yourself

Usage of onClick, onMouseOver, etc are considered the "vile way" to do it.
Instead prefer observe(). Details here:
http://www.prototypejs.org/api/event/observe

Sebastian-

I don't suppose you've got an example using the above mentioned observe() code in Prototype
do you?  Is this what is used by Scriptaculous' SUElement?  I saw a reference to 'observe'
in there but wasn't sure.. I've just spent the last hour or so looking thru the old email
archives for this list and saw some tidbits but no concrete examples..  I also looked at the test
code for Scriptaculous but nothing similar to what I want to do, which is to change the css for
an id when the mouse goes over the row in a table...

I saw a reference in an email you wrote this past August talking about using :

========================
>From Seaside you access that with anElement>>on: anEventString do:
aHandlerObject
With prototype you can even use your own custom events like this: anElement
fire: 'mouse:enter'
========================

However, I'm not sure about the context in which to use the above..  An example would
be great!

Currently my row rendering code looks something like :


renderRowNumber: index item: row on: html

       html tableRow id: 'row' , index asString;
               class: (self classForRowNumber: index);
               script: (self componentScriptOn: html);

                onClick: (html evaluator
                       callback: [:aScript | self adjustRowColorsUsingIndex: index onScript: aScript];
                        return: false);
               with: [columns
                               do: [:ea | self
                                               renderColumn: ea
                                               row: row
                                               on: html]]

componentScriptOn: html

       ^(Scriptaculous.SUScript new
               add: (Scriptaculous.SUEvent new
                       observe: html scriptaculous document
                       on: 'mouseover'
                       do: (Scriptaculous.SULogger new log: 'The mouse is over!')
                       ); yourself;
       yourself).

====================================================
When I execute this with Firefox (and Firebug) I get the following error in the console window:

Event.observe is not a function
 onLoad()
 onLoad(load)


_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside


_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: Use of onMouseOver: and onMouseOut: in Seaside 2.8x

Rick Flower
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
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: Use of onMouseOver: and onMouseOut: in Seaside 2.8x

Rick Flower
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
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>
>


_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: Use of onMouseOver: and onMouseOut: in Seaside 2.8x

Rick Flower
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
>> [hidden email]
>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>
>>
>
>
> _______________________________________________
> seaside mailing list
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>
>


_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: Use of onMouseOver: and onMouseOut: in Seaside 2.8x

Rick Flower
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
>>> [hidden email]
>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>>
>>>
>>
>>
>> _______________________________________________
>> seaside mailing list
>> [hidden email]
>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>
>>
>
>
> _______________________________________________
> seaside mailing list
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>
>


_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: Use of onMouseOver: and onMouseOut: in Seaside 2.8x

Ryan Simmons-2
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 <[hidden email]> 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
>>>> [hidden email]
>>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>>>
>>>>
>>>
>>>
>>> _______________________________________________
>>> seaside mailing list
>>> [hidden email]
>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>>
>>>
>>
>>
>> _______________________________________________
>> seaside mailing list
>> [hidden email]
>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>
>>
>
>
> _______________________________________________
> seaside mailing list
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

SeasideList-TableChangeCss.st (6K) Download Attachment
Reply | Threaded
Open this post in threaded view
|

Re: Use of onMouseOver: and onMouseOut: in Seaside 2.8x

Rick Flower
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 <[hidden email]> 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
>>>>> [hidden email]
>>>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>>>>
>>>>>
>>>>
>>>>
>>>> _______________________________________________
>>>> seaside mailing list
>>>> [hidden email]
>>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>>>
>>>>
>>>
>>>
>>> _______________________________________________
>>> seaside mailing list
>>> [hidden email]
>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>>
>>>
>>
>>
>> _______________________________________________
>> seaside mailing list
>> [hidden email]
>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>
> _______________________________________________
> seaside mailing list
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>


_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: Use of onMouseOver: and onMouseOut: in Seaside 2.8x

Lukas Renggli
In reply to this post by Rick Flower
> 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 :

No. Functions should never be quoted, they are propre closure objects
and should be treated equally to a Smalltalk block. Using strings to
model functions dates back to the very early days of Javascript.
Although most Javascript VMs allow one to transparently exchange them
with strings, it is not a suggested practice. This kind of escaping of
Javascript functions can be considered a bug that we fixed in Seaside
2.9. I back ported it to Seaside 2.8:

Name: Scriptaculous-lr.243
Author: lr
Time: 8 November 2008, 9:46:05 am
UUID: 0c9fade9-b677-40f2-90f3-1ae1855797ac
Ancestors: Scriptaculous-lr.242

- backported from Seaside 2.9: If a string is used as function don't escape it

FYI: Whenever you want to include Javascript verbatim, you can use
SUStream>>#on:. Otherwise a Smalltalk String is automatically escaped
as a Javascript string.

Hope this helps,
Lukas


>
> <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
>>>> [hidden email]
>>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>>>
>>>>
>>>
>>>
>>> _______________________________________________
>>> seaside mailing list
>>> [hidden email]
>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>>
>>>
>>
>>
>> _______________________________________________
>> seaside mailing list
>> [hidden email]
>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>
>>
>
>
> _______________________________________________
> seaside mailing list
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>



--
Lukas Renggli
http://www.lukas-renggli.ch
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

RE: Use of onMouseOver: and onMouseOut: in Seaside 2.8x

Sebastian Sastre-2
In reply to this post by Rick Flower
Hi Rick,
No need to goo all up to the document (parent of everything in page). You can
make the parent component of the rows to observe the event.
Think as you would do it in a desktop app: the container can/should define the
policy of reaction of its children. Here is the same but web.

Cheers,

Sebastian Sastre
PD: about hacking like that.. you can just subclass WATableReport and customize
as you please. In the long run you'll tank yourself for doing that instead of
polluting .


> -----Mensaje original-----
> De: [hidden email]
> [mailto:[hidden email]] En nombre
> de Rick Flower
> Enviado el: Sábado, 08 de Noviembre de 2008 00:36
> Para: Seaside - general discussion
> Asunto: Re: [Seaside] Use of onMouseOver: and onMouseOut: in
> Seaside 2.8x
>
> 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]).obser
> ve('mouseover',function(event){'$(event.target).up(\'tr\').add
ClassName(\'highlight\')'});>
$(arguments[0]).observe('mouseout',function(event){'$(event.ta

> rget).up(\'tr\').removeClassName(\'highlight\')'})})}/*]]>*/
> >> </script>
> >>
> >>
> >> _______________________________________________
> >> seaside mailing list
> >> [hidden email]
> >> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
> >>
> >>
> >
> >
> > _______________________________________________
> > seaside mailing list
> > [hidden email]
> > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
> >
> >
>
>
> _______________________________________________
> seaside mailing list
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: Use of onMouseOver: and onMouseOut: in Seaside 2.8x

Rick Flower
In reply to this post by Rick Flower
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 <[hidden email]>  
>> 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
>>>>>> [hidden email]
>>>>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/ 
>>>>>> seaside
>>>>>>
>>>>>>
>>>>>
>>>>>
>>>>> _______________________________________________
>>>>> seaside mailing list
>>>>> [hidden email]
>>>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>>>>
>>>>>
>>>>
>>>>
>>>> _______________________________________________
>>>> seaside mailing list
>>>> [hidden email]
>>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>>>
>>>>
>>>
>>>
>>> _______________________________________________
>>> seaside mailing list
>>> [hidden email]
>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>>
>> _______________________________________________
>> seaside mailing list
>> [hidden email]
>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>
>
>
> _______________________________________________
> seaside mailing list
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: Use of onMouseOver: and onMouseOut: in Seaside 2.8x

Boris Popov, DeepCove Labs (SNN)
In reply to this post by Rick Flower
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: [hidden email] <[hidden email]>
To: Seaside - general discussion <[hidden email]>
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 <[hidden email]
>> 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
>>>>>> [hidden email]
>>>>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/
>>>>>> seaside
>>>>>>
>>>>>>
>>>>>
>>>>>
>>>>> _______________________________________________
>>>>> seaside mailing list
>>>>> [hidden email]
>>>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>>>>
>>>>>
>>>>
>>>>
>>>> _______________________________________________
>>>> seaside mailing list
>>>> [hidden email]
>>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>>>
>>>>
>>>
>>>
>>> _______________________________________________
>>> seaside mailing list
>>> [hidden email]
>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>>
>> _______________________________________________
>> seaside mailing list
>> [hidden email]
>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>
>
>
> _______________________________________________
> seaside mailing list
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside


_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: Use of onMouseOver: and onMouseOut: in Seaside 2.8x

Rick Flower
Boris --

I did enable event logging in Firebug for the DOM part I was interested in and was seeing mouse-moves and also enters/exits as well.. Mootools might be better at this but for now I'll what's generally available.. 

Thx!

-- Rick

On Nov 8, 2008, at 1:54 PM, Boris Popov wrote:

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: [hidden email] <[hidden email]>
To: Seaside - general discussion <[hidden email]>
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 <[hidden email]
>> 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
>>>>>> [hidden email]
>>>>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/
>>>>>> seaside
>>>>>>
>>>>>>
>>>>>
>>>>>
>>>>> _______________________________________________
>>>>> seaside mailing list
>>>>> [hidden email]
>>>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>>>>
>>>>>
>>>>
>>>>
>>>> _______________________________________________
>>>> seaside mailing list
>>>> [hidden email]
>>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>>>
>>>>
>>>
>>>
>>> _______________________________________________
>>> seaside mailing list
>>> [hidden email]
>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>>
>> _______________________________________________
>> seaside mailing list
>> [hidden email]
>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>
>
>
> _______________________________________________
> seaside mailing list
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside


_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

RE: Use of onMouseOver: and onMouseOut: in Seaside 2.8x

Sebastian Sastre-2
In reply to this post by Boris Popov, DeepCove Labs (SNN)
 Re: [Seaside] Use of onMouseOver: and onMouseOut: in Seaside 2.8x
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: [hidden email] [mailto:[hidden email]] En nombre de Boris Popov
Enviado el: Sábado, 08 de Noviembre de 2008 19:54
Para: [hidden email]
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: [hidden email] <[hidden email]>
To: Seaside - general discussion <[hidden email]>
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 <[hidden email]
>> 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
>>>>>> [hidden email]
>>>>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/
>>>>>> seaside
>>>>>>
>>>>>>
>>>>>
>>>>>
>>>>> _______________________________________________
>>>>> seaside mailing list
>>>>> [hidden email]
>>>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>>>>
>>>>>
>>>>
>>>>
>>>> _______________________________________________
>>>> seaside mailing list
>>>> [hidden email]
>>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>>>
>>>>
>>>
>>>
>>> _______________________________________________
>>> seaside mailing list
>>> [hidden email]
>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>>
>> _______________________________________________
>> seaside mailing list
>> [hidden email]
>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>
>
>
> _______________________________________________
> seaside mailing list
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside


_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside