Adding effects to your website
This 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.
October 18th, 2007 at 10:24 am
ok I have now inserted in netscape, where I normally put adresses for website. I dont get it as nothing happen. many times over and still nothing
I am 17 and I am very good with the internet, very fast with sms also so I think your article is crap.
No anders really, who do you think you believe KB mena skilobytes
October 18th, 2007 at 10:35 am
sasha_no_clue: The codes I refer to in the article is of course to be inserted and be inside an HTML document - along the other codes going in the HTML document.
I am sorry if I got a little too technical with this. I will refrain from doing so again in future posts.
October 19th, 2007 at 1:58 am
thanks !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
October 19th, 2007 at 2:01 am
i dont no what i say so ,,,
thanks
November 7th, 2007 at 10:48 am
THX for that really interesting information. If i’ve got time I will look at it. I downloaded the files from Scriptaculous website.
@sasha_no_clue: if you are very good in internet (-surfing???) and fast with sms (no clue what that have to do with html-programming)???: why weren’t you able to do it right. If you can read, than you can find all informations in this article and in the readme of the Scriptaculous website!!!
who can read, has the advantage
November 13th, 2007 at 2:59 am
If the article contains code not supported by some browsers, a warning should be included in it. That’s all and I find that the very first comment comes from an offensive person and those opinions should be filtered. There are no new ideas or added value, just insults.
Please forgive me if mistakes are present but english is not my native lang.
November 14th, 2007 at 4:33 am
Wow very thanks now im feeling im learning more of web design. Please submit more articles like that, i have to secognize that at the first time i try i fail, but in 30 minutes of thinking and playing with that i do it. *And im not a experienced designer. That article make that im trying know to learn more of AJAX