/
skim.html
79 lines (78 loc) · 1.92 KB
/
skim.html
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
68
69
70
71
72
73
74
75
76
77
78
79
<html>
<head>
<title>Skim it!</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="js/jquery.touchSwipe.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.chunk {
position: absolute;
top: 0;
right: 0;
}
.two, .three, .four {
/*display: none;*/
}
.one {
background-color: red;
z-index: 100;
}
.two {
background-color: blue;
z-index: 90;
}
.three {
background-color: green;
z-index: 80;
}
.four {
background-color: yellow;
z-index: 70;
}
</style>
</head>
<body>
<div class="chunk one"></div>
<div class="chunk two"></div>
<div class="chunk three"></div>
<div class="chunk four"></div>
<script type="text/javascript">
var width = $( window ).width();
var height = $( window ).height();
$('.chunk').css("width", width + 'px');
$('.chunk').css("height", height + 'px');
var chunks = ["one", "two", "three", "four"];
$(".chunk").swipe({
swipe:function(event, direction, distance, duration, fingerCount) {
theclass = $(this).attr('class').split(" ")[1];
if (direction == "left") {
if (theclass != chunks[chunks.length - 1]) {
console.log('xx')
$(this).toggle( "slide" );
} else {
console.log('last')
$('.' + chunks[0]).toggle('slide', function(){
$('.chunk').show();
});
}
}
if (direction == "right") {
for ( i = 0; i < chunks.length; i++ ) {
if (theclass == chunks[i]) {
moveto = i - 1;
$('.' + chunks[moveto]).toggle('slide');
}
}
}
},
//Default is 75px, set to 0 for demo so any distance triggers swipe
threshold:0
});
</script>
</body>
</html>