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 [email protected]
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
-~----------~----~----~----~------~----~------~--~---
