projects / string-lerp.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 0e8c216)
Improvements to demo layout/behavior.
authorJoe Wreschnig <joe.wreschnig@gmail.com>
Wed, 14 May 2014 09:01:17 +0000 (11:01 +0200)
committerJoe Wreschnig <joe.wreschnig@gmail.com>
Wed, 14 May 2014 09:01:17 +0000 (11:01 +0200)
demo.html patch | blob | history

diff --git a/demo.html b/demo.html
index 8506eb788bf6b32dd7f07351dd9b6d9b3273edcd..9d8e4a7afa91f1d4a47dc1f5036ff5c693ae6500 100644 (file)
--- a/demo.html
+++ b/demo.html
@@ -7,13 +7,14 @@
       input[type=text] {
       width: 40%;
       display: table-cell;
       input[type=text] {
       width: 40%;
       display: table-cell;
-      margin: 2.5%;
+      margin-left: 5%;
       text-align: center;
       }
     </style>
     <script type="text/javascript" src="string-lerp.js"></script>
     <script>
       text-align: center;
       }
     </style>
     <script type="text/javascript" src="string-lerp.js"></script>
     <script>
-      function update (p) {
+      function update () {
+          var p = +document.getElementById("slider").value;
           var a = document.getElementById("a");
           var b = document.getElementById("b");
           var e = document.getElementById("text");
           var a = document.getElementById("a");
           var b = document.getElementById("b");
           var e = document.getElementById("text");
@@ -21,13 +22,19 @@
       }
     </script>
   </head>
       }
     </script>
   </head>
-  <body onload="update(0.5)">
-    <div style="width: 70%; margin: 3em auto; column-spacing: 10%;">
+  <body onload="update()">
+    <div style="text-align: center; margin: 1em">
+      Enter source and target text, and drag the slider to interpolate
+      between the two.
+    </div>
+    <div style="width: 70%; margin: auto; column-spacing: 10%;">
       <input type="text" id="a" value="Do you like green eggs and ham?">
       <input type="text" id="b" value="I do not like them, Sam-I-am.">
     </div>
       <input type="text" id="a" value="Do you like green eggs and ham?">
       <input type="text" id="b" value="I do not like them, Sam-I-am.">
     </div>
-    <div id="text" style="font-size: 3em; text-align: center;"></div>
-    <input type="range" value=0.5 max=1.00 step=0.00390625 oninput="update(this.value);"
-           style="width: 80%; margin: 3em auto; display: block;">
+    <input id="slider" type="range" value=0.5 max=1.00 step=0.00390625
+           oninput="update();"
+           style="width: 80%; margin: 2em auto; display: block;">
+    <div id="text" style="width: 75%; margin: auto; font-size: 2em; text-align: center">
+    </div>
   </body>
 </html>
   </body>
 </html>
String Lerp