I decided to write a small post explaining how one can do simple animation in JavaScript without script.aculo.us, moo.fx etc. Thought I highly recommend both these libraries and I really like animations done through them and I myself use script.aculo.us! I thought that it would also be good to know how they do it.
So let us start. We a are first making a simple HTML page with an image and a link to shrink that image we are also including a simple CSS file, prototype so that our code can be shorter and logic.js.
The HTML will look something like this –
<html>
<head>
<link rel="stylesheet" type="text/css" href="res/ui.css"/>
<script src="res/prototype.js"></script>
<script src="res/logic.js"></script>
</head>
<body>
<p>Here we will try to make this image shrink with the help of prototype. You just need to click on the following <a href="javascript:;" id="link">link</a>.</p>
<img src="img/rails.png" alt="Rails" id="rails"/>
</body>
</html>
Our CSS file just includes padding and margin declarations for the body. Our JS file looks something like this, I will explain each line later –
Event.observe( window, 'load', function(){
$('link').onclick = shrinkImage;
});
shrinkImage = function(){
domID = 'rails';
var dimensions = $(domID).getDimensions();
function shrink(){
if(dimensions.height<0 || dimensions.width<0){
$(domID).hide();
return;
}
$(domID).height = $(domID).height-5;
setTimeout(shrink, 50)
}
setTimeout(shrink, 50)
}}
If you want you may also download the ZIP file for the JavaScript: Simple Animation tutorial.
The code JS code is pretty short (17 lines) so I am going to refer to code from there line number only. So at line 1 we use prototype’s Event observer and once the page has completely loaded we access the “anchor” element whose id is “link” and we attach a the “shrinkImage” function to it onclick. The fun begins at the shrinkImage function. We first make a variable where we keep the domID, you may wish to take this as a function parameter too. We get its dimensions and keep it in the dimensions varialble.
We now make a nested function inside the shrinkImage function and this function is called shrink. If the dimensions of the element are zero then it hides the element and breaks out of the function. If not it reduces the elements height by 5. We are trying to shrink an image so if we reduce one the other is reduced in the correct ration. Then we create a timer which calls the function again after 50 milliseconds. Once this function is completed we call if after an interval of 50 milliseconds and the animation begins!
Any feedback is welcome!
Prateek Saxena 
Thats cool way of shrinking image using JavaScript….It will be more useful if we can stop animation in between by another click…..just a thought…
Keep up the Good Work 😉
Deep C, As mentioned in the Blog title this is just Simple Animation. I was thinking of making more tutorials (if this one gets good response) that would include better effects with more parameters such as duration, stopping it in between (as you have mentioned) and more things.. 🙂
Any feedback of what else you want in the tutorials is welcome 🙂
In the function shrink() you are reading out the values of dimensions.height and dimensions.width. These values will never change, and therefore the .hide() will never be executed. Unless your image size is smaller than 0 offcourse.
This check must be replaced in the shrinkImage() scope.
Prototype rulez.
Good point thanks a lot! I will put the corrections ASAP!!
wow , nice tutorial !!
keep up the goodwork
can i ask ??
can you teach me how to put comment script in my site …
i dont know the javascript for that..
thanks
testing
@tom: thanks for leaving a comment.
I am currently using WordPress, that already has the functionality of other people adding comments and stuff, but I heard that there is something like [Halo Comments] [http://www.haloscan.com/] that helps to allow our visitors to leave comments on the different pages.
I hope it help >.
ahm can u help me…
coz im doing javascript now…
and that is our last topic…
our lecturer assigned us to create a web site that uses javascript..
how to put a pop up window??
how to put window media player??? hehehhe sorry coz i dont know yet how…
wud u mind to respond as soon as possible.. thank u!
great tutorial
however, i tried making a div with the same id and it didnt work
perhaps a new tutorial for shrinking div’s?
great work though
I think it should work on DIV’s as well.
I will check and get back to you in the form of a new post!! ^_^
Hello sir..
are you really sure that ur 15 yrs old??