Introduction to Scriptaculous Effects

27 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.

  1. rakesh

    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.

  2. Justin Perkins

    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).

  3. Dustin Diaz

    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.

  4. rakesh

    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?

  5. Richard@Home

    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”;

  6. Drew McLellan

    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.

  7. David

    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

  8. James AkaXakA

    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!

  9. Justin Perkins

    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.

  10. trovster

    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…

  11. Alex

    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?

  12. trovster

    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

  13. Tony Summerville

    @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

  14. Andy Hume

    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.

  15. spaz

    ?? 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.

  16. bongwater

    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…

  17. Drew McLellan

    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.

  18. xian

    “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.

  19. bongwater

    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.

  20. Mats Lindblad

    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 the Effect if you want it to be hidden from the start.

  21. Justin Perkins

    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.

Impress us

Be friendly / use Textile