Embedding Scriptaculous - My first try
Scriptaculous doesn't need any introduction. Most of you may know what it can do, and how popular it is. For those who need an intro, "Scriptaculous is a set of open-source, free javascript library which allows you to enhance your web experience in terms of accessibility, UI controls, special effects and AJAX support". You can read the complete history and documentation here.
Now.. being a User Interface Designer, Interaction Designer (too many roles??) I have coded only the basic HTML and CSS stuffs.. and today I thought of trying to implement a scriptaculous code into my HTML proto design.
So I started digging the scriptaculous.. and learned how to integrate it.
Step 1:
Download the latest Scriptaculous library from http://script.aculo.us in .zip format. Unzip the contents into the folder where you store you HTML file or any folder of your choice.
Step 2:
Create a new HTML page, and link the "prototype.js" and "scriptaculous.js" files in the HEAD part. Remember that "prototype.js" should be linked first and then "scriptaculous.js" should be linked next.
Step 3:
Assign an ID to a HTML element inside the BODY tag. And write some onClick event code. For example.. onClick="new Effect.fade('abc')". This will invoke the fade out effect on the HTML element with ID=abc.
Step 4:
Open the page in a browser and just click the HTML element. You can see the element fading out. Thats it!
The documentation in Scriptaculous wiki is comprehensive, but not orgazined properly. But still it offers some good documentation for developers and designers.
My first attempt was to link the two js files and made a DIV layer fade out in an onClick event. It worked! :-)
- Rajesh Sundaram
Now.. being a User Interface Designer, Interaction Designer (too many roles??) I have coded only the basic HTML and CSS stuffs.. and today I thought of trying to implement a scriptaculous code into my HTML proto design.
So I started digging the scriptaculous.. and learned how to integrate it.
Step 1:
Download the latest Scriptaculous library from http://script.aculo.us in .zip format. Unzip the contents into the folder where you store you HTML file or any folder of your choice.
Step 2:
Create a new HTML page, and link the "prototype.js" and "scriptaculous.js" files in the HEAD part. Remember that "prototype.js" should be linked first and then "scriptaculous.js" should be linked next.
Step 3:
Assign an ID to a HTML element inside the BODY tag. And write some onClick event code. For example.. onClick="new Effect.fade('abc')". This will invoke the fade out effect on the HTML element with ID=abc.
Step 4:
Open the page in a browser and just click the HTML element. You can see the element fading out. Thats it!
The documentation in Scriptaculous wiki is comprehensive, but not orgazined properly. But still it offers some good documentation for developers and designers.
My first attempt was to link the two js files and made a DIV layer fade out in an onClick event. It worked! :-)
- Rajesh Sundaram
Comments