Subversion-Projekte lars-tiefland.cienc

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
8 lars 1 
/*
2 
 * simplyScroll 2 - a scroll-tastic jQuery plugin
3 
 *
4 
 * http://logicbox.net/jquery/simplyscroll
5 
 *
6 
 * Copyright (c) 2009-2012 Will Kelly - http://logicbox.net
7 
 *
8 
 * Dual licensed under the MIT and GPL licenses.
9 
 *
10 
 * Last revised: 31/01/2012
11 
 *
12 
 */
13 
 
14 
/* Default/Master classes
15 
 
16 
Example markup format (for horizontal scroller)
17 
Note all DIVs are generated and should not be hard-coded
18 
 
19 
<div class="your-custom-class simply-scroll-container">
20 
	<div class="simply-scroll-btn simply-scroll-btn-left"></div>
21 
	<div class="simply-scroll-btn simply-scroll-btn-right"></div>
22 
	<div class="simply-scroll-clip">
23 
		<ul class="simply-scroll-list">
24 
			<li>...</li>
25 
			...
26 
		</ul>
27 
	</div>
28 
</div>
29 
 
30 
 
31 
*/
32 
 
33 
.simply-scroll-container { /* Container DIV - automatically generated */
34 
	position: relative;
35 
}
36 
 
37 
	.simply-scroll-clip { /* Clip DIV - automatically generated */
38 
		position: relative;
39 
		overflow: hidden;
40 
	}
41 
 
42 
	.simply-scroll-list { /* UL/OL/DIV - the element that simplyScroll is inited on */
43 
		overflow: hidden;
44 
		margin: 0;
45 
		padding: 0;
46 
		list-style: none;
47 
	}
48 
 
49 
		.simply-scroll-list li {
50 
			padding:0;
51 
			margin: 0;
52 
			list-style: none;
53 
            vertical-align:middle;
54 
            text-align:center!important;
55 
            width:100px;
56 
		}
57 
 
58 
		.simply-scroll-list li img {
59 
			border: none;
60 
			display: block;
61 
            margin:auto;
62 
		}
63 
 
64 
	.simply-scroll-btn {
65 
		position: absolute;
66 
		background-image: url(buttons.png);
67 
		width: 42px;
68 
		height: 44px;
69 
		z-index:3;
70 
		cursor: pointer;
71 
	}
72 
 
73 
	.simply-scroll-btn-left {
74 
		left: 6px;
75 
		bottom: 6px;
76 
		background-position: 0 -44px;
77 
	}
78 
	.simply-scroll-btn-left.disabled {
79 
		background-position: 0 0 !important;
80 
	}
81 
	.simply-scroll-btn-left:hover, .simply-scroll-btn-left:focus {
82 
		background-position: 0 -88px;
83 
	}
84 
 
85 
	.simply-scroll-btn-right {
86 
		right: 6px;
87 
		bottom: 6px;
88 
		background-position: -84px -44px;
89 
	}
90 
	.simply-scroll-btn-right.disabled {
91 
		background-position: -84px 0 !important;
92 
	}
93 
	.simply-scroll-btn-right:hover, .simply-scroll-btn-right:focus {
94 
		background-position: -84px -88px;
95 
	}
96 
 
97 
	.simply-scroll-btn-up {
98 
		right: 6px;
99 
		top: 6px;
100 
		background-position: -126px -44px;
101 
	}
102 
	.simply-scroll-btn-up.disabled {
103 
		background-position: -126px 0 !important;
104 
	}
105 
	.simply-scroll-btn-up:hover, .simply-scroll-btn-up:focus {
106 
		background-position: -126px -88px;
107 
	}
108 
 
109 
	.simply-scroll-btn-down {
110 
		right: 6px;
111 
		bottom: 6px;
112 
		background-position: -42px -44px;
113 
	}
114 
	.simply-scroll-btn-down.disabled {
115 
		background-position: -42px 0 !important;
116 
	}
