How to create your own Effects using Scriptaculous!!!!

The basic and prebuilt effects in script.aculo.us are nice, but if you really want to build something great why not investigate doing your own, homegrown, do-it-yourself effects. We’re going to show you how to take basic effects and build on them to create your own. So let’s get going.

First, download and include Prototype and script.aculo.us on your page as described in the installation instructions.

You’re ready to use the visual effects engine now! Give this short line a try:

<div onclick="Effect.Fade(this)">Fade me already!</div>To tweak the effect, try something like this:

<div onclick="Effect.Fade(this,{duration:3})">Fade me slower!</div>

Read the complete tutorial here on Think Vitamin

Scriptaculous Effects Tutorial for Begineers!!!!

Thanks once again for inspiration to Brian Eng of Softies on Rails, here's my latest tutorial. Brian mentioned how easy it would be to add script.aculo.us effects to my little delicious app. And he was totally correct. What are script.aculo.us effects, you ask? Go check out this page.

Click on each of the little demo boxes and watch the magic. Now say, "Holy crap! That's cool!" Then come back and I'll tell you how to add any of that to your Ruby on Rails app.Here we go. script.aculo.us depends on the prototype javascript library which comes with the latest version of Rails. So, we just need to get script.aculo.us into our app.

First download and unzip the latest script.aculo.us code. Open the src folder and grab the files which do not exist in your rails app's public/javascripts directory. Copy these files over to this directory. Add this line between the 'head' tags in your layout.rhtml file:

Now you have the power of script.aculo.us in your rails app! NOTE: I just saw on the script.aculo.us home page that it is supposed to be bundled with RoR. I didn't notice in my directory, but this step may not be necessary for you.

Remember in my last tutorial when I added in the spinner effect, I used the :loading and :completed callbacks? Like this:

Read the complete tutorial Here

New Version of Script.aculo.us is out there!!!!

Scriptaculous 1.8 , Prototype 1.6 & the Bungee Book are out now.

So whts special about these releases?

Loads of new features and ofcourse lot of bug fixes as well

• Prototype 1.6 final
• Complete rewrite of Ajax.InPlaceEditor and Ajax.InPlaceCollectionEditor
• Full CSS inheritance in Effect.Morph
• New core effect: Effect.Tween
• Sound: play mp3 files for sound effects; uses native playback on IE and available plugins
• whereever possible
• Duration and distance options for Effect.Shake
• Performance improvements
• Tons of bugfixes

I dont see any reason why you should not upgrade your libraries?

Go now and Grab them from these links

Scriptaculous 1.8: http://script.aculo.us/

Prototype 1.6 Library: http://prototypejs.org/2007/11/7/prototype-1-6-0-script-aculo-us-1-8-0-and-the-bungee-book-now-available

& Buy the Book: http://pragprog.com/titles/cppsu

Simple JavaScript Slide Show Using script.aculo.us

Simple JavaScript slide shows are a very useful way of slickly displaying images on any site. I recently found my way on to DZone Snippets which provided a nice little article on creating a slide show, so, I thought it would be nice to take that script and add to it slightly making it easier for anyone to add it to their site.

Andrew also goes on to make a simple yet powerful slideshow.

Its must to check out for all you developers and designers out there.

Demo
Please click to see the Simple JavaScript Slide Show example.

Code
Please feel free to download the Simple JavaScript Slide Show code.

Most Simple and Easy Scriptaculous Slideshow

Most Simple and Easy Scriptaculous Slideshow

This took a little while to get working properly earlier this week, so I figured I'd share the love...

This one is coming from Caboose.

I liked it so I am sharing with you guys too.

Just check it and drop in your comments...

Find the link HERE

How to use Scriptaculous Effects in a better way?

How to use Scriptaculous Effects in a better way?



Here is a simple snapshot from the demo page from 24ways.

Gather around kids, because this year, much like in that James Bond movie with Denise Richards, Christmas is coming early… in the shape of scrumptuous smooth javascript driven effects at your every whim.

Now what I’m going to do, is take things down a notch. Which is to say, you don’t need to know much beyond how to open a text file and edit it to follow this article. Personally, I for instance can’t code to save my life.

Well, strictly speaking, that’s not entirely true. If my life was on the line, and the code needed was really simple and I wasn’t under any time constraints, then yeah maybe I could hack my way out of it But my point is this: I’m not a programmer in the traditional sense of the word. In fact, what I do best, is scrounge code off of other people, take it apart and then put it back together with duct tape, chewing gum and dumb blind luck.

No, don’t run! That happens to be a good thing in this case. You see, we’re going to be implementing some really snazzy effects (which are considerably more relevant than most people are willing to admit) on your site, and we’re going to do it with the aid of Thomas Fuchs’ amazing Script.aculo.us library. And it will be like stealing candy from a child.

Check out the code and Demo on this page Here

If you like this tutorial, drop in comments.