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.
What Are We Doing?
I’m going to show you the very basics of implementing the Script.aculo.us javascript library’s Combination Effects. These allow you to fade elements on your site in or out, slide them up and down and so on.
Why Use Effects at All?
Before get started though, let me just take a moment to explain how I came to see smooth transitions as something more than smoke and mirror-like effects included for with little more motive than to dazzle and make parents go ‘uuh, snazzy’.
Earlier this year, I had the good fortune of meeting the kind, gentle and quite knowledgable Matt Webb at a conference here in Copenhagen where we were both speaking (though I will be the first to admit my little talk on Open Source Design was vastly inferior to Matt’s talk). Matt held a talk called Fixing Broken Windows (based on the Broken Windows theory), which really made an impression on me, and which I have since then referred back to several times.
You can listen to it yourself, as it’s available from Archive.org. Though since Matt’s session uses many visual examples, you’ll have to rely on your imagination for some of the examples he runs through during it. Also, I think it looses audio for a few seconds every once in a while.
Anyway, one of the things Matt talked a lot about, was how our eyes are wired to react to movement. The world doesn’t flickr. It doesn’t disappear or suddenly change and force us to look for the change. Things move smoothly in the real world. They do not pop up.
How it Works
Once the necessary files have been included, you trigger an effect by pointing it at the ID of an element. Simple as that.
Implementing the Effects
So now you know why I believe these effects have a place in your site, and that’s half the battle. Because you see, actually getting these effects up and running, is deceptively simple.
First, go and download the latest version of the library (as of this writing, it’s version 1.5 rc5). Unzip itand open it up.
Now we’re going to bypass the instructions in the readme file. Script.aculo.us can do a bunch of quite advanced things, but all we really want from it is its effects. And by sidestepping the rest of the features, we can shave off roughly 80KB of unnecessary javascript, which is well worth it if you ask me.
As with Drew’s article on Easy Ajax with Prototype, script.aculo.us also uses the Prototype framework by Sam Stephenson. But contrary to Drew’s article, you don’t have to download Prototype, as a version comes bundled with script.aculo.us (though feel free to upgrade to the latest version if you so please).
So in the unzipped folder, containing the script.aculo.us files and folder, go into ‘lib’ and grab the ‘prototype.js’ file. Move it to whereever you want to store the javascript files. Then fetch the ‘effects.js’ file from the ‘src’ folder and put it in the same place.
To make things even easier for you to get this up and running, I have prepared a small javascript snippet which does some checking to see what you’re trying to do. The script.aculo.us effects are all either ‘turn this off’ or ‘turn this on’. What this snippet does, is check to see what state the target currently has (is it on or off?) and then use the necessary effect.
You can either skip to the end and download the example code, or copy and paste this code into a file manually (I’ll refer to that file as combo.js):
Effect.OpenUp = function(element) { element = $(element); new Effect.BlindDown(element, arguments[1] || {}); }Effect.CloseDown = function(element) { element = $(element); new Effect.BlindUp(element, arguments[1] || {}); }Effect.Combo = function(element) { element = $(element); if(element.style.display == 'none') { new Effect.OpenUp(element, arguments[1] || {}); }else { new Effect.CloseDown(element, arguments[1] || {}); } }
Currently, this code uses the BlindUp and BlindDown code, which I personally like, but there’s nothing wrong with you changing the effect-type into one of the other effects available.
Now, include the three files in the header of your code, like so:
<script src="prototype.js" type="text/javascript"></script>
<script src="effects.js" type="text/javascript"></script>
<script src="combo.js" type="text/javascript"></script>
Now insert the element you want to use the effect on, like so:
<div id="content" style="display: none;">Lorem ipsum dolor sit amet.</div>
The above element will start out invisible, and when triggered will be revealed. If you want it to start visible, simply remove the style parameter.
And now for the trigger
<a href="javascript:Effect.Combo('content');">Click Here</a>
And that, is pretty much it. Clicking the link should unfold the DIV targeted by the effect, in this case ‘content’.
Effect Options
Now, it gets a bit long-haired though. The documentation for script.aculo.us is next to non-existing, and because of that you’ll have to do some digging yourself to appreciate the full potentialof these effects.
First of all, what kind of effects are available? Well you can go to the demo page and check them out, or you can open the ‘effects.js’ file and have a look around, something I recommend doing regardlessly, to gain an overview of what exactly you’re dealing with.
If you dissect it for long enough, you can even distill some of the options available for the various effects. In the case of the BlindUp and BlindDown effect, which we’re using in our example (as triggered from combo.js), one of the things that would be interesting to play with would be the duration of the effect. If it’s too long, it will feel slow and unresponsive. Too fast and it will be imperceptible.
You set the options like so:
<a href="javascript:Effect.Combo('content', {duration: .2});">Click Here</a>
The change from the previous link being the inclusion of , {duration: .2}. In this case, I have lowered the duration to 0.2 second, to really make it feel snappy.
You can also go all-out and turn on all the bells and whistles of the Blind effect like so (slowed down to a duration of three seconds so you can see what’s going on):
<a href="javascript:Effect.Combo('content', {duration: 3, scaleX: true, scaleContent: true});">Click Here</a>
Conclusion
And that’s pretty much it. The rest is a matter of getting to know the rest of the effects and their options as well as finding out just when and where to use them. Remember the ancient Chinese saying: Less is more.
Download Example
I have prepared a very basic example, which you can download and use as a reference point.
Comments
Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.
Got something to add? You can leave a comment below.
12/12/2005
awesome effect i was looking just something similar. I have been visiting this site from day one and its really interesting and really helpful. Thanks for your efforts.
Vote Helpful or Unhelpful
12/12/2005
I’ve found it’s very easy to extend the effects object to create your own custom effects that do not already exist in the library, now that’s xmas excitement (with eggnog).
Vote Helpful or Unhelpful
12/12/2005
I’ve just added the blinds effect to my blog http://www.godproposes.blogspot.com for my blog links
Vote Helpful or Unhelpful
12/12/2005
I still think we should we should be cautious of libraries for the simple fact that it can really begin to weigh down your site by the sheer size of the file you’re slapping onto your site. Some of these very basic effects often don’t require the extra 50k.
Nonetheless, it’s always good to have some more script.aculo.us documentation. I really wish there was more than just the wiki. Slowly but surely, more resources are popping up.
Vote Helpful or Unhelpful
12/12/2005
there is one small problem though, If I double click the link and suppose I have long list of things within the div content then the only a part of the list is displayed and if I again try opening or closing the list then it stops till the place where I stopped it the previous time. Can you tell me how to correct this?
Vote Helpful or Unhelpful
12/12/2005
A cautionary note:
[div id=”content” style=”display: none;”]Lorem ipsum dolor sit amet.[/div]
Users with scripts switched off and stylesheets enabled will never see this content.
In this case, it would be better to set the default display style to visible with CSS and then use JS to hide it during the page load.
HTML:
[div id=”content”]Lorem ipsum dolor sit amet.[/div]
JS:
documentGetElementById(“content”).style=”display: none”;
Vote Helpful or Unhelpful
12/12/2005
Richard – I think we can take that for granted. The inline style is just a convenient shorthand for the purposes of the example.
Even better than setting it with JavaScript – just include it in your CSS.
Vote Helpful or Unhelpful
12/12/2005
Drew: Including it in the CSS has exactly the same problem as putting it in the style attribute: users with CSS enabled but not Javascript will never see the content.
OT: The line was more like “I thought Christmas only comes once a year”, not “early”. :-p
Vote Helpful or Unhelpful
12/12/2005
David: you’re right, of course. Sorry – low on caffeine :)
Vote Helpful or Unhelpful
12/12/2005
Drew McLellan: I think we can take it for granted that quite a lot of people don’t take that for granted – they’ll just copy & paste the code as it is.
And as David said: The trick is to have it hidden for people with script ON, which is exactly why you should put the display:none in your JavaScript.
Other than that, good article!
Vote Helpful or Unhelpful
12/12/2005
James – YES – as I have already acknowledged.
Vote Helpful or Unhelpful
12/12/2005
David & Drew,
You could take the approach of IOTBS and add a class to the body tag (or wherever your heart desires) via Javascript, then you could use rules in your CSS to hide the element that way. Best of both worlds and that’s what I thought you were eluding to anyway Drew.
Vote Helpful or Unhelpful
12/12/2005
The best approach, IMO, with respect to styling the box to hidden, is set the class in JavaScript and display: none; in the CSS file.
That means you keep the behaviour in the JavaScript and styling in the CSS. How it’s supposed to be!
That means, when the user turns off stylesheets, it’s not affected by the JavaScript…
Vote Helpful or Unhelpful
12/12/2005
Is there a way to attach the javascript to a link without actually inserting in the HTML through href or onclick? I thought unobtrusive javascript was the big thing, separating content from behavior and all with the DOM…
Also, how would you set the class in javascript?
Vote Helpful or Unhelpful
12/12/2005
Drew McLellan: I had the page open, and posted later without reloading. My apologies.
Vote Helpful or Unhelpful
12/12/2005
Alex: document.getElementById(‘clickme’).onclick = function();
Is the way to add events for clicking. You could also loop through all the anchors on the page, or within a section and hi-jack the link, and use the onclick event.
element.style.className = ‘className’; is the simplist way of adding a class name. However, because there are multiple classes this may not be the most ideal solution. I recommend using the ‘addClass’ function
Vote Helpful or Unhelpful
12/12/2005
@Alex: Behaviour allows you to add JavaScript functions to HTML objects unobtrusively.
One of the things I came across was how to keep the effects persistent from page to page. For example, if the user “closes” a box on one page, it should remain “closed” on all pages until the user reopens or expands it.
I wrote a tutorial on my site on how to use Sciptaculous in conjunction with Behaviour and cookies to create Unobtrusive & Persistent Sciptaculous Effects
Vote Helpful or Unhelpful
12/12/2005
Agh… Javascript libraries. Dangerous ground if you ask me. How long before we have a new breed of developers pumping code into their sites that they don’t understand, and most of the time don’t even need.
I have nothing against cool effects, but I wouldn’t even consider hooking in 80K of Javascript that I didn’t know backwards just to create some fade effects or Ajax calls.
Vote Helpful or Unhelpful
13/12/2005
?? I think it looses audio for a few seconds very once in a while.??
This should read “loses” not “looses”. Loose is an antonym of tight, and makes no sense in this context.
Thanks for the article.
peace.
Vote Helpful or Unhelpful
13/12/2005
Thank your for the Great tutorial, finally I learned how to implement cool Ajax stuff, Thanks a lot :)
Vote Helpful or Unhelpful
13/12/2005
Am I the only one who thinks it’s totally useless and totally backwards like animated gifs and such? :)
“Cool ajax stuff” begins for me with useful things like on the fly db lookups without all this kinda useless bling.
And correct me if i’m wrong, but I think we all had these “effects” when dynamic html had hit us way back around the beginning of this decade…
Vote Helpful or Unhelpful
13/12/2005
bongwater – of course, it’s how you use it that counts.
I don’t think anyone is advocating effects for the sake of effects. However, there are times when a carefully chosen effect can greatly enhance the user experience. The classic example is the Yellow Fade Technique.
Vote Helpful or Unhelpful
14/12/2005
bongwater (...), you didn’t read the article, did you? :)
Vote Helpful or Unhelpful
14/12/2005
“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.”
... we are a lot alike ;-) I can CSS anything, but I can barely program a microwave to heat on high for 1 minute.
Vote Helpful or Unhelpful
15/12/2005
Michael – I most certainly did :)
My point being is that as soon as you add effects you kind of kill a piece of the user experience. As for me I seek for a flow-like experience when it comes to user interaction. Anything that keeps the user waiting despite being decorative disrupts the flow and makes the user frustrated on the long run.
The YFT Drew mentioned is the fortunate exception as there is always one or two.
Sorry if I sounded a little arrogant, but I can imagine that in a not so distant future web sites will simply overflow with these effects potentially doing more damage than good.
Vote Helpful or Unhelpful
15/12/2005
On the subject of how to hide the element you want to show.
I belive I read that you should use the
Effect.hide()function on initialization of theEffectif you want it to be hidden from the start.Vote Helpful or Unhelpful
16/12/2005
re bongwater’s comments:
The point of these effects is to smooth the jarring-ness of dynamically adding/removing elements from the page, not to slow anything down.
I’d rather get a smooth transition of a div being added to the page when compared to the click of a button and BAM! there’s a bunch of new content. Where did it come from? Where did the content that was there before go?
With transitioning effects, it’s obvious what’s going on.
Vote Helpful or Unhelpful
Impress us