script.aculo.us Quick Reference
Wednesday, December 27, 2006
This quick reference guide is a work in progress. I’ve been working with the script.aculo.us framework directly in a project that I’m working on, and this guide is the result. I’m trying to make it more user-friendly and interactive.
|
Installation
|
|
| Install | Copy all the script.aculo.us files into a
directory. I called mine “js” |
| Effects
|
|
| The script.aculo.us library provides a lot of great
dynamic effects. All of the effects can take a set of options such as
duration and fps. Detailed documentation for the effects can be found
on the official
documentation page. Syntax: new Effect.EffectName( element, required-params, [options] ); |
|
| Click for Effect | |
|
Appear |
|
|
BlindDown |
|
|
BlindUp |
|
|
DropOut |
|
|
Fade |
|
|
Fold |
|
|
Grow |
|
|
Highlight |
|
|
Puff |
|
|
Pulsate |
|
|
SwitchOff |
|
|
SlideDown |
|
|
SlideUp |
|
|
Shake |
|
|
Squish |
|
|
Shrink |
|
| In
Place Editor Control
|
|
|
The In-Place Editor control is found in a lot of Ruby on Rails applications. This control is a part of the scriptaculous library, and is very simple to use in any language. Syntax: new Ajax.InPlaceEditor( element, url, [options]); There are a variety of useful options to be passed to the server to customize virtually every feature of the control. You can find a current list at the offical documentation page.
|
|
| Example: | |
| Edit Me In-Place | |
|
Slider Control
|
|
| The Slider Controls let
you provide a more dynamic
method for selecting from within a range of values. When using this
control, make sure that the javascript is below the html elements that
you are using for the sliders. The slider controls take a number of options that specify callback functions. If your application requires a fully dynamic slider, you will override the onSlide() function with your functionality. If you only need the final selection value, override the onChange() function. |
|
|
Horizontal
Slider
|
|
|
Vertical
slider
|
|
Latest Posts
January 15th, 2007 at 2:23 am
How to save record using ‘In Place Editor’?
January 22nd, 2007 at 6:28 pm
To suhas, I’ve ever written such a post . You can visit it at http://www.jroller.com/page/coreteam?entry=in_place_editing_with_script
or
http://www.memezilla.com/2006/09/18/in-place-editing-with-scriptaculous-in-jsp
February 25th, 2007 at 11:08 pm
hi johnny,
i’m looking for an answer but i could not find it. i’m using 2 effects of scriptaculous:
i have a list of items (div not td). if i click on item A a submenu will slides down form it. than if i click item B another submenu slides from it. i would like that the submenu of item A slide up.
the second is the effect appear. if i click on a item of the submenu an image appear. than i click on the item B of the submenu, and another image appear. than, if i click back on the item A nothing appear, the image A is “under” image B. how can i change that?
many thanks
mauro
March 14th, 2007 at 6:31 am
Thank you so much for this. Their site is really confuse…
April 21st, 2007 at 6:23 am
yepp i agree with the others very helpful and easy to rebuild. love it!!
greetings!
April 29th, 2007 at 11:15 pm
Where do i get the javascript files like prototype.js and scriptaculous.js and include in my files
July 3rd, 2007 at 12:42 pm
Really useful reference! Thanks
July 6th, 2007 at 9:50 am
Very very nice. One thing I noticed with the explosion of web 2.0, there are so many javascript/ajax libraries. It is always good to have choices but gets little confusing. Do you use anything other than mentioned above? I would love to see a guide that explains what libraries do you use and when.
Thanks again for all the guides.
-Raghu
August 7th, 2007 at 3:57 am
Johnny, thanks for putting up a great reference! I appreciate you taking the time to help others out! — jp
October 21st, 2007 at 8:30 pm
http://blogs.tech-recipes.com/johnny/wp-content/themes/johnny/scriptaculous.js
http://blogs.tech-recipes.com/johnny/wp-content/themes/johnny/prototype.js
October 21st, 2007 at 9:12 pm
how do you set the fold effect to work with a certain ‘div’, using an image button… someone please help me
May 31st, 2008 at 11:58 am
just wondring how you get a dic using the toggle slide effect to by default to closed and not opened.
TOGGLE FOOTER
May 31st, 2008 at 12:01 pm
How do you get a div that is using the Effect.toggle(’toggle_appear’, ’slide’) effect to by default be closed - normally the divs are open and viewable until u press the hyperlink. Closed would be sweet
June 16th, 2008 at 8:06 am
Hey Johnny, excellent tutorial, thanks for the effort!
question for you:
The effects that make an object appear, is there a simple way to make them set [display: block;} instead of {display:;}?
Cheers!
July 30th, 2008 at 12:19 pm
I have 3 links one after the other.When clicked from top down it is working fine but when clicked fron down to up it is overlapping.I am using blindup and slidedown functions.IT works fine in Firefox but in IE it just overlaps.How to fix it.
November 21st, 2008 at 2:31 am
hey, i need to implement a drag-n-drop control like shoping cart.can you please tell, how to do that using this framework
December 4th, 2008 at 10:36 pm
Well, thank you very much! You really did a good job! Thank you!
December 4th, 2008 at 10:40 pm
I think it is great! Thanks for your information.
December 18th, 2008 at 1:26 am
Thanks for sharing!
December 29th, 2008 at 10:43 pm
This was much simpler than I thought it would be, with a short recursive function that first loops through the directories, and then through the files in each folder.
December 29th, 2008 at 10:55 pm
- At the command prompt (the ‘:’ thingy), type ‘!’ and then a bash command to see the output in a shell window (there’s a command to insert the output of that shell command, but I can’t remember it right now).
- ‘J’ joins the current line with the next one (comes in more handy than you’d think).
chanel handbag wholesale http://my-pursemall.com/wholesale.html
lv handbag supplier http://www.my-pursemall.com/Productlist.html?CatID=200208121
December 30th, 2008 at 6:32 pm
If you’ve previously gone to Johnny’s Thoughts (johnnysthoughts.com) and are wondering what on earth has happened, I’ve moved over to Tech-Recipes… a few months ago… but haven’t been able to migrate the old content because of theme issues. We’ve finally resolved the issues, so I have redirected the domain name over.wholesale jewelry http://www.fabeibei.com/wholesalejewelry.htm
tungsten jewelry http://www.fabeibei.com/tungstenjewelry.htm
January 9th, 2009 at 7:51 am
not usefull at all….
check this out:
http://www.tutorialspoint.com/script.aculo.us/scriptaculous_morph_effect.htm
June 24th, 2009 at 1:54 am
how to set inplace editor’s height and width dynamically.