This forum is now read-only. Please use our new forums at discuss.codecademy.com.

Animate Your Name Forum

View Course

705 points
Fb6d6f1dd7bdf8160f753f8f20c5f259?s=140&d=retro
Submitted by
Sebastián
over 3 years ago

[resolved] How do I make this with 3 lines of text?

I want it to look like this:

Line1

Line2

Line3

What I've tried so far:

Created 3 separate divs, all looking like this:

<div id="one" style="position:absolute; top:0px; left:0px;">
<canvas id="myCanvas" width="500" height="200">
<script type="text/javascript" src="source1.js"></script>
<script type="text/javascript" src="script1.js"></script>
</canvas>
</div>

Where source1.js is just my copy of /http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/bubbles.js and script1.js is my copy of main.js, with all the variables and functions inside it. (I saved them onto my desktop so that I can easily edit 6 separate js files using Text Wrangler; Codecademy only lets you use one js file.)

Div 'one', source1.js, script1.js, #myCanvas are for the first line. Div 'two', source2.js, script2.js, and #myCanvasTwo are for the second, etc.

My logic is that I need three different pairs of scripts in order to write out three animated lines of text.

But it's not working! I know I'm making the divs correctly, because when I insert

<p>Div Two</p>

into the second div (outside the <canvas> and <script> tags) it shows up. So I can't get my animated text to display inside those separate divs even though I've made them. They just go on top of each other instead of how I want them to.

Anybody have any idea how to do this? Thanks!


0 votes

permalink

The best way to do this is modification of bubbles.js by adding extra parameter to drawName function (canvas id). And I will prepare this file for you but in Poland is now 03:32 so I'm tired and I can not think clearly.

The best way to do that without editing external scripts is use of <iframe>. Here you can find archive with example implementation - https://copy.com/vtbCjrI3Dfxo.
index.html - main file
style.css - simple css reset
1.html, 2.html, 3.html - iframe files

2375 points
571828824b7f51f26c000619_875219903
Submitted by
Maciej Wiercioch
over 3 years ago

2 Comments

Fb6d6f1dd7bdf8160f753f8f20c5f259?s=140&d=retro Sebastián over 3 years ago

OMG Thank you soooo much!!!! I appreciate your help a lot!!!! (I'm making a e-card for my friends bday!)

I hope it's not too much to ask, but can you also walk me through how you programmed/made the modifications?

Fb6d6f1dd7bdf8160f753f8f20c5f259?s=140&d=retro Sebastián over 3 years ago

also, how did you get index.html to display stuff from the other html files? I don't see any reference to them...


0 votes

permalink

Not a problem. I'm working on bubbles.js right now, so you will be able to use same function multiple times, but I need few more hours (this is not so easy) :)

Ok, so body of index.html contains only 3 <iframe> objects, they are used to display content from other html files. You can read more about them here - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe .

Files 1, 2, 3 contain normal code for animated name and they are using same .js files. But because they are placed in other files after opening of index.html every drawName function is executed only in iframe window (something like multithreading).

Every .html file is using style.css. This file contains only css reset, used to remove default browser css.

I'll try to modify bubbles.js as soon as possible. At this moment I fixed problem with mouse cordinates (now they are relative to client and they are calculated with offset), fuction drawName takes extra parameter - canvas, and half of a file is object drawName (thanks to that we will be able to use it multiple times).

2375 points
571828824b7f51f26c000619_875219903
Submitted by
Maciej Wiercioch
over 3 years ago

3 Comments

Fb6d6f1dd7bdf8160f753f8f20c5f259?s=140&d=retro Sebastián over 3 years ago

Wow! When I decided to do this I thought it'd be easier than this...haha

From the way it is now, it works fine (at least that's how it looks to me; it's doing exactly what I've been wanting it to do.)

I hope you're having fun solving this though, since you're putting so much time into it. You have no clue how much I appreciate it!

571828824b7f51f26c000619_875219903 Maciej Wiercioch over 3 years ago

This is one of the most interesting tasks since I'm here :) Really, not a problem, I'm glad I could help :) And thanks to AlbionsRefuge, he drew my attention to your question (http://www.codecademy.com/groups/advanced-javascript-coders/discussions/52ffefc552f863da32003cc5#response-530515e98c1cccb685000308)

55df2afa95e3787b9200005e_359368177 Judy over 3 years ago

Thank you for helping Maciej, and I'm glad you are finding it interesting too.