How to use Javascript animation to change the size of a div?

For discussions about programming, programming questions/advice, and projects that don't really have anything to do with Puppy.
Post Reply
Message
Author
madinjeck
Posts: 1
Joined: Mon 22 Nov 2010, 17:17

How to use Javascript animation to change the size of a div?

#1 Post by madinjeck »

Im trying to use purely Javascript to animate the sizing of a div. Basically I want the div to slide up and down when called to do so. Any help? Thanks.
[url=http://www.7zipdownload.org/]7zip download[/url]

noryb009
Posts: 634
Joined: Sat 20 Mar 2010, 22:28

#2 Post by noryb009 »

This forum is devoted to Puppy Linux, not Javascript. You can look at Stack Overflow for help on programming, including Javascript.

But to answer your question, you can use jQuery

User avatar
jyore
Posts: 43
Joined: Sat 06 Nov 2010, 15:41

#3 Post by jyore »

This forum is devoted to Puppy Linux, not Javascript. You can look at Stack Overflow for help on programming, including Javascript.
noryb, this should be an appropriate post, as this is the off-topic area of the forum, so things that are not specific to puppy do belong here. He is asking for programming help in the off-topic programming forum...seems like a perfect fit.

To answer the question, jQuery might work...you can do it at the ajax layer too though...see here for an example:

http://www.java2s.com/Code/JavaScript/Ajax-Layer/AnimationExampleSize.htm

noryb009
Posts: 634
Joined: Sat 20 Mar 2010, 22:28

#4 Post by noryb009 »

jyore wrote:
This forum is devoted to Puppy Linux, not Javascript. You can look at Stack Overflow for help on programming, including Javascript.
noryb, this should be an appropriate post, as this is the off-topic area of the forum, so things that are not specific to puppy do belong here. He is asking for programming help in the off-topic programming forum...seems like a perfect fit.

To answer the question, jQuery might work...you can do it at the ajax layer too though...see here for an example:

http://www.java2s.com/Code/JavaScript/Ajax-Layer/AnimationExampleSize.htm
However, this is his first post in this forum. He may have thought that this forum had some relation to Javascript.

User avatar
droope
Posts: 801
Joined: Fri 01 Aug 2008, 00:17
Location: Uruguay, Mercedes

Re: How to use Javascript animation to change the size of a div?

#5 Post by droope »

madinjeck wrote:Im trying to use purely Javascript to animate the sizing of a div. Basically I want the div to slide up and down when called to do so. Any help? Thanks.
Hi! Using purely JS ( as in no libraries ) is very painful! You'd have to create a loop using setTimeout or setInterval and increase the width and height that way.

Besides, doing that has little advantages over using jquery on a CDN... since chances are that the user already has it on his cache.

I've created and attached versions of both ( pure js and jquery ). The jquery version was created in 5 minutes and 3 lines of code, while the pure JS version took arround 45 minutes and exactly 50 lines of code.

The jquery one looks and feels better, but wasn't nearly as fun to code :D

The tar was created using winrar, hope it works for you!

Cheers,
Droope
Attachments
javascript_joy.tar.gz
(1.13 KiB) Downloaded 267 times
What seems hard is actually easy, while what looks like impossible is in fact hard.

“Hard things take time to do. Impossible things take a little longer.â€￾ –Percy Cerutty

[url=http://droope.wordpress.com/]Mi blog[/url] (Spanish)

User avatar
droope
Posts: 801
Joined: Fri 01 Aug 2008, 00:17
Location: Uruguay, Mercedes

#6 Post by droope »

What seems hard is actually easy, while what looks like impossible is in fact hard.

“Hard things take time to do. Impossible things take a little longer.â€￾ –Percy Cerutty

[url=http://droope.wordpress.com/]Mi blog[/url] (Spanish)

Post Reply