Scriptaculous events

Hi,
   I would like to make a div show/hide by clicking on a link but
entirely client-side (without communication with the image). I already
know how to make it via scriptaculous updater but it can take a few
seconds and I want to make it quicker. I tought of testing the events
of Scriptaculous but could find any example besides this code in
SUObjectTest>>testEventActions :
    SUEvent new event: 'foo'; on: 'click' do: SUElement new toggle.
I tried use it with the script: message but no effect :
    html div script: (SUEvent new event: 'foo'; on: 'click' do:
SUElement new toggle); with: 'test'.

Does anybody know how to do that or the location of some
documentation/examples ?

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

Hi Florian,

For my icalendar project I did something like that. A small calendar  
that shows up with you click on a date. It's available at http://
www.squeaksource.com/iCalSummerTalk.html . The class is called  
ICWebMiniCalendar. Feel free to look at the code and even reuse it :)

HTH,

Yann

On Jan 4, 2007, at 3:06 PM, Florian Minjat wrote:

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

>     SUEvent new event: 'foo'; on: 'click' do: SUElement new toggle.
> I tried use it with the script: message but no effect :
>     html div script: (SUEvent new event: 'foo'; on: 'click' do:
> SUElement new toggle); with: 'test'.

SUEvent is a wrapper around the JavaScript event prototype.

Current Web browsers (with the exception of the latest FireFox builds)
do not allow you to instantiate/create/trigger your own event objects.
Events are solely generated by the operating system and converted to
JavaScript objects in your Browser. The SUEvent object can only be
used within event-handlers (with the exception of #on:do:), as this is
the only place where the JavaScript variable 'event' is defined.

You can use SUEvent like this:

| x y |
x := ValueHolder new.
y := ValueHolder new.
html div
        style: 'width: 100px; height: 100px';
        onClick: (html updater
                callback: [ :v | x contents: v ] value: SUEvent new x;
                callback: [ :v | y contents: v ] value: SUEvent new y;
                callback: [ :r | html render: x contents; space; render: y contents ])

> Does anybody know how to do that or the location of some
> documentation/examples ?

I don't exactly understand what you want to do with SUEvent? Can you
elaborate your intentions?

Cheers,
Lukas

--
Lukas Renggli
http://www.lukas-renggli.ch
_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Florian Minjat wrote:
> Hi,
>   I would like to make a div show/hide by clicking on a link but
> entirely client-side (without communication with the image). I already
> know how to make it via scriptaculous updater but it can take a few
> seconds and I want to make it quicker. I tought of testing the events of

html div
     id: #MyDiv;
     with: 'Some Stuff'.

html anchor
     onClick: (html element id: #MyDiv; toggle;)
     with:'Show/Hide'.

Involves no call backs to the server, uses Prototype's Element rather
than Scriptaculous Updater, is this what you wanted?

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

>                 callback: [ :r | html render: x contents; space; render: y contents ])

That should be

      callback: [ :r | html render: x contents; space; render: y contents ])

of course :-/

I will publish a version of Scriptaculous that will turn SUEvent more
easy to use, I just noticed that it is too complex for what it does
and not powerful enough for what I wanted to test ;-)

Lukas

--
Lukas Renggli
http://www.lukas-renggli.ch
_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Florian Minjat <florian.minjat <at> emn.fr> writes:

Hi Florian

I'm using the scriptaculous effects class SUEffect to achieve what you
describe and I can get it working pretty fast by taking the effect duration
down to 0.1 seconds (I also reduce fps to 10 for good measure but I don't
think it's too significant).  Try the following...

html anchor
    onClick: (html effect
                duration: 0.1;
                fps: 10;
                id: ('nameOfDivToToggle');
                perform: #toggleAppear.);
    with: 'Toggle'.

Alan



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

Thanks Ramon !
   This is exactly what I wanted :).
   I had no id how to get an element from its id, so I tried to use
Scriptaculous instead. This will speed up my website a little.
   Lukas I'm sorry I don't understand all you wrote on the fact
browser don't allow to create my own events. But I learned from what
you said that I can do multiple callback from one html updater.
Currently I use the onComplete event, and I think it will be smaller
and quicker without it. Thanks !

Florian

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