I have two javascripts I want to run at the same time, to create a layered animation. Both, are essentially the same script, but with different settings
I use <body onload="animate(); ch();"> to load each function.
separately, both loops work fine. when i try to run both at the same time, whichever is first in the document runs fine, but the second will not run.
I am new to jsfiddle, but jsfiddle balks about use of document.write and I have no idea how to include more than one javascript into jsfiddle.
both scripts are loops, and should loop indefinitely. separately, here is what each should look like: http://nanocluster.umeche.maine.edu/scope/
UPDATE: HTML Source:
http://nanocluster.umeche.maine.edu/scope/saw.html
Can someone point out how I can have both scripts looping at the same time?
<!DOCTYPE html><html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="http://www.hackmaine.org/favicon.ico">
<link rel="stylesheet" type="text/css" href="main.css">
<title>Epic Lulz</title>
<style> p.ex {color:rgb(0,0,0);}</style>
</head>
<body onload="animate(); ch();">
<script type="text/javascript" src="animate.js"></script>
<script type="text/javascript" src="ch.js"></script>
<div id="background">
<pre>
+---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
+---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
+---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
+---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
+---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+
_____________________________________________________________________________________________________
t1:288 ms t2:480 ms Display Mode: Normal: Peak Detect Vectors: OFF Grid = FULL
</pre>
</div>
<div class="container" style=" visibility: hidden; color: rgb(254, 0, 0);" id="cat1">
<pre>
┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐
│ │ │ │ │ │ │ │ │ │ │ │ │ │
──┘ └────┘ └────┘ └────┘ └────┘ └────┘ └────┘
</pre></div>
<div class="container" style=" visibility: hidden; color: rgb(254, 0, 0);" id="cat2">
<pre>
┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐
│ │ │ │ │ │ │ │ │ │ │ │ │ │
└────┘ └────┘ └────┘ └────┘ └────┘ └────┘ └──
</pre></div>
<div class="container" style="visibility: hidden; color: rgb(254, 0, 0);" id="cat3">
<pre>
┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐
│ │ │ │ │ │ │ │ │ │ │ │ │ │
──┘ └────┘ └────┘ └────┘ └────┘ └────┘ └────┘
</pre></div>
<div class="container" style="visibility: hidden; color: rgb(254, 0, 0);" id="cat4">
<pre>
┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐
│ │ │ │ │ │ │ │ │ │ │ │ │ │
└────┘ └────┘ └────┘ └────┘ └────┘ └────┘ └──
</pre></div>
<div class="container" style=" visibility: hidden; color: rgb(254, 0, 0);" id="cat5">
<pre>
┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐
│ │ │ │ │ │ │ │ │ │ │ │ │ │
──┘ └────┘ └────┘ └────┘ └────┘ └────┘ └────┘
</pre></div>
<div class="test" style="visibility: hidden; color: rgb(0, 0, 254);" id="cat1">
<pre>
Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ
\ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ /
V V V V V V V V V V V V V V V V V V V V
</pre></div>
<div class="test" style="visibility: hidden; color: rgb(0, 0, 254);" id="cat2">
<pre>
Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ
/ \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \
V V V V V V V V V V V V V V V V V V V V \
</pre></div>
<div class="test" style="visibility: hidden; color: rgb(0, 0, 254);" id="cat3">
<pre>
Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ
\ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \
V V V V V V V V V V V V V V V V V V V V
</pre></div>
<div class="test" style="visibility: hidden; color: rgb(0, 0, 254);" id="cat4">
<pre>
Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ
\ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ /
V V V V V V V V V V V V V V V V V V V V
</pre></div>
<div class="test" style="visibility: hidden; color: rgb(0, 0, 254);" id="cat5">
<pre>
Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ Λ
/ \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \
V V V V V V V V V V V V V V V V V V V V \
</pre></div>
</body></html>
