Yes, I get the idea. FYI this is what my final code is:

$$("ul.bopCategories li h3").each(function (elm) {
        elm.observe('click', function(evt){
                evt.element().next('div.bopCategoryDetails').toggle();
                evt.element().toggleClassName('expanded');
        });
});

Thanks everyone.

On Oct 3, 12:53 pm, "T.J. Crowder" <[EMAIL PROTECTED]> wrote:
> > This is a common misunderstanding of `bindAsEventListener`
>
> Indeed, it's pretty rare to need to use bindAsEventListener.
>
> > Finally, invoking `down` without
> > arguments (i.e. when you only need to step one level down) is usually
> > faster than using an expression:
>
> It's not "down" anyway, is it?  The div is a sibling of the h3 in the
> OP's markup...
>
> But I'm sure the OP's getting the idea. :-)
> --
> T.J. Crowder
> tj / crowder software / com
>
> On Oct 3, 1:39 pm, kangax <[EMAIL PROTECTED]> wrote:
>
> > On Oct 3, 5:38 am, bluezehn <[EMAIL PROTECTED]> wrote:
>
> > > So get that javascript out of the html and use observers.
>
> > > So the code you have so far is much better in prototype as this:
>
> > > <h3>Event</h3>
> > >         <div id="divvy2">
> > >         Test test test test test test test test ets test test test
> > > test test
> > >         </div>
>
> > > <!-- IN JAVASCRIPT -->
> > > document.observe('dom:loaded', function()
> > > {
> > >   $$('h3').each(function(h3) {
> > >     h3.observe('click', function() {
> > >       this.down('div').toggle();
> > >     }.bindAsEventListener(h3));
>
> > This is a common misunderstanding of `bindAsEventListener` : ) Plain
> > `bind` is actually sufficient unless you need to curry (prefill with
> > arguments) an event handler. Also, `h3` (which `bindAsEventListener`
> > uses) seems to be `undefined` here. Finally, invoking `down` without
> > arguments (i.e. when you only need to step one level down) is usually
> > faster than using an expression:
>
> > $$('h3').invoke('observe', 'click', function() {
> >   this.down().toggle();
>
> > });
> > >   });
>
> > > });
>
> > > So I've tried to use a really compact bit of code there not
> > > necessarily to do exactly what you want, but to demonstrate loads of
> > > cool prototype-ish features.
>
> > > First, 'dom:loaded' is a custom event fired by prototype when the dom
> > > has loaded BUT not necessarily all the images, flash files or whatever
> > > else you may have on the page. Clearly this is better than onLoad for
> > > the body or window. You can see that this event is observed by calling
> > > the observe method on an object and specifying a function to run when
> > > the event fires. Here the function is defined inline.
>
> > > Moving down the code, $$ returns an array of everything that matches
> > > that css definition. So in this case, all 'h3' tags in the dom. The
> > > each method can be applied to all enumerables in prototype and is kind
> > > of like a foreach language structure. So it's saying apply this
> > > function to each h3 element.
>
> > > You'll probably from jquery be familiar with the .down method, it's
> > > kind of self explanatory, but then you'll notice as well the
> > > bindAsEventListener function at the end there. What that effectively
> > > does is make sure that the variable "this" inside the preceding
> > > function refers to the parameter given in bindAsEventListener.
>
> > > Any more qs let us know.
>
> > --
> > kangax
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to