How To – Script.aculo.us Effect.Appear

Since I implemented Prototype and Script.aculo.us for the Lightbox photo album some time ago, I found that I can do more with these libraries – for example a Fade-in / Appear effect for my blog and posts (you can see it, can’t you ?). Now it’s the how to guide:

  • Provided that you already included the for prototype.js and scriptaculous.js in the header.template;
  • Then in the same file, find the line of <div id=”content”>
  • Add a new attribute to it style=”display:none;”
  • Then open the file main.template (your template set may have another name), add the following code right after the template loop through all the posts, but before the links and footer:

{literal}

//

{/literal}

  • You can adjust the duration to whatever seconds, you know.
  • Apply the same changes to other template files, if required.
  • Then upload the those template files to the server, and you are done !!

Enjoy !!

Author: Michael Yung

Michael possessed over 30 years of experience in Information Technology with focuses on complex application development, database technologies and IT strategy. He also spent the last 20 years in Internet technology, eCommerce development / operations, web usability, computer security and Public Key Infrastructure technologies.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: