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

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

I’ve just added the blinds effect to my blog http://www.godproposes.blogspot.com for my blog links

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

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

David: you’re right, of course. Sorry – low on caffeine :)

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!

James – YES – as I have already acknowledged.

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.

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…

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?

Drew McLellan: I had the page open, and posted later without reloading. My apologies.

@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

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

Thank your for the Great tutorial, finally I learned how to implement cool Ajax stuff, Thanks a lot :)

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…

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.

bongwater (...), you didn’t read the article, did you? :)

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

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.

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.