# Scriptaculous effects new help

**URL:** <https://www.ruby-forum.com/t/scriptaculous-effects-new-help/133468>\
**Category:** Rails\
**Created:** [March 31, 2008, 8:35pm UTC](https://www.ruby-forum.com/t/scriptaculous-effects-new-help/133468 "2008-03-31T20:35:26Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![megax](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/94ad74/32.png) [@megax](https://www.ruby-forum.com/u/megax)\
**Post date:** [March 31, 2008, 8:35pm UTC](https://www.ruby-forum.com/t/scriptaculous-effects-new-help/133468/1 "2008-03-31T20:35:26Z")

</div>

I have been experimenting with the scriptaculous effects and can get  
them working with a click as shown below:

Flash

but I want the effect to happen when the page loads but I have no idea  
how to do this can anyone help?

---

<div class="post-metadata">

**Author:** ![megax](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/94ad74/32.png) [@megax](https://www.ruby-forum.com/u/megax)\
**Post date:** [March 31, 2008, 10:18pm UTC](https://www.ruby-forum.com/t/scriptaculous-effects-new-help/133468/2 "2008-03-31T22:18:55Z")

</div>

Well, fortunately, it is rather simple. Javascript is all about  
listening to and binding to events. Right now in the code:

Flash

you are binding to the click event so that when the click event fires  
you launch the highlight action.

You can just as easily bind to other events such as the page loading.  
Currently, you are binding to the event inline meaning that the  
“onclick” is being specified within the button.

I am an advocate of unobtrusive javascript when possible and you can  
also bind to events through an unobtrusive method. That would be putting  
the following in the application.js file in /public/javascripts:

$('blink).observe(‘click’, function() {  
new Effect.Highlight(‘fun’, {duration: 2});  
});

and then in the html:

Flash

Using this method, putting it on the page load is as simple as changing  
the event being observed:

Event.observe(window, ‘load’, function() {  
new Effect.Highlight(‘fun’, {duration: 2});  
});