xxxxxxxxxx
<meta charset="utf-8">
<style>
.falling{
position: relative;
display: inline-block;
}
#text-diff div, #width-calc div{
float: left;
}
#width-calc{
top: -10000000px !important;
position: absolute;
}
#text-diff, #width-calc{
font-size: 130%;
max-width: 600px;
padding-left: 100px;
height: 300px;
}
.slider {
position: relative;
top: 40px;
left: 40px;
cursor: pointer;
}
.slider-tray {
position: absolute;
width: 100%;
height: 6px;
border: solid 1px #ccc;
border-top-color: #aaa;
border-radius: 4px;
background-color: #f0f0f0;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}
.slider-handle {
position: absolute;
top: 3px;
}
.slider-handle-icon {
width: 14px;
height: 14px;
border: solid 1px #aaa;
position: absolute;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
top: -7px;
left: -7px;
}
#play-button{
cursor: pointer;
}
</style>
<body>
<!--
<h3>Word Diff</h3>
<div id='word-diff'></div>
-->
<!-- <h3>Falling not fixed</h3> -->
<div id='text-diff'></div>
<div id='width-calc'></div>
<div class='slider'></div>
<div style='margin-bottom: 50px;'>Current index: <span id='curindex'></span></div>
<div id='play-button'>►❙❙</div>
</body>
<script src="/1wheel/raw/67b47524ed8ed829d021/d3-3.5.5.js"></script>
<script src="/1wheel/raw/67b47524ed8ed829d021/lodash-3.8.0.js"></script>
<script src='/1wheel/raw/1b6758978dc2d52d3a37/d3-jetpack.js'></script>
<script src='/1wheel/raw/1b6758978dc2d52d3a37/d3-starterkit.js'></script>
<script src='diff.js'></script>
<script src='text-diff.js'></script>