Between me and T.J's post you should be able to get something decent
working now, plenty of code for you!
On Oct 3, 10: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));
> });
>
> });
>
> 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.
>
> On Oct 3, 10:11 am, Kris Northfield <[EMAIL PROTECTED]>
> wrote:
>
> > Hi all,
> > Trying to get used to prtotype, I've written this code in jquery but
> > need a prototype equivalent. I've trawled the web for ages and read
> > pretty much a whole book (the Manning one with the turk on the front)
> > but I'm still none the wiser. Any help would be much appreciated. I've
> > got this html:
>
> > <ul class="bopCategories">
> > <li>
> > <h3 class="expanded">Heading One</h3>
> > <div class="bopCategoryDetails">
> > Lorem ipsum dolor sit amet.
> > </div>
> > </li>
> > <li>
> > <h3 class="expanded">Heading Two</h3>
> > <div class="bopCategoryDetails">
> > Lorem ipsum dolor sit amet.
> > </div>
> > </li>
> > </ul>
>
> > which I then toggle the showing/hiding of the <div>s when the <h3>s
> > are clicked with this jquery code:
>
> > $("ul.bopCategories li h3").click(function(){
>
> >
> > $(this).siblings("div.bopCategoryDetails").toggle("fast");
> > $(this).toggleClass("expanded");
>
> > });
>
> > How on earth do I do this with Prototype? So far I've only managed to
> > add an onclick event to every <h3> and pass the id of the specific
> > <div>. Like so:
>
> > <h3 onclick="$('divvy2').toggle();">Event</h3>
> > <div id="divvy2">
> > Test test test test test test test test ets test test test test test
> > </div>
>
> > Obviously this is going to get cumbersome when I have 20 or so list
> > items.
> > Thanks.
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
