It seems I've installed Scriptaculous incorrectly, but I can't figure out what's wrong. Here's a sample to show the problem:
<html>
<body>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
<p id="hello">Hello, World!</p>
<a href="javascript:void(0)" onclick="Effect.Shrink('hello');">Shrink effect</a>
<a href="javascript:void(0)" onclick="$('hello').shrink();">Shrink method</a>
</body>
</html>
When I click on the "Shrink effect" link, I get a Javascript error, "Effect is not defined." When I click on the "Shrink method" link, I get a different error, "$("hello").shrink is not a function."
The problem goes away if I explicitly link to the effects script:
<html>
<body>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
<script src="js/effects.js" type="text/javascript"></script> <!-- Added -->
<p id="hello">Hello, World!</p>
<a href="javascript:void(0)" onclick="Effect.Shrink('hello');">Shrink effect</a>
<a href="javascript:void(0)" onclick="$('hello').shrink();">Shrink method</a>
</body>
</html>
This workaround is acceptable, but can't Scriptaculous load all its helper scripts automatically? It seems like the installation instructions say that it should.
My html file and the js folder are not in the web server's root folder, they're both under an application folder. I see the same behaviour in Firefox 3.5.7 and Internet Explorer 8.0.