1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>OpenShot Timeline</title>
<link type="text/css" href="css/ui-darkness/jquery-ui-1.8.23.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Sync scrollbars
var scrolling_tracks = $("#scrolling_tracks");
var scrolling_ruler = $("#scrolling_ruler");
scrolling_tracks.scroll(function () {
scrolling_ruler.scrollLeft($(this).scrollLeft());
});
// Make all clips draggable
$(".clip").draggable({ snap: ".track", snapMode: "inner" });
$(".clip").resizable({ handles: "e, w" });
});
</script>
<style type="text/css">
body { margin: 0px; }
#fixed_timeline { width: 140px; position: relative; float: left; }
#scrolling_ruler { overflow: hidden; position: relative; margin-bottom: 4px; }
#scrolling_tracks { height: 200px; overflow: scroll; position: relative; }
#ruler_label { height: 39px; width: 100%; background-image: url(images/ruler.png); margin-bottom: 4px; }
#ruler_ticks { height: 39px; width: 30000px; background-image: url(images/ruler_ticks.png); }
#ruler_time { font-family: Sans; font-size: 12pt; color: #c8c8c8; padding-top: 10px; padding-left: 20px;}
.track_name { width: 100%; height: 55px; font-family: Sans; font-size: 9pt; margin-left: 5px; margin-bottom: 8px; background: -webkit-linear-gradient(top, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); border-top: 1px solid silver; border-bottom: 1px solid silver; border-left: 1px solid silver; border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.track { width: 30000px; height: 55px; background-color: silver; margin-bottom: 8px; background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); border-top: 1px solid silver; border-bottom: 1px solid silver; }
.clip { width: 200px; height: 55px; position: absolute; left: 100px; font-family: Sans; font-size: 9pt; background: -webkit-linear-gradient(top, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); border-radius: 8px; border: 1px solid #e8b13b; }
</style>
</head>
<body>
<div id="fixed_timeline">
<div id="ruler_label">
<div id="ruler_time">00:00:00:000</div>
</div>
<div id="1" class="track_name">Track 1</div>
<div id="2" class="track_name">Track 2</div>
<div id="3" class="track_name">Track 3</div>
</div>
<div id="scrolling_ruler">
<div id="ruler_ticks"></div>
</div>
<div id="scrolling_tracks">
<div id="4" class="track">
<div id="7" class="clip">Clip 1</div>
</div>
<div id="5" class="track">
<div id="8" class="clip">Clip 2</div>
</div>
<div id="6" class="track"></div>
</div>
</body>
</html>
|