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