This forum is now read-only. Please use our new forums! Go to forums

0 points
Submitted by Sebastián
about 10 years

[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:

`

`

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!

Answer 53056931631fe90044000b1b

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

points
Submitted by Maciej Wiercioch
about 10 years

2 comments

Sebastián about 10 years

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?

Sebastián about 10 years

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

Answer 53063def52f8639b83000252

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).

points
Submitted by Maciej Wiercioch
about 10 years

3 comments

Sebastián about 10 years

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!

Maciej Wiercioch about 10 years

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)

Judy about 10 years

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