Dec 04, 2008, 12:47 AM *
Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length
Search via SMF or Google: modx forums all of modxcms.com web
  MODxCMS.com   Forums   Help Login Register  
MODx Community Forums » Development & Coding » Templates (Moderators: zi, PaulGregory) » Have a script.aculo.us effect triggered on page load : how ??
Pages: [1]   Go Down
« Previous topic Next topic »
  Print  
Author Topic: Have a script.aculo.us effect triggered on page load : how ??  (Read 4022 times)
0 Members and 1 Guest are viewing this topic.
davidm
Marketing & Design Team
*
Posts: 6,777


The best way to predict the future is to invent it


WWW
« on: Aug 20, 2006, 09:12 AM »
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 Smiley
Logged
.: nodeo.net : Pour un web libre, moderne et ouvert ! :: david-molliere.net : Suivez en "live" mes expérimentations et billets sur les CMS et autres applications web :.

*** Forums modxcms.fr Participez à l'élaboration du site MODx francophone ! ***

! Nouveau !  En live, ne manquez pas les news de modxcms.fr sur Twitter   ! Nouveau !
MODx est l'outil idéal pour les developpeurs et webdesigners qui cherchent un framework de gestion de contenu hautement flexible et performant, tout en étant simple d'accès pour les utilisateurs finaux.
Config : Apache 2.2.8 - MySQL 5.0.45 - PHP 5.2.6 | Debian 4.0 (Etch)
Réalisations sous MODx : | pargade-notaires.fr | soleil.info | gican.asso.fr | michelez-notaires.com | amadom.gerondicap.com | jocelyne-violet.net
sottwell
Documentation Team
*
Posts: 8,170



WWW
« Reply #1 on: Aug 20, 2006, 09:19 AM »
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
« Last Edit: Aug 20, 2006, 09:26 AM by sottwell » Logged
sottwell.com has moved to a lovely Solaris 10 server!
Log in username guest, password guestuser.
Templates are now becoming available at http://sottwell.com/templates.html
davidm
Marketing & Design Team
*
Posts: 6,777


The best way to predict the future is to invent it


WWW
« Reply #2 on: Aug 20, 2006, 09:29 AM »
Thanks a lot Susan Smiley

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

Code:
<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...)
Logged
.: nodeo.net : Pour un web libre, moderne et ouvert ! :: david-molliere.net : Suivez en "live" mes expérimentations et billets sur les CMS et autres applications web :.

*** Forums modxcms.fr Participez à l'élaboration du site MODx francophone ! ***

! Nouveau !  En live, ne manquez pas les news de modxcms.fr sur Twitter   ! Nouveau !
MODx est l'outil idéal pour les developpeurs et webdesigners qui cherchent un framework de gestion de contenu hautement flexible et performant, tout en étant simple d'accès pour les utilisateurs finaux.
Config : Apache 2.2.8 - MySQL 5.0.45 - PHP 5.2.6 | Debian 4.0 (Etch)
Réalisations sous MODx : | pargade-notaires.fr | soleil.info | gican.asso.fr | michelez-notaires.com | amadom.gerondicap.com | jocelyne-violet.net
Boby
Full Member
***
Posts: 155



WWW
« Reply #3 on: Aug 20, 2006, 09:42 AM »
I am always using something like this in a separate JS file:

