Adding effects to your website
Tuesday, October 16th, 2007This post might be a little over the standard in terms of technicality. But then, this is a developer’s blog, so why not enlighten you. In this episode, we are going to teach you how to add very simple effects and animations to your page.
Over the last few years, the term AJAX and web 2.0 have become synonym with bleeding edge web software. Although we are not going to show you how to do AJAX, we will show you how to use some of the really nice javascript animations that are available in today’s web 2.0 world. This short tutorial DOES require that you know of some HTML and that you have put your eyes on javascript before. So let’s get this started.
We’re going to take our starting point in the Scriptaculous javascript library (which is an extension of the prototype library). The combination of Scriptaculous and Prototype is what we have used at motigo from the beginning.
We start out by having a <div> layer, which is a standard element in HTML. Our <div> looks like this:
<div id="my_element" style="width: 200px; height: 50px; background: red; color: white; padding: 5px;">
This is the content inside the DIV
</div>
The code above produces this: (a box with the dimensions of 200×50 pixels, a red background, white text, and an inside margin of 5 pixels)
Now - we can begin to manipulate it. Notice that the ID of the DIV is my_element. That means that we can do this (with scriptaculous and prototype loaded):
<a href="#" onclick="Effect.toggle('my_element', 'blind'); return false;">Toggle blind effect</a>
<a href="#" onclick="Effect.toggle('my_element', 'appear'); return false;">Toggle appear effect</a>
This produces this:
Toggle blind effect
Toggle appear effect
Try to click the links and see what happens with the red box.
Pretty neat. Pretty simple!
The reason why we say return false; in the end of the onclick="" attribute, is that we don’t want to redirect the browser to the link of href="".
What allows us to do all this, is because we have Scriptaculous and Prototype loaded on this page. We have done so, first by downloading the Scriptaculous and Prototype files over on the Scriptaculous website, uploaded these files to our server, and including the following HTML code at the top of our page (inside the <head> tag):
<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/scriptaculous.js"></script>
The downside of using Scriptaculous and Prototype is it’s large size (in kilobytes). Other smaller libraries include Dojo, MooTools, and Ext JS.
Let us know if this is too advanced, or if you would like to know more.
UPDATE: This article seems to have hit a too high level of complexity. We are sorry if all this doesn’t make much sense. The primary problem our readers have experiences is that they are not aware that they need to upload the javascript files from Scriptaculous and Prototype to their own server - and that it is those files that allow us to do the effects.
NOTICE: The effects work in the most popular browsers. Some older browsers are not supported.