Manage Subscriptions · Subscribe Now · F.A.Q.'s
HOME · Tuesday, May 13, 2008
Development & Programming
Video Tutorial: Script.aculo.us Effects
Create engaging user interfaces quickly and easily
Script.aculo.us is a JavaScript framework that is built upon the wildly successful Prototype JavaScript libraries. Script.aculo.us allows web designers to create engaging user interfaces quickly and easily, due in part to the animation effects it is famous for.
In this tutorial, we will look at a few of the more useful Script.aculo.us animation effects and how website designers can easily use them in their websites. We'll take a look at the ubiquitous "highlight" effect, various methods of making content appear and disappear and finally create a simple JavaScript that will combine effects to create advanced user interface possibilities.
Software Used: TextMate
Additional Files: tabs_tutorial_2.zip
Click the image below to launch the tutorial.
This video tutorial requires Flash Player version 8 or above. Please forward us your ideas for additional video tutorials, via our Contact Us form.
Blinklist | Del.icio.us | Furl | Ma.gnolia | Newsvine | Spurl | Reddit | Technorati
Published on Thursday, October 18, 2007
Comments:
You can set the initial state of the element that you want to move around or fade by either setting a "style" attribute in the HTML document of "display:none;". Or, you can also go through and set the initial state via JavaScript using some sort of "onload" initialization function.
Posted by: Brian Getting
Friday, October 19, 2007
Found scriptaculous stuff a while ago... but became overwhelmed a little early on myself. Bound and determined (I love the way the scriptaculous elements move and slide in when you go to their site) I jumped back in today.
I've seen PLENTY of click and mouseover examples... what's the best way (much like scriptaculous did) of approaching sliding/fading/moving elements in when the page FIRST LOADS. Onload? This is great... NO FLASH.
Great video tutorial... I didn't finish it yet so my apologies if the ONLOAD deal was covered in there.
thanks
Posted by: MBHayes
Thursday, November 01, 2007
Rather than using setTimeout() it's easier to use the built in afterFinish (if you are using blind, appear, or slide):
Effect.toggle(el, 'appear', {
afterFinish: function(effect){
Effect.toggle(effect.element, 'appear');
}
});
Posted by: whoover
Sunday, December 23, 2007
Wonderful tutorial! I'm a university student that freelances for food money - so this just added a night out to the keg!
Thanks so much, I'll be using it it all my projects to come!!!
Posted by: Jenn
Thursday, January 31, 2008
Woa...thank you Brian. that was the missing link for me.
I have to admit that the scritaculous site is not really well explained for the newbies.
i know i like to see the entire construction to understand how it works and your tutorial shows exactly that.
Thank you ...thank you.
more...more...you don't have more about scriptaculous stuff.
cheers
Posted by: julien
Wednesday, March 05, 2008
Well, i am still bugging to use a series of effect like the application.js of the tutorial when the page load rather than when clicking a button.
i got the display:none set in the html. i can make it work for one effect on one element but i can't figure out how to timed it and have multiple effect on multiple elements.
firebug shows me an error saying missing ) after argument list but i tried placing one but it's not working.
Event.observe(window,'load',function(){
Effect.Appear('logo', { duration: 1.0 });
window.setTimeout('Effect.BlindDown('box_who_are_we_content', {duration: 1});', 2000);
window.setTimeout('Effect.BlindDown('box_who_are_we_shadow', {duration: 1});', 4000);
});
any idea how to do it or where to find the answer.
thanks
Posted by: julien
Thursday, March 06, 2008
hi, julien,
i think this manual may help you:
http://wiki.script.aculo.us/scriptaculous/show/EffectQueues
Posted by: dzutaro
Sunday, March 23, 2008
Ecommerce Articles
- Browse All Articles
- Browse our complete archive of ecommerce articles.
- Accounting, Management & Legal
- Ecommerce articles related to managing a small business including ecommerce accounting, business strategy and legal considerations.
- Conversion & Usability
- Online business articles about converting web site visitors into customers and how to gauge and improve your business website's usability.
- Development & Programming
- Articles to help designers, developers and programmers create successful, search engine friendly ecommerce websites and improve existing ones.
- Hosting, Infrastructure & Software
- Articles for ecommerce businesses about ecommerce web hosting, business infrastructure, business strategy and helpful ecommerce & small business software.
- Interviews & Profiles
- Interviews with prominent ecommerce business personalities and profiles of successful online businesses.
- Inventory & Shipping
- Ecommerce articles about inventory management, ecommerce order fulfillment and product shipping considerations.
- Marketing & Revenue Growth
- Articles relating to online marketing, email marketing and using the Internet to growing your business.
- Search Engine Optimization
- Search engine optimization articles for ecommerce business owners, strategists, marketers and developers.
- Shopping Carts & Online Payments
- Articles covering ecommerce shopping cart platforms and options for choosing an online payment gateway.
- Training & Education
- Tutorials and articles providing training and education for ecommerce business owners and developers of ecommerce websites.
Search Articles
Ecommerce Community
- Ecommerce Blogs
- Read our blogs about ecommerce topics written by industry professionals.
- Community Forum
- Connect with other ecommerce professionals to trade advice and answers in our community forum.
- Podcasts
- Check out our ecommerce podcasts covering topics ranging from interviews to tutorials.
- RSS Content Feeds
- Subscribe to our RSS feeds and have fresh ecommerce content delivered to you.
Ecommerce Resources
- Free Email Newsletter
- Sign up for Ecommerce Notes, our free email newsletter for ecommerce business owners and developers.
- Ecommerce Directory
- Browse our directory of ecommerce products and services, or submit your own listing in our directory.
- Ecommerce Glossary
- Familiarize yourself with terminology or submit terms to help others with our Ecommerce Glossary.
- Events Calendar
- Find out about upcoming ecommerce events or invite other ecommerce professionals by posting your own event.
- Press Releases
- Browse ecommerce related press releases and post your own press release for distribution.
- Ecommerce Store & Back Issues
- Pick up back issues of Practical eCommerce magazine along with other merchandise from Practical Ecommerce
About Practical eCommerce
- Frequently Asked Questions
- Look at frequently asked questions regarded using our website, subscribing to our magazine and more.
- Advertising Information
- Information about advertising in Practical eCommerce magazine, on our website, or in our email newsletters.
- Editorial Sharing
- Learn about options for sharing our content with your visitors, customers or employees.
- About Us
- Learn more about Practical Ecommerce magazine and meet our staff.
- Contact Us
- Contact Practical Ecommerce at any time for more information. We'd love to hear from you.
Copyright 2007 Confluence Distribution, Inc. and Practical eCommerce.
All Rights Reserved.
Thanks Brian. This was a nice overview. I just started using script.aculo.us and it's simple, but at the same time a bit overwhelming. What's the best way to set the initial state of a div? I have a div that i want to slide in when a button is pushed using the Effect.toggle ('slide') but i haven't figured out how to make it initially in the hidden state, so that the button slides it into view. Any ideas?
Posted by: Jeff Foxx
Friday, October 19, 2007