projects
/
string-lerp.git
/ blobdiff
commit
grep
author
committer
pickaxe
?
search:
re
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
Distribution-generating makefile targets.
[string-lerp.git]
/
demo.html
diff --git
a/demo.html
b/demo.html
index
8506eb7
..
9d8e4a7
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>