How do you select a css class in Scriptaculous javascript?

Question

Here's a snippet of my code:

<div class="myclass" id="demo" style="display:none;">Hello.</div>

<a href="#" onclick="$('.myclass').fade({ duration: 0.3, from: 1, to: 0 }); $('demo').appear({ delay: 0.35 }); return false;">Click ME!</a><br />

My Firebug development plugin says: $(".myclass") is null

I have tried various other names, such as: $('div.myclass') and $('myclass'), to no avail. How do I get this effect to work on a class? Thanks!

Answer 1

$$('.myclass')[0].fade()

$$ in prototype (and mootools) accepts any sort of css selector like $$('div#joe') or $$('a[rel=awesome]') and returns an array.

$ will return just an element with a matching id like $('joe');

So given this html:

<div id="joe" class="awesome"></div>
<div id="sally" class="awesome"></div>

1. $$('.awesome') will return an array containing both DIVs
2. $('joe') and $$('#joe') are effectually the same (though the latter is an array).

---

EDIT

First remove your onclick events and add some information to the rel attribute like so:

<a rel="demo" href="#">Div 1</a><br />
<a rel="demo2" href="#">Div 2</a><br />
<a rel="demo3" href="#">Div 3</a>

Then put this in the head of your document in a script tag.

document.observe("dom:loaded", function() {
    // this makes sure the document is loaded and ready to be manipulated       

    // store your links and demo DIVs in arrays
    var links = $$('div.rightcol a');
    var demos = $$('.myclass');

    // enumerate over the links
    links.each(function(link){
        // observe the click event of the current link in the loop
     link.observe('click',function(event){
      event.stop();
            // loop the demo DIVs and fade each one
      demos.each(function(demo){
       demo.fade({ duration: 0.3, from: 1, to: 0 });
      });
            // figure out which demo to fade in from the links rel attribute
      var target = link.readAttribute('rel');
            // get the demo target and fade it in
      $(target).appear({ delay: 0.35 });
     });
    });

});

I hope the script is easy to follow.

Answer 2

To credit rpflo it is not ideal to use obtrusive javascript. However if you are looking for the simplest code to insert you can always use the invoke method which is provided by Prototype.

<a href="#" onclick="$$('.myclass').invoke('fade',{ duration: 0.1, from: 1, to: 0 });
$$('.myclass').invoke('appear',{ delay: 0.35 });return false;">Div 1</a>

The invoke method performs the same function on set of DOM elements and avoids having to use the .each() method.