-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathDemo.html
165 lines (131 loc) · 5.72 KB
/
Demo.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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Panner demo page</title>
<!-- Include Mootools and Panner -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="Source/Panner.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
// First basic example
$('content').panner();
// Large image example
$('photo').panner({ center: true });
});
</script>
<style type="text/css">
/* These rules are not necessary to make Panner work.
* They are here only to style this demo page. */
body {
font-family: sans-serif;
font-size: 13px;
text-align: center;
}
#wrapper {
margin: 0 auto;
text-align: left;
width: 622px;
}
div {
margin: 20px 10px;
}
div.example {
background-color: #999999;
border: 1px solid #333333;
margin: 10px;
}
div.example>div {
margin: 0;
padding: 0;
background-color: #333333;
}
div.example>div>.bit {
float: left;
font-size: 14px;
height: 160px;
width: 160px;
line-height: 23px;
margin: 10px 0 0 10px;
color: #dddddd;
text-shadow: 1px 1px 0 #000000;
}
div.example>div>.bit>img {
box-shadow: 4px 4px 0 #222222;
}
p {
color: #666666;
margin: 20px 10px;
clear: both;
}
p b {
color: #333333;
}
a {
font-weight: bold;
color: #3344FF;
}
a:hover {
font-weight: bold;
color: #6677FF;
}
pre {
font-size: 12px;
padding: 10px 15px;
background-color: #eeffef;
border: 1px solid #cceedf;
margin: 10px;
width: 570px;
}
pre.javascript {
background-color: #eeefff;
border: 1px solid #ccdfee;
}
</style>
</head>
<body>
<div id="wrapper">
<div><h1>Panner demo page</h1></div>
<p>
<b>Content panning</b> based on mouse movement, a cool way to replace
<b>scrolling</b> for large images or full pages.
Requires Mootools Core 1.4.1 or later.
Download and HowTo on <a href="http://mootools.net/forge/p/panner">Mootools Forge</a>, sources and issues on
<a href="https://github.com/lorenzos/Panner">GitHub</a>, full documentation
<a href="https://github.com/lorenzos/Panner#docs">here</a>.
</p>
<p><b>Basic example</b>, large content panning <i>(note that content is bigger than its container!)</i>:</p>
<div class="example" style="width: 600px; height: 200px;">
<div id="content" style="width: 1200px; height: 520px;">
<div class="bit" style="width: 330px; font-family: serif; line-height: 31px; font-size: 22px;">Arduino is an open-source microcontroller designed to make the process of using electronics in multidisciplinary projects more accessible. </div>
<div class="bit"><img src="Graphics/Examples/arduino_small.jpg"></div>
<div style="width: 320px; padding-left: 10px;" class="bit">Arduino hardware is programmed using a Wiring-based language (syntax and libraries), similar to C++ with some slight simplifications and modifications, and a Processing-based integrated development environment.</div>
<div class="bit" style="width: 330px;"><img src="Graphics/Examples/arduino_connected.jpg"></div>
<div class="bit" style="height: 330px; width: 330px;"><img src="Graphics/Examples/arduino_macro.jpg"></div>
<div style="width: 310px; padding-left: 10px; padding-right: 10px;" class="bit"> The hardware consists of a simple open hardware design for the Arduino board with an Atmel AVR processor and on-board input/output support. The software consists of a standard programming language compiler and the boot loader that runs on the board.</div>
<div class="bit" style="width: 500px; font-family: serif; font-size: 32px; line-height: 39px;">The Arduino project received an honorary mention in the Digital Communities category at the 2006 Prix Ars Electronica.</div>
<div style="width: 480px; padding-left: 10px; padding-right: 10px;" class="bit">The Arduino hardware reference designs are distributed under a Creative Commons Attribution Share-Alike 2.5 license and are available on the Arduino Web site. Layout and production files for some versions of the Arduino hardware are also available. The source code for the IDE and the on-board library are available and released under the GPLv2 license.</div>
<div class="bit" style="width: 330px;">Arduino and Arduino-compatible boards make use of shields, which are printed circuit boards that sit atop an Arduino, and plug into the normally supplied pin-headers. These are expansions to the base Arduino. There are many functions of shields, from motor controls, to breadboarding (prototyping).</div>
</div>
</div>
<pre class="html"><div style="width: 600px; height: 200px;">
<div id="content" style="width: 1200px; height: 600px;">
[...]
</div>
</div></pre>
<pre class="javascript">$('content').panner();</pre>
<p><b>Large image</b> example (the <i>center</i> option is used to place the image in the center initially):</p>
<div class="example" style="width: 600px; height: 200px;">
<img id="photo" width="1280" height="960" src="Graphics/Examples/arduino.jpg">
</div>
<pre class="html"><div style="width: 600px; height: 200px;">
<img id="photo" width="1200" height="600" src="arduino.jpg">
</div></pre>
<pre class="javascript">$('photo').panner({ center: true });</pre>
<p>
Sample text from <a href="http://en.wikipedia.org/wiki/Arduino" target="_blank">Wikipedia</a>.
All photos are released into the public domain.
</p>
</div>
</body>
</html>