Have a script.aculo.us effect triggered on page load : how ??

7,075 Posts

davidm Reply #1, 20 years, 2 months ago

I have already used script.aculo.us effects in my websites’ templates, all of them triggered via onClick... now I need to have an image fade in upon page load, using effect.Opacity.

I browsed the script.aculo.us wiki and several resources to check how I could do this but no luck so far sad

I couldn’t find how to use effects with onLoad rather than onClick...
It seems like a simple thing to expect, what did I miss ?

My question is especially for Banzai, our ajax master here @MODx... suggestions, pointers, anything would be appreciated !
Thanks

.: COO - Commerce Guys - Community Driven Innovation :.

MODx est l'outil id

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 20 years, 2 months ago

Here’s one way; there are more elegant ways though.
http://javascript.about.com/library/blonload.htm

This is much more elegant:
http://simon.incutio.com/archive/2004/05/26/addLoadEvent

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

7,075 Posts

davidm Reply #3, 20 years, 2 months ago

Thanks a lot Susan

I fact I had found the solution in the meantime... seems quite simpler, but I don’t know how clean it is, I found out experimenting different combination that this works (at least in FF) :

<body onLoad="new Effect.Opacity('image2', {duration:3.0, from:0.0, to:1.0});">

I’ll do more digging to check if there are other (cleaner) method...
Anyway, it’s fun to experiment with script.aculo.us... the funny part is, I don’t know much javascript (though I have to learn things bit by bit there...)

.: COO - Commerce Guys - Community Driven Innovation :.

MODx est l'outil id

155 Posts

Boby Reply #4, 20 years, 2 months ago

I am always using something like this in a separate JS file:

/* Observe when page loads and run the "init" function */
Event.observe(window, 'load', init, false);

/* When page is loaded, this function is called */
function init()
{
   //ADD YOUR EFFECTS OR OTHER CODE HERE...
}

You can also add it between the <head> ... </head> tags (after loading scriptaculous and prototype):

<script type="text/javascript"><!-- // --><![CDATA[

/* Observe when page loads and run the "init" function */
Event.observe(window, 'load', init, false);

/* When page is loaded, this function is called */
function init()
{
   //ADD YOUR EFFECTS OR OTHER CODE HERE...
}

// ]]></script>

It’s much cleaner than:

<body onload="blah blah">

Hope it helps, Boby.

...my Photo Gallery on Flickr...

7,075 Posts

davidm Reply #5, 20 years, 2 months ago

Thanks a lot Boby, indeed I had come accross this kind of code (I think it was Dean Edwards’ ?), I just didn’t know how to use it exactly...

This helps a lot grin

!
I hope others benefit from it...

Once I am past the learning stage, I’d like to gather some ajax template tuto of some kind...

.: COO - Commerce Guys - Community Driven Innovation :.

MODx est l'outil id

155 Posts

Boby Reply #6, 20 years, 2 months ago

I have it from a Prototype documenation:
http://www.sergiopereira.com/articles/prototype.js.html#Reference.Extensions.Event

You’ll find some other useful things about AJAX & Co. with Prototype wink

I’m also a newbie, but all I’ve learned was almost from that doc.

...my Photo Gallery on Flickr...

28 Posts

eagleshout Reply #7, 20 years, 2 months ago

Quote from: Boby at Aug 20, 2006, 06:40 PM

I have it from a Prototype documenation:
http://www.sergiopereira.com/articles/prototype.js.html#Reference.Extensions.Event

I’m also a newbie, but all I’ve learned was almost from that doc.

Can I be your friend, I’m learning this also. Thanks for your post, very helpful indeed!

7,075 Posts

davidm Reply #8, 20 years, 2 months ago

This is a great reference Boby, which I had come accross in the past, but I didn’t dig into it, now it’s my best friend indeed

Thanks for the pointer !

.: COO - Commerce Guys - Community Driven Innovation :.

MODx est l'outil id

155 Posts

Boby Reply #9, 20 years, 2 months ago

You are welcome guys

Prototype was known to have (almost) no documentation, but things changed now a bit and you can find some great resources like this one I accidentaly found today: http://prototypedoc.com/

More ... http://wiki.script.aculo.us/scriptaculous/show/Prototype

Boby

...my Photo Gallery on Flickr...

☆ A M B ☆
24,524 Posts

sottwell Reply #10, 20 years, 1 month ago

Thank you! Linked page bookmarked!

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org