Code:
/* 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):
Code:
<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:
Code:
<body onload="blah blah">

Hope it helps, Boby.
Logged
...my Photo Gallery on Flickr...
davidm
Marketing & Design Team
*
Posts: 6,777


The best way to predict the future is to invent it


WWW
« Reply #4 on: Aug 20, 2006, 04:34 PM »
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...
Logged
.: nodeo.net : Pour un web libre, moderne et ouvert ! :: david-molliere.net : Suivez en "live" mes expérimentations et billets sur les CMS et autres applications web :.

*** Forums modxcms.fr Participez à l'élaboration du site MODx francophone ! ***

! Nouveau !  En live, ne manquez pas les news de modxcms.fr sur Twitter   ! Nouveau !
MODx est l'outil idéal pour les developpeurs et webdesigners qui cherchent un framework de gestion de contenu hautement flexible et performant, tout en étant simple d'accès pour les utilisateurs finaux.
Config : Apache 2.2.8 - MySQL 5.0.45 - PHP 5.2.6 | Debian 4.0 (Etch)
Réalisations sous MODx : | pargade-notaires.fr | soleil.info | gican.asso.fr | michelez-notaires.com | amadom.gerondicap.com | jocelyne-violet.net
Boby
Full Member
***
Posts: 155



WWW
« Reply #5 on: Aug 20, 2006, 06:40 PM »
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.
Logged
...my Photo Gallery on Flickr...
eagleshout
Jr. Member
*
Posts: 28



WWW
« Reply #6 on: Aug 20, 2006, 11:03 PM »
Quote from: Boby on 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!
Logged
“To burn with desire and keep quiet about it is the greatest punishment we can bring on ourselves.”?Blood Wedding, Federico Garcia Lorca.
davidm
Marketing & Design Team
*
Posts: 6,777


The best way to predict the future is to invent it


WWW
« Reply #7 on: Aug 21, 2006, 05:03 AM »
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 Smiley
Thanks for the pointer !
Logged
.: nodeo.net : Pour un web libre, moderne et ouvert ! :: david-molliere.net : Suivez en "live" mes expérimentations et billets sur les CMS et autres applications web :.

*** Forums modxcms.fr Participez à l'élaboration du site MODx francophone ! ***

! Nouveau !  En live, ne manquez pas les news de modxcms.fr sur Twitter   ! Nouveau !
MODx est l'outil idéal pour les developpeurs et webdesigners qui cherchent un framework de gestion de contenu hautement flexible et performant, tout en étant simple d'accès pour les utilisateurs finaux.
Config : Apache 2.2.8 - MySQL 5.0.45 - PHP 5.2.6 | Debian 4.0 (Etch)
Réalisations sous MODx : | pargade-notaires.fr | soleil.info | gican.asso.fr | michelez-notaires.com | amadom.gerondicap.com | jocelyne-violet.net
Boby
Full Member
***
Posts: 155



WWW
« Reply #8 on: Aug 21, 2006, 04:00 PM »
You are welcome guys Smiley

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
Logged
...my Photo Gallery on Flickr...
sottwell
Documentation Team
*
Posts: 8,170



WWW
« Reply #9 on: Aug 22, 2006, 12:42 AM »
Thank you! Linked page bookmarked!
Logged
sottwell.com has moved to a lovely Solaris 10 server!
Log in username guest, password guestuser.
Templates are now becoming available at http://sottwell.com/templates.html
davidm
Marketing & Design Team
*
Posts: 6,777


The best way to predict the future is to invent it


WWW
« Reply #10 on: Aug 22, 2006, 03:16 AM »
Ditto ! Thanks again Boby another good find Smiley
Now back to playing with the new toy !

(While I am here, any pointer regarding moo.fx ? )
Logged
.: nodeo.net : Pour un web libre, moderne et ouvert ! :: david-molliere.net : Suivez en "live" mes expérimentations et billets sur les CMS et autres applications web :.

*** Forums modxcms.fr Participez à l'élaboration du site MODx francophone ! ***

! Nouveau !  En live, ne manquez pas les news de modxcms.fr sur Twitter   ! Nouveau !
MODx est l'outil idéal pour les developpeurs et webdesigners qui cherchent un framework de gestion de contenu hautement flexible et performant, tout en étant simple d'accès pour les utilisateurs finaux.
Config : Apache 2.2.8 - MySQL 5.0.45 - PHP 5.2.6 | Debian 4.0 (Etch)
Réalisations sous MODx : | pargade-notaires.fr | soleil.info | gican.asso.fr | michelez-notaires.com | amadom.gerondicap.com | jocelyne-violet.net
Pages: [1]   Go Up
  Print  
« Previous topic Next topic »
 
Jump to:  

Powered by MySQL Powered by PHP

Copyright © 2005-2008 MODxCMS, All rights reserved. Contact Us
Styles by ziworks.com

Powered by SMF 1.1.4 | SMF © 2005, Simple Machines LLC

Valid XHTML 1.0! Valid CSS!