[jQuery] Re: animated robot cartoon with jquery
I have decided that sound is not plausible at this time. It starts
late every time due to having to load, so the sound effects are off.
But the adventure was well worth my time :) I'm thankful that you
started this project and gave me something to test my skills on. If
you happen to create any more animations shoot me an email, even if
you don't want any improvements on them, it's nice to have something
to mess around with :P
On Nov 8, 2:02 pm, CodingCyborg [EMAIL PROTECTED] wrote:
http://codingcyborg.com/jQueryFun/Robot/robotSound.html
Not the best sound file, it's actually a couch sound, but I couldn't
find anything better in the time I had. The timeouts weren't clearing
properly for awhile. When I switched the order they worked better, but
they didn't all clear at the same time like they should have. This one
is a bit rough around the edges, but the sound is a nice addition :)
On Nov 8, 1:46 pm, CodingCyborg [EMAIL PROTECTED] wrote:
I was actually pleased to find that there is a jQuery plug-in for
playing sounds! Now if I could only get these darn timeouts to clear
properly!
On Nov 8, 12:07 am, Jeffrey Kretz [EMAIL PROTECTED] wrote:
It's actually workable to use Flash as a basis for the sound. It's easier
with ActionScript 3.0, but it can still be done in earlier versions. You
have to bind a flash method to an external interface (look up
ExternalInterface in the docs).
Then you can find the object by ID, and call the method on it directly.
$('#swffile')[0].playSound();
JK
-Original Message-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of CodingCyborg
Sent: Friday, November 07, 2008 9:04 PM
To: jQuery (English)
Subject: [jQuery] Re: animated robot cartoon with jquery
I am sad to report that finding cross browser audio playing javascript
is pretty tough stuff... I found one plug-in that used flash, but
couldn't get it implemented correctly. I may try again tomorrow, but
don't count on it too much, if somebody else could implement some
squeaky wheel sounds for when it's moving that would be nice :) Best
of luck.
On Nov 7, 10:12 pm, CodingCyborg [EMAIL PROTECTED] wrote:
I found the edge of the cliff while allowing the robot to roll
multiple times without resetting the backgrounds. From there I thought
it would be fun to have him fall :) Now I'm looking into adding some
fun sound effects :) I'll let ya know how that goes in a couple
hours...
On Nov 7, 8:58 pm, anthony.calzadilla [EMAIL PROTECTED]
wrote:
Thats incredible! How did you do that?! I'm going to dig into your
code and try to figure it out... AWESOME!
-A
On Nov 7, 8:50 pm, CodingCyborg [EMAIL PROTECTED] wrote:
Well, I decided to add some more fun stuff :)
http://codingcyborg.com/jQueryFun/Robot/robotHumor.html
There are now some movement images on the wheels. And I added an
old
school off the cliff cartoon style ending :)
On Nov 7, 11:58 am, anthony.calzadilla
[EMAIL PROTECTED] wrote:
Hi,
I changed the 'bounceHim' function a bit so that the different
pieces
of the robot look like they are separated and bouncing
individually:
function bounceHim(){
$(#sec-content,#branding).animate({top:-=5px},
150).animate({top:+=5px},150);
$(#content).animate({top:-=8px},150).animate({top:+=8px},150);
setTimeout(bounceHim(),300);
}
http://robot.anthonycalzadilla.com/
Once again thanks for your insight. I really am a complete novice
at
programming in general. I'm really scrutinizing your code so as to
learn from it.
-Anthony
On Nov 7, 8:34 am, CodingCyborg [EMAIL PROTECTED] wrote:
I just noticed, after looking over the code again, that since
you
have
all three pieces of the robot that are bouncing bounce at the
same
time the line of code can be condensed into one. As well as the
two
that bounce together at the beginning.
This:
$(#content).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
$(#branding).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
Becomes this:
$(#content,#branding).animate({top:-=+num+px},
150).animate({top:+=+num+px},150);
And in the next function this:
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=5px},150).animate({top:+=5px},150);
$(#branding).animate({top:-=5px},150).animate({top:+=5px},150);
Becomes this:
$(#sec-content,#content,#branding).animate({top:-=5px},
150).animate({top:+=5px},150);
Of course, if you wished to have
[jQuery] Re: animated robot cartoon with jquery
I was actually pleased to find that there is a jQuery plug-in for
playing sounds! Now if I could only get these darn timeouts to clear
properly!
On Nov 8, 12:07 am, Jeffrey Kretz [EMAIL PROTECTED] wrote:
It's actually workable to use Flash as a basis for the sound. It's easier
with ActionScript 3.0, but it can still be done in earlier versions. You
have to bind a flash method to an external interface (look up
ExternalInterface in the docs).
Then you can find the object by ID, and call the method on it directly.
$('#swffile')[0].playSound();
JK
-Original Message-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of CodingCyborg
Sent: Friday, November 07, 2008 9:04 PM
To: jQuery (English)
Subject: [jQuery] Re: animated robot cartoon with jquery
I am sad to report that finding cross browser audio playing javascript
is pretty tough stuff... I found one plug-in that used flash, but
couldn't get it implemented correctly. I may try again tomorrow, but
don't count on it too much, if somebody else could implement some
squeaky wheel sounds for when it's moving that would be nice :) Best
of luck.
On Nov 7, 10:12 pm, CodingCyborg [EMAIL PROTECTED] wrote:
I found the edge of the cliff while allowing the robot to roll
multiple times without resetting the backgrounds. From there I thought
it would be fun to have him fall :) Now I'm looking into adding some
fun sound effects :) I'll let ya know how that goes in a couple
hours...
On Nov 7, 8:58 pm, anthony.calzadilla [EMAIL PROTECTED]
wrote:
Thats incredible! How did you do that?! I'm going to dig into your
code and try to figure it out... AWESOME!
-A
On Nov 7, 8:50 pm, CodingCyborg [EMAIL PROTECTED] wrote:
Well, I decided to add some more fun stuff :)
http://codingcyborg.com/jQueryFun/Robot/robotHumor.html
There are now some movement images on the wheels. And I added an old
school off the cliff cartoon style ending :)
On Nov 7, 11:58 am, anthony.calzadilla
[EMAIL PROTECTED] wrote:
Hi,
I changed the 'bounceHim' function a bit so that the different
pieces
of the robot look like they are separated and bouncing individually:
function bounceHim(){
$(#sec-content,#branding).animate({top:-=5px},
150).animate({top:+=5px},150);
$(#content).animate({top:-=8px},150).animate({top:+=8px},150);
setTimeout(bounceHim(),300);
}
http://robot.anthonycalzadilla.com/
Once again thanks for your insight. I really am a complete novice at
programming in general. I'm really scrutinizing your code so as to
learn from it.
-Anthony
On Nov 7, 8:34 am, CodingCyborg [EMAIL PROTECTED] wrote:
I just noticed, after looking over the code again, that since you
have
all three pieces of the robot that are bouncing bounce at the same
time the line of code can be condensed into one. As well as the
two
that bounce together at the beginning.
This:
$(#content).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
$(#branding).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
Becomes this:
$(#content,#branding).animate({top:-=+num+px},
150).animate({top:+=+num+px},150);
And in the next function this:
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=5px},150).animate({top:+=5px},150);
$(#branding).animate({top:-=5px},150).animate({top:+=5px},150);
Becomes this:
$(#sec-content,#content,#branding).animate({top:-=5px},
150).animate({top:+=5px},150);
Of course, if you wished to have each part bounce a different
amount
or at different rates you would need to set up different
timeouts
with different functions if they couldn't be set with the current
300
ms function. But if you wanted something to go at half speed or a
whole number multiple speed you could just changed how much code
was
in the function and the numbers associated with it. (If any of
that
makes sense.)
But that saves more code, and again, makes the file a bit (Quite
seriously only a few bits :P) smaller.
On Nov 7, 12:44 am, anthony.calzadilla
[EMAIL PROTECTED] wrote:
Wow! Thank you CodingCyborg! Thank You! I'm going to study and
learn
from your code example and implement it into mine.
-Anthony
On Nov 7, 12:24 am, CodingCyborg [EMAIL PROTECTED] wrote:
I made a few more modifications such that the robot doesn't
keep
bouncing and the sky keep moving when the ground has stopped.
Though I
did the cheap way, in the sense that I just made it a short
clip
rather than a full length repeat.
http://codingcyborg.com/jQueryFun/Robot/robot.html
[jQuery] Re: animated robot cartoon with jquery
http://codingcyborg.com/jQueryFun/Robot/robotSound.html
Not the best sound file, it's actually a couch sound, but I couldn't
find anything better in the time I had. The timeouts weren't clearing
properly for awhile. When I switched the order they worked better, but
they didn't all clear at the same time like they should have. This one
is a bit rough around the edges, but the sound is a nice addition :)
On Nov 8, 1:46 pm, CodingCyborg [EMAIL PROTECTED] wrote:
I was actually pleased to find that there is a jQuery plug-in for
playing sounds! Now if I could only get these darn timeouts to clear
properly!
On Nov 8, 12:07 am, Jeffrey Kretz [EMAIL PROTECTED] wrote:
It's actually workable to use Flash as a basis for the sound. It's easier
with ActionScript 3.0, but it can still be done in earlier versions. You
have to bind a flash method to an external interface (look up
ExternalInterface in the docs).
Then you can find the object by ID, and call the method on it directly.
$('#swffile')[0].playSound();
JK
-Original Message-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of CodingCyborg
Sent: Friday, November 07, 2008 9:04 PM
To: jQuery (English)
Subject: [jQuery] Re: animated robot cartoon with jquery
I am sad to report that finding cross browser audio playing javascript
is pretty tough stuff... I found one plug-in that used flash, but
couldn't get it implemented correctly. I may try again tomorrow, but
don't count on it too much, if somebody else could implement some
squeaky wheel sounds for when it's moving that would be nice :) Best
of luck.
On Nov 7, 10:12 pm, CodingCyborg [EMAIL PROTECTED] wrote:
I found the edge of the cliff while allowing the robot to roll
multiple times without resetting the backgrounds. From there I thought
it would be fun to have him fall :) Now I'm looking into adding some
fun sound effects :) I'll let ya know how that goes in a couple
hours...
On Nov 7, 8:58 pm, anthony.calzadilla [EMAIL PROTECTED]
wrote:
Thats incredible! How did you do that?! I'm going to dig into your
code and try to figure it out... AWESOME!
-A
On Nov 7, 8:50 pm, CodingCyborg [EMAIL PROTECTED] wrote:
Well, I decided to add some more fun stuff :)
http://codingcyborg.com/jQueryFun/Robot/robotHumor.html
There are now some movement images on the wheels. And I added an old
school off the cliff cartoon style ending :)
On Nov 7, 11:58 am, anthony.calzadilla
[EMAIL PROTECTED] wrote:
Hi,
I changed the 'bounceHim' function a bit so that the different
pieces
of the robot look like they are separated and bouncing individually:
function bounceHim(){
$(#sec-content,#branding).animate({top:-=5px},
150).animate({top:+=5px},150);
$(#content).animate({top:-=8px},150).animate({top:+=8px},150);
setTimeout(bounceHim(),300);
}
http://robot.anthonycalzadilla.com/
Once again thanks for your insight. I really am a complete novice at
programming in general. I'm really scrutinizing your code so as to
learn from it.
-Anthony
On Nov 7, 8:34 am, CodingCyborg [EMAIL PROTECTED] wrote:
I just noticed, after looking over the code again, that since you
have
all three pieces of the robot that are bouncing bounce at the same
time the line of code can be condensed into one. As well as the
two
that bounce together at the beginning.
This:
$(#content).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
$(#branding).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
Becomes this:
$(#content,#branding).animate({top:-=+num+px},
150).animate({top:+=+num+px},150);
And in the next function this:
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=5px},150).animate({top:+=5px},150);
$(#branding).animate({top:-=5px},150).animate({top:+=5px},150);
Becomes this:
$(#sec-content,#content,#branding).animate({top:-=5px},
150).animate({top:+=5px},150);
Of course, if you wished to have each part bounce a different
amount
or at different rates you would need to set up different
timeouts
with different functions if they couldn't be set with the current
300
ms function. But if you wanted something to go at half speed or a
whole number multiple speed you could just changed how much code
was
in the function and the numbers associated with it. (If any of
that
makes sense.)
But that saves more code, and again, makes the file a bit (Quite
seriously only a few bits :P) smaller.
On Nov 7, 12:44 am, anthony.calzadilla
[EMAIL
[jQuery] Re: animated robot cartoon with jquery
I just noticed, after looking over the code again, that since you have
all three pieces of the robot that are bouncing bounce at the same
time the line of code can be condensed into one. As well as the two
that bounce together at the beginning.
This:
$(#content).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
$(#branding).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
Becomes this:
$(#content,#branding).animate({top:-=+num+px},
150).animate({top:+=+num+px},150);
And in the next function this:
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=5px},150).animate({top:+=5px},150);
$(#branding).animate({top:-=5px},150).animate({top:+=5px},150);
Becomes this:
$(#sec-content,#content,#branding).animate({top:-=5px},
150).animate({top:+=5px},150);
Of course, if you wished to have each part bounce a different amount
or at different rates you would need to set up different timeouts
with different functions if they couldn't be set with the current 300
ms function. But if you wanted something to go at half speed or a
whole number multiple speed you could just changed how much code was
in the function and the numbers associated with it. (If any of that
makes sense.)
But that saves more code, and again, makes the file a bit (Quite
seriously only a few bits :P) smaller.
On Nov 7, 12:44 am, anthony.calzadilla
[EMAIL PROTECTED] wrote:
Wow! Thank you CodingCyborg! Thank You! I'm going to study and learn
from your code example and implement it into mine.
-Anthony
On Nov 7, 12:24 am, CodingCyborg [EMAIL PROTECTED] wrote:
I made a few more modifications such that the robot doesn't keep
bouncing and the sky keep moving when the ground has stopped. Though I
did the cheap way, in the sense that I just made it a short clip
rather than a full length repeat.
http://codingcyborg.com/jQueryFun/Robot/robot.html
That has the same basic directory set up, but with the modified
script.js file for viewing.
On Nov 6, 11:07 pm, CodingCyborg [EMAIL PROTECTED] wrote:
This is Beautiful! To save yourself from the copy/paste to create the
repeated bounce, and to make the file smaller, you can simply replace
the three lines that were enormously long with this:
startHim();
And then add this at the bottom of the js file:
var num = 1;
function startHim(){
num++;
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
$(#branding).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
if(num4){
setTimeout(startHim(),300);
} else {
setTimeout(bounceHim(),300);
}
}
function bounceHim(){
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=5px},150).animate({top:+=5px},150);
$(#branding).animate({top:-=5px},150).animate({top:+=5px},150);
setTimeout(bounceHim(),300);
}
This allows for more control of the looped animation and easier to
edit the bounciness of the robot. That's all I could enhance, if you
could call it that. It's an amazing display of js and jQuery skills,
and I admire you for that.
On Nov 5, 10:56 pm, anthony.calzadilla
[EMAIL PROTECTED] wrote:
Hi all,
I occasionally volunteer as a guest speaker for the web design class
at my child's elementary school. I wanted to introduce them to jquery
and html in a fun way so I created an animated jquery 'robot'. Now,
I'm not really adept at javascript or any type of programming at all.
I'm a designer turned wannabe' web developer :)
I used multiple divs and transparent png's to create the different
parts of the parallax background and the bouncing robot. The code I
was able to piece together to make it work is absolutely horrendous,
even for me. I was hoping maybe some of you jquery masters might be
able to take a looksy and help me out?
The url is: robot.anthonycalzadilla.com
(I would just post the code but its so long it wouldn't be visibly
viable)
Anthony
[EMAIL PROTECTED]
[jQuery] Re: animated robot cartoon with jquery
Hi,
I changed the 'bounceHim' function a bit so that the different pieces
of the robot look like they are separated and bouncing individually:
function bounceHim(){
$(#sec-content,#branding).animate({top:-=5px},
150).animate({top:+=5px},150);
$(#content).animate({top:-=8px},150).animate({top:+=8px},150);
setTimeout(bounceHim(),300);
}
http://robot.anthonycalzadilla.com/
Once again thanks for your insight. I really am a complete novice at
programming in general. I'm really scrutinizing your code so as to
learn from it.
-Anthony
On Nov 7, 8:34 am, CodingCyborg [EMAIL PROTECTED] wrote:
I just noticed, after looking over the code again, that since you have
all three pieces of the robot that are bouncing bounce at the same
time the line of code can be condensed into one. As well as the two
that bounce together at the beginning.
This:
$(#content).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
$(#branding).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
Becomes this:
$(#content,#branding).animate({top:-=+num+px},
150).animate({top:+=+num+px},150);
And in the next function this:
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=5px},150).animate({top:+=5px},150);
$(#branding).animate({top:-=5px},150).animate({top:+=5px},150);
Becomes this:
$(#sec-content,#content,#branding).animate({top:-=5px},
150).animate({top:+=5px},150);
Of course, if you wished to have each part bounce a different amount
or at different rates you would need to set up different timeouts
with different functions if they couldn't be set with the current 300
ms function. But if you wanted something to go at half speed or a
whole number multiple speed you could just changed how much code was
in the function and the numbers associated with it. (If any of that
makes sense.)
But that saves more code, and again, makes the file a bit (Quite
seriously only a few bits :P) smaller.
On Nov 7, 12:44 am, anthony.calzadilla
[EMAIL PROTECTED] wrote:
Wow! Thank you CodingCyborg! Thank You! I'm going to study and learn
from your code example and implement it into mine.
-Anthony
On Nov 7, 12:24 am, CodingCyborg [EMAIL PROTECTED] wrote:
I made a few more modifications such that the robot doesn't keep
bouncing and the sky keep moving when the ground has stopped. Though I
did the cheap way, in the sense that I just made it a short clip
rather than a full length repeat.
http://codingcyborg.com/jQueryFun/Robot/robot.html
That has the same basic directory set up, but with the modified
script.js file for viewing.
On Nov 6, 11:07 pm, CodingCyborg [EMAIL PROTECTED] wrote:
This is Beautiful! To save yourself from the copy/paste to create the
repeated bounce, and to make the file smaller, you can simply replace
the three lines that were enormously long with this:
startHim();
And then add this at the bottom of the js file:
var num = 1;
function startHim(){
num++;
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
$(#branding).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
if(num4){
setTimeout(startHim(),300);
} else {
setTimeout(bounceHim(),300);
}
}
function bounceHim(){
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=5px},150).animate({top:+=5px},150);
$(#branding).animate({top:-=5px},150).animate({top:+=5px},150);
setTimeout(bounceHim(),300);
}
This allows for more control of the looped animation and easier to
edit the bounciness of the robot. That's all I could enhance, if you
could call it that. It's an amazing display of js and jQuery skills,
and I admire you for that.
On Nov 5, 10:56 pm, anthony.calzadilla
[EMAIL PROTECTED] wrote:
Hi all,
I occasionally volunteer as a guest speaker for the web design class
at my child's elementary school. I wanted to introduce them to jquery
and html in a fun way so I created an animated jquery 'robot'. Now,
I'm not really adept at javascript or any type of programming at all.
I'm a designer turned wannabe' web developer :)
I used multiple divs and transparent png's to create the different
parts of the parallax background and the bouncing robot. The code I
was able to piece together to make it work is absolutely horrendous,
even for me. I was hoping maybe some of you jquery masters might be
able to take a looksy and help me out?
The url is: robot.anthonycalzadilla.com
(I would just post the
[jQuery] Re: animated robot cartoon with jquery
Anthony...
Is the robot supposed to do anything other than drive across the screen? I'm
looking for buttons which might cause him to do things, but not seeing them.
Is this part of what you're working on, and it's just not in place?
This is really well done by the way. I might show this to my daughter once
it's done.
-Original Message-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of anthony.calzadilla
Sent: Friday, November 07, 2008 11:58 AM
To: jQuery (English)
Subject: [jQuery] Re: animated robot cartoon with jquery
Hi,
I changed the 'bounceHim' function a bit so that the different pieces of the
robot look like they are separated and bouncing individually:
function bounceHim(){
$(#sec-content,#branding).animate({top:-=5px},
150).animate({top:+=5px},150);
$(#content).animate({top:-=8px},150).animate({top:+=8px},150);
setTimeout(bounceHim(),300);
}
http://robot.anthonycalzadilla.com/
Once again thanks for your insight. I really am a complete novice at
programming in general. I'm really scrutinizing your code so as to learn
from it.
-Anthony
On Nov 7, 8:34 am, CodingCyborg [EMAIL PROTECTED] wrote:
I just noticed, after looking over the code again, that since you have
all three pieces of the robot that are bouncing bounce at the same
time the line of code can be condensed into one. As well as the two
that bounce together at the beginning.
This:
$(#content).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
$(#branding).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
Becomes this:
$(#content,#branding).animate({top:-=+num+px},
150).animate({top:+=+num+px},150);
And in the next function this:
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=5px},150).animate({top:+=5px},150);
$(#branding).animate({top:-=5px},150).animate({top:+=5px},150);
Becomes this:
$(#sec-content,#content,#branding).animate({top:-=5px},
150).animate({top:+=5px},150);
Of course, if you wished to have each part bounce a different amount
or at different rates you would need to set up different timeouts
with different functions if they couldn't be set with the current 300
ms function. But if you wanted something to go at half speed or a
whole number multiple speed you could just changed how much code was
in the function and the numbers associated with it. (If any of that
makes sense.)
But that saves more code, and again, makes the file a bit (Quite
seriously only a few bits :P) smaller.
On Nov 7, 12:44 am, anthony.calzadilla
[EMAIL PROTECTED] wrote:
Wow! Thank you CodingCyborg! Thank You! I'm going to study and learn
from your code example and implement it into mine.
-Anthony
On Nov 7, 12:24 am, CodingCyborg [EMAIL PROTECTED] wrote:
I made a few more modifications such that the robot doesn't keep
bouncing and the sky keep moving when the ground has stopped.
Though I did the cheap way, in the sense that I just made it a
short clip rather than a full length repeat.
http://codingcyborg.com/jQueryFun/Robot/robot.html
That has the same basic directory set up, but with the modified
script.js file for viewing.
On Nov 6, 11:07 pm, CodingCyborg [EMAIL PROTECTED] wrote:
This is Beautiful! To save yourself from the copy/paste to
create the repeated bounce, and to make the file smaller, you
can simply replace the three lines that were enormously long with
this:
startHim();
And then add this at the bottom of the js file:
var num = 1;
function startHim(){
num++;
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px
},
150);
$(#content).animate({top:-=+num+px},150).animate({top:+=
+num
+px},150);
$(#branding).animate({top:-=+num+px},150).animate({top:+=
+num
+px},150);
if(num4){
setTimeout(startHim(),300);
} else {
setTimeout(bounceHim(),300);
}
}
function bounceHim(){
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px
},
150);
$(#content).animate({top:-=5px},150).animate({top:+=5px},1
50);
$(#branding).animate({top:-=5px},150).animate({top:+=5px},
150);
setTimeout(bounceHim(),300);
}
This allows for more control of the looped animation and easier
to edit the bounciness of the robot. That's all I could
enhance, if you could call it that. It's an amazing display of
js and jQuery skills, and I admire you for that.
On Nov 5, 10:56 pm, anthony.calzadilla
[EMAIL PROTECTED] wrote:
Hi all,
I occasionally volunteer as a guest speaker for the web design
class at my child's elementary school. I wanted to introduce
them
[jQuery] Re: animated robot cartoon with jquery
He's only saying that so he can get out of responsibility. :) -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Mike Alsup Sent: Friday, November 07, 2008 12:04 PM To: jQuery (English) Subject: [jQuery] Re: animated robot cartoon with jquery Unfortunately, I'm new to jQuery and Javascript, too, so I'm of no use to you on the code. Say what? Rick, you've been contributing to the mailing list for over two years. I think the honeymoon phase is over for you! :-)
[jQuery] Re: animated robot cartoon with jquery
Are you kidding! I'm still so basic in jQuery that I'm just now getting ready to try and implement my first modal dialogue! I'm always behind everyone else! I just moved to ColdFusion 8 from 4.5 a few months ago! :-D Andy Matthews wrote: He's only saying that so he can get out of responsibility. :) -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Mike Alsup Sent: Friday, November 07, 2008 12:04 PM To: jQuery (English) Subject: [jQuery] Re: animated robot cartoon with jquery Unfortunately, I'm new to jQuery and Javascript, too, so I'm of no use to you on the code. Say what? Rick, you've been contributing to the mailing list for over two years. I think the honeymoon phase is over for you! :-) --- Text inserted by Panda IS 2009: This message has NOT been classified as spam. If it is unsolicited mail (spam), click on the following link to reclassify it: http://localhost:6083/Panda?ID=pav_1323SPAM=truepath=C:\Documents%20and%20Settings\Rick%20Faircloth\Local%20Settings\Application%20Data\Panda%20Security\Panda%20Internet%20Security%202009\AntiSpam ---
[jQuery] Re: animated robot cartoon with jquery
Unfortunately, I only get to dabble with jQuery. Just enough to get done what I need for the moment. Too many projects and too much ColdFusion programming to do. So, mostly, I contribute by asking the most basic questions that others are embarrassed to ask! :-) Mike Alsup wrote: Unfortunately, I'm new to jQuery and Javascript, too, so I'm of no use to you on the code. Say what? Rick, you've been contributing to the mailing list for over two years. I think the honeymoon phase is over for you! :-) --- Text inserted by Panda IS 2009: This message has NOT been classified as spam. If it is unsolicited mail (spam), click on the following link to reclassify it: http://localhost:6083/Panda?ID=pav_1309SPAM=truepath=C:\Documents%20and%20Settings\Rick%20Faircloth\Local%20Settings\Application%20Data\Panda%20Security\Panda%20Internet%20Security%202009\AntiSpam ---
[jQuery] Re: animated robot cartoon with jquery
Well, I decided to add some more fun stuff :)
http://codingcyborg.com/jQueryFun/Robot/robotHumor.html
There are now some movement images on the wheels. And I added an old
school off the cliff cartoon style ending :)
On Nov 7, 11:58 am, anthony.calzadilla
[EMAIL PROTECTED] wrote:
Hi,
I changed the 'bounceHim' function a bit so that the different pieces
of the robot look like they are separated and bouncing individually:
function bounceHim(){
$(#sec-content,#branding).animate({top:-=5px},
150).animate({top:+=5px},150);
$(#content).animate({top:-=8px},150).animate({top:+=8px},150);
setTimeout(bounceHim(),300);
}
http://robot.anthonycalzadilla.com/
Once again thanks for your insight. I really am a complete novice at
programming in general. I'm really scrutinizing your code so as to
learn from it.
-Anthony
On Nov 7, 8:34 am, CodingCyborg [EMAIL PROTECTED] wrote:
I just noticed, after looking over the code again, that since you have
all three pieces of the robot that are bouncing bounce at the same
time the line of code can be condensed into one. As well as the two
that bounce together at the beginning.
This:
$(#content).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
$(#branding).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
Becomes this:
$(#content,#branding).animate({top:-=+num+px},
150).animate({top:+=+num+px},150);
And in the next function this:
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=5px},150).animate({top:+=5px},150);
$(#branding).animate({top:-=5px},150).animate({top:+=5px},150);
Becomes this:
$(#sec-content,#content,#branding).animate({top:-=5px},
150).animate({top:+=5px},150);
Of course, if you wished to have each part bounce a different amount
or at different rates you would need to set up different timeouts
with different functions if they couldn't be set with the current 300
ms function. But if you wanted something to go at half speed or a
whole number multiple speed you could just changed how much code was
in the function and the numbers associated with it. (If any of that
makes sense.)
But that saves more code, and again, makes the file a bit (Quite
seriously only a few bits :P) smaller.
On Nov 7, 12:44 am, anthony.calzadilla
[EMAIL PROTECTED] wrote:
Wow! Thank you CodingCyborg! Thank You! I'm going to study and learn
from your code example and implement it into mine.
-Anthony
On Nov 7, 12:24 am, CodingCyborg [EMAIL PROTECTED] wrote:
I made a few more modifications such that the robot doesn't keep
bouncing and the sky keep moving when the ground has stopped. Though I
did the cheap way, in the sense that I just made it a short clip
rather than a full length repeat.
http://codingcyborg.com/jQueryFun/Robot/robot.html
That has the same basic directory set up, but with the modified
script.js file for viewing.
On Nov 6, 11:07 pm, CodingCyborg [EMAIL PROTECTED] wrote:
This is Beautiful! To save yourself from the copy/paste to create the
repeated bounce, and to make the file smaller, you can simply replace
the three lines that were enormously long with this:
startHim();
And then add this at the bottom of the js file:
var num = 1;
function startHim(){
num++;
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
$(#branding).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
if(num4){
setTimeout(startHim(),300);
} else {
setTimeout(bounceHim(),300);
}
}
function bounceHim(){
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=5px},150).animate({top:+=5px},150);
$(#branding).animate({top:-=5px},150).animate({top:+=5px},150);
setTimeout(bounceHim(),300);
}
This allows for more control of the looped animation and easier to
edit the bounciness of the robot. That's all I could enhance, if you
could call it that. It's an amazing display of js and jQuery skills,
and I admire you for that.
On Nov 5, 10:56 pm, anthony.calzadilla
[EMAIL PROTECTED] wrote:
Hi all,
I occasionally volunteer as a guest speaker for the web design class
at my child's elementary school. I wanted to introduce them to
jquery
and html in a fun way so I created an animated jquery 'robot'. Now,
I'm not really adept at javascript or any type of programming at
all.
I'm a designer turned wannabe' web developer :)
[jQuery] Re: animated robot cartoon with jquery
Thats incredible! How did you do that?! I'm going to dig into your
code and try to figure it out... AWESOME!
-A
On Nov 7, 8:50 pm, CodingCyborg [EMAIL PROTECTED] wrote:
Well, I decided to add some more fun stuff :)
http://codingcyborg.com/jQueryFun/Robot/robotHumor.html
There are now some movement images on the wheels. And I added an old
school off the cliff cartoon style ending :)
On Nov 7, 11:58 am, anthony.calzadilla
[EMAIL PROTECTED] wrote:
Hi,
I changed the 'bounceHim' function a bit so that the different pieces
of the robot look like they are separated and bouncing individually:
function bounceHim(){
$(#sec-content,#branding).animate({top:-=5px},
150).animate({top:+=5px},150);
$(#content).animate({top:-=8px},150).animate({top:+=8px},150);
setTimeout(bounceHim(),300);
}
http://robot.anthonycalzadilla.com/
Once again thanks for your insight. I really am a complete novice at
programming in general. I'm really scrutinizing your code so as to
learn from it.
-Anthony
On Nov 7, 8:34 am, CodingCyborg [EMAIL PROTECTED] wrote:
I just noticed, after looking over the code again, that since you have
all three pieces of the robot that are bouncing bounce at the same
time the line of code can be condensed into one. As well as the two
that bounce together at the beginning.
This:
$(#content).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
$(#branding).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
Becomes this:
$(#content,#branding).animate({top:-=+num+px},
150).animate({top:+=+num+px},150);
And in the next function this:
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=5px},150).animate({top:+=5px},150);
$(#branding).animate({top:-=5px},150).animate({top:+=5px},150);
Becomes this:
$(#sec-content,#content,#branding).animate({top:-=5px},
150).animate({top:+=5px},150);
Of course, if you wished to have each part bounce a different amount
or at different rates you would need to set up different timeouts
with different functions if they couldn't be set with the current 300
ms function. But if you wanted something to go at half speed or a
whole number multiple speed you could just changed how much code was
in the function and the numbers associated with it. (If any of that
makes sense.)
But that saves more code, and again, makes the file a bit (Quite
seriously only a few bits :P) smaller.
On Nov 7, 12:44 am, anthony.calzadilla
[EMAIL PROTECTED] wrote:
Wow! Thank you CodingCyborg! Thank You! I'm going to study and learn
from your code example and implement it into mine.
-Anthony
On Nov 7, 12:24 am, CodingCyborg [EMAIL PROTECTED] wrote:
I made a few more modifications such that the robot doesn't keep
bouncing and the sky keep moving when the ground has stopped. Though I
did the cheap way, in the sense that I just made it a short clip
rather than a full length repeat.
http://codingcyborg.com/jQueryFun/Robot/robot.html
That has the same basic directory set up, but with the modified
script.js file for viewing.
On Nov 6, 11:07 pm, CodingCyborg [EMAIL PROTECTED] wrote:
This is Beautiful! To save yourself from the copy/paste to create
the
repeated bounce, and to make the file smaller, you can simply
replace
the three lines that were enormously long with this:
startHim();
And then add this at the bottom of the js file:
var num = 1;
function startHim(){
num++;
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
$(#branding).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
if(num4){
setTimeout(startHim(),300);
} else {
setTimeout(bounceHim(),300);
}
}
function bounceHim(){
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=5px},150).animate({top:+=5px},150);
$(#branding).animate({top:-=5px},150).animate({top:+=5px},150);
setTimeout(bounceHim(),300);
}
This allows for more control of the looped animation and easier to
edit the bounciness of the robot. That's all I could enhance, if
you
could call it that. It's an amazing display of js and jQuery skills,
and I admire you for that.
On Nov 5, 10:56 pm, anthony.calzadilla
[EMAIL PROTECTED] wrote:
Hi all,
I occasionally volunteer as a guest speaker for the web
[jQuery] Re: animated robot cartoon with jquery
I found the edge of the cliff while allowing the robot to roll
multiple times without resetting the backgrounds. From there I thought
it would be fun to have him fall :) Now I'm looking into adding some
fun sound effects :) I'll let ya know how that goes in a couple
hours...
On Nov 7, 8:58 pm, anthony.calzadilla [EMAIL PROTECTED]
wrote:
Thats incredible! How did you do that?! I'm going to dig into your
code and try to figure it out... AWESOME!
-A
On Nov 7, 8:50 pm, CodingCyborg [EMAIL PROTECTED] wrote:
Well, I decided to add some more fun stuff :)
http://codingcyborg.com/jQueryFun/Robot/robotHumor.html
There are now some movement images on the wheels. And I added an old
school off the cliff cartoon style ending :)
On Nov 7, 11:58 am, anthony.calzadilla
[EMAIL PROTECTED] wrote:
Hi,
I changed the 'bounceHim' function a bit so that the different pieces
of the robot look like they are separated and bouncing individually:
function bounceHim(){
$(#sec-content,#branding).animate({top:-=5px},
150).animate({top:+=5px},150);
$(#content).animate({top:-=8px},150).animate({top:+=8px},150);
setTimeout(bounceHim(),300);
}
http://robot.anthonycalzadilla.com/
Once again thanks for your insight. I really am a complete novice at
programming in general. I'm really scrutinizing your code so as to
learn from it.
-Anthony
On Nov 7, 8:34 am, CodingCyborg [EMAIL PROTECTED] wrote:
I just noticed, after looking over the code again, that since you have
all three pieces of the robot that are bouncing bounce at the same
time the line of code can be condensed into one. As well as the two
that bounce together at the beginning.
This:
$(#content).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
$(#branding).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
Becomes this:
$(#content,#branding).animate({top:-=+num+px},
150).animate({top:+=+num+px},150);
And in the next function this:
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=5px},150).animate({top:+=5px},150);
$(#branding).animate({top:-=5px},150).animate({top:+=5px},150);
Becomes this:
$(#sec-content,#content,#branding).animate({top:-=5px},
150).animate({top:+=5px},150);
Of course, if you wished to have each part bounce a different amount
or at different rates you would need to set up different timeouts
with different functions if they couldn't be set with the current 300
ms function. But if you wanted something to go at half speed or a
whole number multiple speed you could just changed how much code was
in the function and the numbers associated with it. (If any of that
makes sense.)
But that saves more code, and again, makes the file a bit (Quite
seriously only a few bits :P) smaller.
On Nov 7, 12:44 am, anthony.calzadilla
[EMAIL PROTECTED] wrote:
Wow! Thank you CodingCyborg! Thank You! I'm going to study and learn
from your code example and implement it into mine.
-Anthony
On Nov 7, 12:24 am, CodingCyborg [EMAIL PROTECTED] wrote:
I made a few more modifications such that the robot doesn't keep
bouncing and the sky keep moving when the ground has stopped.
Though I
did the cheap way, in the sense that I just made it a short clip
rather than a full length repeat.
http://codingcyborg.com/jQueryFun/Robot/robot.html
That has the same basic directory set up, but with the modified
script.js file for viewing.
On Nov 6, 11:07 pm, CodingCyborg [EMAIL PROTECTED] wrote:
This is Beautiful! To save yourself from the copy/paste to create
the
repeated bounce, and to make the file smaller, you can simply
replace
the three lines that were enormously long with this:
startHim();
And then add this at the bottom of the js file:
var num = 1;
function startHim(){
num++;
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
$(#branding).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
if(num4){
setTimeout(startHim(),300);
} else {
setTimeout(bounceHim(),300);
}
}
function bounceHim(){
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=5px},150).animate({top:+=5px},150);
$(#branding).animate({top:-=5px},150).animate({top:+=5px},150);
[jQuery] Re: animated robot cartoon with jquery
I am sad to report that finding cross browser audio playing javascript
is pretty tough stuff... I found one plug-in that used flash, but
couldn't get it implemented correctly. I may try again tomorrow, but
don't count on it too much, if somebody else could implement some
squeaky wheel sounds for when it's moving that would be nice :) Best
of luck.
On Nov 7, 10:12 pm, CodingCyborg [EMAIL PROTECTED] wrote:
I found the edge of the cliff while allowing the robot to roll
multiple times without resetting the backgrounds. From there I thought
it would be fun to have him fall :) Now I'm looking into adding some
fun sound effects :) I'll let ya know how that goes in a couple
hours...
On Nov 7, 8:58 pm, anthony.calzadilla [EMAIL PROTECTED]
wrote:
Thats incredible! How did you do that?! I'm going to dig into your
code and try to figure it out... AWESOME!
-A
On Nov 7, 8:50 pm, CodingCyborg [EMAIL PROTECTED] wrote:
Well, I decided to add some more fun stuff :)
http://codingcyborg.com/jQueryFun/Robot/robotHumor.html
There are now some movement images on the wheels. And I added an old
school off the cliff cartoon style ending :)
On Nov 7, 11:58 am, anthony.calzadilla
[EMAIL PROTECTED] wrote:
Hi,
I changed the 'bounceHim' function a bit so that the different pieces
of the robot look like they are separated and bouncing individually:
function bounceHim(){
$(#sec-content,#branding).animate({top:-=5px},
150).animate({top:+=5px},150);
$(#content).animate({top:-=8px},150).animate({top:+=8px},150);
setTimeout(bounceHim(),300);
}
http://robot.anthonycalzadilla.com/
Once again thanks for your insight. I really am a complete novice at
programming in general. I'm really scrutinizing your code so as to
learn from it.
-Anthony
On Nov 7, 8:34 am, CodingCyborg [EMAIL PROTECTED] wrote:
I just noticed, after looking over the code again, that since you have
all three pieces of the robot that are bouncing bounce at the same
time the line of code can be condensed into one. As well as the two
that bounce together at the beginning.
This:
$(#content).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
$(#branding).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
Becomes this:
$(#content,#branding).animate({top:-=+num+px},
150).animate({top:+=+num+px},150);
And in the next function this:
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=5px},150).animate({top:+=5px},150);
$(#branding).animate({top:-=5px},150).animate({top:+=5px},150);
Becomes this:
$(#sec-content,#content,#branding).animate({top:-=5px},
150).animate({top:+=5px},150);
Of course, if you wished to have each part bounce a different amount
or at different rates you would need to set up different timeouts
with different functions if they couldn't be set with the current 300
ms function. But if you wanted something to go at half speed or a
whole number multiple speed you could just changed how much code was
in the function and the numbers associated with it. (If any of that
makes sense.)
But that saves more code, and again, makes the file a bit (Quite
seriously only a few bits :P) smaller.
On Nov 7, 12:44 am, anthony.calzadilla
[EMAIL PROTECTED] wrote:
Wow! Thank you CodingCyborg! Thank You! I'm going to study and learn
from your code example and implement it into mine.
-Anthony
On Nov 7, 12:24 am, CodingCyborg [EMAIL PROTECTED] wrote:
I made a few more modifications such that the robot doesn't keep
bouncing and the sky keep moving when the ground has stopped.
Though I
did the cheap way, in the sense that I just made it a short clip
rather than a full length repeat.
http://codingcyborg.com/jQueryFun/Robot/robot.html
That has the same basic directory set up, but with the modified
script.js file for viewing.
On Nov 6, 11:07 pm, CodingCyborg [EMAIL PROTECTED] wrote:
This is Beautiful! To save yourself from the copy/paste to
create the
repeated bounce, and to make the file smaller, you can simply
replace
the three lines that were enormously long with this:
startHim();
And then add this at the bottom of the js file:
var num = 1;
function startHim(){
num++;
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
$(#branding).animate({top:-=+num+px},150).animate({top:+=+num
[jQuery] Re: animated robot cartoon with jquery
It's actually workable to use Flash as a basis for the sound. It's easier
with ActionScript 3.0, but it can still be done in earlier versions. You
have to bind a flash method to an external interface (look up
ExternalInterface in the docs).
Then you can find the object by ID, and call the method on it directly.
$('#swffile')[0].playSound();
JK
-Original Message-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of CodingCyborg
Sent: Friday, November 07, 2008 9:04 PM
To: jQuery (English)
Subject: [jQuery] Re: animated robot cartoon with jquery
I am sad to report that finding cross browser audio playing javascript
is pretty tough stuff... I found one plug-in that used flash, but
couldn't get it implemented correctly. I may try again tomorrow, but
don't count on it too much, if somebody else could implement some
squeaky wheel sounds for when it's moving that would be nice :) Best
of luck.
On Nov 7, 10:12 pm, CodingCyborg [EMAIL PROTECTED] wrote:
I found the edge of the cliff while allowing the robot to roll
multiple times without resetting the backgrounds. From there I thought
it would be fun to have him fall :) Now I'm looking into adding some
fun sound effects :) I'll let ya know how that goes in a couple
hours...
On Nov 7, 8:58 pm, anthony.calzadilla [EMAIL PROTECTED]
wrote:
Thats incredible! How did you do that?! I'm going to dig into your
code and try to figure it out... AWESOME!
-A
On Nov 7, 8:50 pm, CodingCyborg [EMAIL PROTECTED] wrote:
Well, I decided to add some more fun stuff :)
http://codingcyborg.com/jQueryFun/Robot/robotHumor.html
There are now some movement images on the wheels. And I added an old
school off the cliff cartoon style ending :)
On Nov 7, 11:58 am, anthony.calzadilla
[EMAIL PROTECTED] wrote:
Hi,
I changed the 'bounceHim' function a bit so that the different
pieces
of the robot look like they are separated and bouncing individually:
function bounceHim(){
$(#sec-content,#branding).animate({top:-=5px},
150).animate({top:+=5px},150);
$(#content).animate({top:-=8px},150).animate({top:+=8px},150);
setTimeout(bounceHim(),300);
}
http://robot.anthonycalzadilla.com/
Once again thanks for your insight. I really am a complete novice at
programming in general. I'm really scrutinizing your code so as to
learn from it.
-Anthony
On Nov 7, 8:34 am, CodingCyborg [EMAIL PROTECTED] wrote:
I just noticed, after looking over the code again, that since you
have
all three pieces of the robot that are bouncing bounce at the same
time the line of code can be condensed into one. As well as the
two
that bounce together at the beginning.
This:
$(#content).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
$(#branding).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
Becomes this:
$(#content,#branding).animate({top:-=+num+px},
150).animate({top:+=+num+px},150);
And in the next function this:
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=5px},150).animate({top:+=5px},150);
$(#branding).animate({top:-=5px},150).animate({top:+=5px},150);
Becomes this:
$(#sec-content,#content,#branding).animate({top:-=5px},
150).animate({top:+=5px},150);
Of course, if you wished to have each part bounce a different
amount
or at different rates you would need to set up different
timeouts
with different functions if they couldn't be set with the current
300
ms function. But if you wanted something to go at half speed or a
whole number multiple speed you could just changed how much code
was
in the function and the numbers associated with it. (If any of
that
makes sense.)
But that saves more code, and again, makes the file a bit (Quite
seriously only a few bits :P) smaller.
On Nov 7, 12:44 am, anthony.calzadilla
[EMAIL PROTECTED] wrote:
Wow! Thank you CodingCyborg! Thank You! I'm going to study and
learn
from your code example and implement it into mine.
-Anthony
On Nov 7, 12:24 am, CodingCyborg [EMAIL PROTECTED] wrote:
I made a few more modifications such that the robot doesn't
keep
bouncing and the sky keep moving when the ground has stopped.
Though I
did the cheap way, in the sense that I just made it a short
clip
rather than a full length repeat.
http://codingcyborg.com/jQueryFun/Robot/robot.html
That has the same basic directory set up, but with the
modified
script.js file for viewing.
On Nov 6, 11:07 pm, CodingCyborg [EMAIL PROTECTED]
wrote:
This is Beautiful! To save yourself from the copy/paste to
create the
repeated bounce, and to make the file smaller, you can
[jQuery] Re: animated robot cartoon with jquery
Pretty cool! -- Ariel Flesler http://flesler.blogspot.com On Nov 6, 2:56 am, anthony.calzadilla [EMAIL PROTECTED] wrote: Hi all, I occasionally volunteer as a guest speaker for the web design class at my child's elementary school. I wanted to introduce them to jquery and html in a fun way so I created an animated jquery 'robot'. Now, I'm not really adept at javascript or any type of programming at all. I'm a designer turned wannabe' web developer :) I used multiple divs and transparent png's to create the different parts of the parallax background and the bouncing robot. The code I was able to piece together to make it work is absolutely horrendous, even for me. I was hoping maybe some of you jquery masters might be able to take a looksy and help me out? The url is: robot.anthonycalzadilla.com (I would just post the code but its so long it wouldn't be visibly viable) Anthony [EMAIL PROTECTED]
[jQuery] Re: animated robot cartoon with jquery
Great job, Anthony! Unfortunately, I'm new to jQuery and Javascript, too, so I'm of no use to you on the code. Hope you presentation goes well! Rick anthony.calzadilla wrote: Hi all, I occasionally volunteer as a guest speaker for the web design class at my child's elementary school. I wanted to introduce them to jquery and html in a fun way so I created an animated jquery 'robot'. Now, I'm not really adept at javascript or any type of programming at all. I'm a designer turned wannabe' web developer :) I used multiple divs and transparent png's to create the different parts of the parallax background and the bouncing robot. The code I was able to piece together to make it work is absolutely horrendous, even for me. I was hoping maybe some of you jquery masters might be able to take a looksy and help me out? The url is: robot.anthonycalzadilla.com (I would just post the code but its so long it wouldn't be visibly viable) Anthony [EMAIL PROTECTED] --- Text inserted by Panda IS 2009: This message has NOT been classified as spam. If it is unsolicited mail (spam), click on the following link to reclassify it: http://localhost:6083/Panda?ID=pav_448SPAM=truepath=C:\Documents%20and%20Settings\Rick%20Faircloth\Local%20Settings\Application%20Data\Panda%20Security\Panda%20Internet%20Security%202009\AntiSpam ---
[jQuery] Re: animated robot cartoon with jquery
Anthony That is a great bit of work - now the question, educator to educator, would you mind me taking your code apart and showing my students? Adrian
[jQuery] Re: animated robot cartoon with jquery
This is Beautiful! To save yourself from the copy/paste to create the
repeated bounce, and to make the file smaller, you can simply replace
the three lines that were enormously long with this:
startHim();
And then add this at the bottom of the js file:
var num = 1;
function startHim(){
num++;
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
$(#branding).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
if(num4){
setTimeout(startHim(),300);
} else {
setTimeout(bounceHim(),300);
}
}
function bounceHim(){
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=5px},150).animate({top:+=5px},150);
$(#branding).animate({top:-=5px},150).animate({top:+=5px},150);
setTimeout(bounceHim(),300);
}
This allows for more control of the looped animation and easier to
edit the bounciness of the robot. That's all I could enhance, if you
could call it that. It's an amazing display of js and jQuery skills,
and I admire you for that.
On Nov 5, 10:56 pm, anthony.calzadilla
[EMAIL PROTECTED] wrote:
Hi all,
I occasionally volunteer as a guest speaker for the web design class
at my child's elementary school. I wanted to introduce them to jquery
and html in a fun way so I created an animated jquery 'robot'. Now,
I'm not really adept at javascript or any type of programming at all.
I'm a designer turned wannabe' web developer :)
I used multiple divs and transparent png's to create the different
parts of the parallax background and the bouncing robot. The code I
was able to piece together to make it work is absolutely horrendous,
even for me. I was hoping maybe some of you jquery masters might be
able to take a looksy and help me out?
The url is: robot.anthonycalzadilla.com
(I would just post the code but its so long it wouldn't be visibly
viable)
Anthony
[EMAIL PROTECTED]
[jQuery] Re: animated robot cartoon with jquery
I made a few more modifications such that the robot doesn't keep
bouncing and the sky keep moving when the ground has stopped. Though I
did the cheap way, in the sense that I just made it a short clip
rather than a full length repeat.
http://codingcyborg.com/jQueryFun/Robot/robot.html
That has the same basic directory set up, but with the modified
script.js file for viewing.
On Nov 6, 11:07 pm, CodingCyborg [EMAIL PROTECTED] wrote:
This is Beautiful! To save yourself from the copy/paste to create the
repeated bounce, and to make the file smaller, you can simply replace
the three lines that were enormously long with this:
startHim();
And then add this at the bottom of the js file:
var num = 1;
function startHim(){
num++;
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
$(#branding).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
if(num4){
setTimeout(startHim(),300);
} else {
setTimeout(bounceHim(),300);
}
}
function bounceHim(){
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=5px},150).animate({top:+=5px},150);
$(#branding).animate({top:-=5px},150).animate({top:+=5px},150);
setTimeout(bounceHim(),300);
}
This allows for more control of the looped animation and easier to
edit the bounciness of the robot. That's all I could enhance, if you
could call it that. It's an amazing display of js and jQuery skills,
and I admire you for that.
On Nov 5, 10:56 pm, anthony.calzadilla
[EMAIL PROTECTED] wrote:
Hi all,
I occasionally volunteer as a guest speaker for the web design class
at my child's elementary school. I wanted to introduce them to jquery
and html in a fun way so I created an animated jquery 'robot'. Now,
I'm not really adept at javascript or any type of programming at all.
I'm a designer turned wannabe' web developer :)
I used multiple divs and transparent png's to create the different
parts of the parallax background and the bouncing robot. The code I
was able to piece together to make it work is absolutely horrendous,
even for me. I was hoping maybe some of you jquery masters might be
able to take a looksy and help me out?
The url is: robot.anthonycalzadilla.com
(I would just post the code but its so long it wouldn't be visibly
viable)
Anthony
[EMAIL PROTECTED]
[jQuery] Re: animated robot cartoon with jquery
Hi Adrian, Please feel free to use whatever you like, nothing could please me more. Education is taking such a hit these days I think we all have to pitch in a little... -Anthony On Nov 6, 9:38 pm, Adrian Gould [EMAIL PROTECTED] wrote: Anthony That is a great bit of work - now the question, educator to educator, would you mind me taking your code apart and showing my students? Adrian
[jQuery] Re: animated robot cartoon with jquery
Wow! Thank you CodingCyborg! Thank You! I'm going to study and learn
from your code example and implement it into mine.
-Anthony
On Nov 7, 12:24 am, CodingCyborg [EMAIL PROTECTED] wrote:
I made a few more modifications such that the robot doesn't keep
bouncing and the sky keep moving when the ground has stopped. Though I
did the cheap way, in the sense that I just made it a short clip
rather than a full length repeat.
http://codingcyborg.com/jQueryFun/Robot/robot.html
That has the same basic directory set up, but with the modified
script.js file for viewing.
On Nov 6, 11:07 pm, CodingCyborg [EMAIL PROTECTED] wrote:
This is Beautiful! To save yourself from the copy/paste to create the
repeated bounce, and to make the file smaller, you can simply replace
the three lines that were enormously long with this:
startHim();
And then add this at the bottom of the js file:
var num = 1;
function startHim(){
num++;
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
$(#branding).animate({top:-=+num+px},150).animate({top:+=+num
+px},150);
if(num4){
setTimeout(startHim(),300);
} else {
setTimeout(bounceHim(),300);
}
}
function bounceHim(){
$(#sec-content).animate({top:-=5px},150).animate({top:+=5px},
150);
$(#content).animate({top:-=5px},150).animate({top:+=5px},150);
$(#branding).animate({top:-=5px},150).animate({top:+=5px},150);
setTimeout(bounceHim(),300);
}
This allows for more control of the looped animation and easier to
edit the bounciness of the robot. That's all I could enhance, if you
could call it that. It's an amazing display of js and jQuery skills,
and I admire you for that.
On Nov 5, 10:56 pm, anthony.calzadilla
[EMAIL PROTECTED] wrote:
Hi all,
I occasionally volunteer as a guest speaker for the web design class
at my child's elementary school. I wanted to introduce them to jquery
and html in a fun way so I created an animated jquery 'robot'. Now,
I'm not really adept at javascript or any type of programming at all.
I'm a designer turned wannabe' web developer :)
I used multiple divs and transparent png's to create the different
parts of the parallax background and the bouncing robot. The code I
was able to piece together to make it work is absolutely horrendous,
even for me. I was hoping maybe some of you jquery masters might be
able to take a looksy and help me out?
The url is: robot.anthonycalzadilla.com
(I would just post the code but its so long it wouldn't be visibly
viable)
Anthony
[EMAIL PROTECTED]
