CODEWITHSUNDEEP
javascriptscriptaculous
Eric Frank
Eric Frank

Reputation:

How do you select a CSS class in Scriptaculous JavaScript?

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!

Upvotes: 2

Views: 4555

Answers (2)

avelis
avelis

Reputation: 1133

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.

Upvotes: 1

Ryan Florence
Ryan Florence

Reputation: 13483

$$('.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.

Upvotes: 3

Related Questions