117 
	.simply-scroll-btn-down:hover, .simply-scroll-btn-down:focus {
118 
		background-position: -42px -88px;
119 
	}
120 
 
121 
	.simply-scroll-btn-pause {
122 
		right: 6px;
123 
		bottom: 6px;
124 
		background-position: -168px -44px;
125 
	}
126 
	.simply-scroll-btn-pause:hover, .simply-scroll-btn-pause:focus {
127 
		background-position: -168px -88px;
128 
	}
129 
 
130 
	.simply-scroll-btn-pause.active {
131 
		background-position: -84px -44px;
132 
	}
133 
	.simply-scroll-btn-pause.active:hover, .simply-scroll-btn-pause.active:focus {
134 
		background-position: -84px -88px;
135 
	}
136 
 
137 
/* Custom class modifications - override classees
138 
 
139 
.simply-scroll is default
140 
 
141 
*/
142 
 
143 
.simply-scroll { /* Customisable base class for style override DIV */
144 
	width: 100%;
145 
	/*height: 80px;*/
146 
 
147 
 
148 
}
149 
 
150 
	.simply-scroll .simply-scroll-clip {
151 
		width: 100%;
152 
		/*height: 80px;*/
153 
	}
154 
 
155 
		.simply-scroll .simply-scroll-list {}
156 
 
157 
		.simply-scroll .simply-scroll-list li {
158 
			float: left;
159 
			width: 100px;
160 
			/*height: 80px;*/
161 
		}
162 
		.simply-scroll .simply-scroll-list li img {}
163 
 
164 
	.simply-scroll .simply-scroll-btn {}
165 
 
166 
	.simply-scroll .simply-scroll-btn-left {}
167 
	.simply-scroll .simply-scroll-btn-left.disabled {}
168 
	.simply-scroll .simply-scroll-btn-left:hover {}
169 
 
170 
	.simply-scroll .simply-scroll-btn-right {}
171 
	.simply-scroll .simply-scroll-btn-right.disabled {}
172 
	.simply-scroll .simply-scroll-btn-right:hover {}
173 
 
174 
	.simply-scroll .simply-scroll-btn-up {}
175 
	.simply-scroll .simply-scroll-btn-up.disabled {}
176 
	.simply-scroll .simply-scroll-btn-up:hover {}
177 
 
178 
	.simply-scroll .simply-scroll-btn-down {}
179 
	.simply-scroll .simply-scroll-btn-down.disabled {}
180 
	.simply-scroll .simply-scroll-btn-down:hover {}
181 
 
182 
 
183 
 
184 
/* Vertical scroller example */
185 
 
186 
.vert { /* wider than clip to position buttons to side */
187 
	width: 340px;
188 
	height: 400px;
189 
	margin-bottom: 1.5em;
190 
}
191 
 
192 
	.vert .simply-scroll-clip {
193 
		width: 290px;
194 
		height: 400px;
195 
	}
196 
 
197 
		.vert .simply-scroll-list {}
198 
 
199 
		.vert .simply-scroll-list li {
200 
			width: 290px;
201 
			height: 200px;
202 
		}
203 
		.vert .simply-scroll-list li img {}
204 
 
205 
	.vert .simply-scroll-btn {}
206 
 
207 
	.vert .simply-scroll-btn-up { /* modified btn pos */
208 
		right: 0;
209 
		top: 0;
210 
	}
211 
	.vert .simply-scroll-btn-up.disabled {}
212 
	.vert .simply-scroll-btn-up:hover {}
213 
 
214 
	.vert .simply-scroll-btn-down { /* modified btn pos */
215 
		right: 0;
216 
		top: 52px;
217 
	}
218 
	.vert .simply-scroll-btn-down.disabled {}
219 
	.vert .simply-scroll-btn-down:hover {}
220 
 
221 
	/* NOTE left-right classes wouldn't be needed on vertical scroller */
222