This forum is now read-only. Please use our new forums! Go to forums
[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
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
Answer 53063def52f8639b83000252
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).
3 comments
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!
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)
Thank you for helping Maciej, and I’m glad you are finding it interesting too.
Popular free courses
- Free Course
Learn SQL
In this SQL course, you'll learn how to manage large datasets and analyze real data using the standard data management language.Beginner friendly,4 LessonsLanguage Fluency - Free Course
Learn JavaScript
Learn how to use JavaScript — a powerful and flexible programming language for adding website interactivity.Beginner friendly,11 LessonsLanguage Fluency - Free Course
Learn HTML
Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.Beginner friendly,6 LessonsLanguage Fluency
2 comments
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?
also, how did you get index.html to display stuff from the other html files? I don’t see any reference to them…