Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

finished pauseOnHover

  • Loading branch information...
commit 37501b0fd7101fa84e984958452f95f7984e7a3d 1 parent 9a14e21
Nicola Hibbert nikki authored
24 css/liteaccordion.css
@@ -9,38 +9,30 @@
9 9 /*************************************************/
10 10 /****************************************** Core */
11 11 .accordion { text-align: left; font: 'Helvetica Neue', Verdana, Arial, sans-serif; }
12   -
13 12 .accordion ol { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0; list-style-type: none; }
14   -
15   -.accordion li > h2 { color: black; font-weight: normal; margin: 0; position: absolute; z-index: 2; top: 0; -webkit-transform: translateX(-100%) rotate(-90deg); -webkit-transform-origin: right top; -moz-transform: translateX(-100%) rotate(-90deg); -moz-transform-origin: right top; -o-transform: translateX(-100%) rotate(-90deg); -o-transform-origin: right top; transform: translateX(-100%) rotate(-90deg); transform-origin: right top; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }
16   -
  13 +.accordion li > h2 { color: black; font-weight: normal; margin: 0; z-index: 2; position: absolute; top: 0; left: 0; -webkit-transform: translateX(-100%) rotate(-90deg); -webkit-transform-origin: right top; -moz-transform: translateX(-100%) rotate(-90deg); -moz-transform-origin: right top; -o-transform: translateX(-100%) rotate(-90deg); -o-transform-origin: right top; transform: translateX(-100%) rotate(-90deg); transform-origin: right top; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }
  14 +.accordion li > h2 span { display: block; padding-right: 8%; text-align: right; height: 90%; margin-top: 5px; }
  15 +.accordion li > h2 b { position: absolute; top: 10%; left: 10%; text-align: center; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }
17 16 .accordion li > h2:hover { cursor: pointer; }
18   -
19 17 .accordion li > div { height: 100%; position: absolute; top: 0; z-index: 1; overflow: hidden; background: white; }
20   -
21   -.accordion noscript { position: absolute; height: 100%; width: 100%; top: 0; left: 0; background: white; /*z-index: 10*/ }
22   -
  18 +.accordion noscript { position: absolute; height: 100%; width: 100%; top: 0; left: 0; background: white; }
23 19 .accordion noscript p { padding: 10px; margin: 0; }
24 20
25 21 /****************************************** Basic */
26   -.basic li > h2 { background: #333; color: white; }
27   -
  22 +.basic li > h2 { background: #333; color: white; line-height: 1.8em; }
28 23 .basic li > div h3 { margin: 15px 10px; }
29   -
30 24 .basic li > div p { margin: 10px; font-size: 14px; }
31 25
32 26 /****************************************** Dark */
33 27 .dark { border: 9px solid #353535; border-bottom-width: 8px; padding: 5px 5px 6px 0; background: #030303; -webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); }
34   -
35 28 .dark li > h2 { background: #030303; font-size: 16px; line-height: 2.7em; text-shadow: 0 -1px 0 #030303; }
36   -.dark li > h2 span { background: #353535; color: white; display: block; padding-right: 8%; text-align: right; height: 90%; margin-top: 5px; }
37   -.dark li > h2 span:hover, .dark li > h2 span.selected { background: #434343; background: -webkit-gradient(linear, left top, right top, color-stop(0, #353535), color-stop(1, #555555)); background: -moz-linear-gradient(top left, #353535 0%, #555555 100%); }
38   -
  29 +.dark li > h2 span { background: #353535; color: white; }
  30 +.dark li > h2 b { color: #030303; font-size: 20px; text-shadow: -1px 1px 0 #5b5b5b; }
  31 +.dark h2.selected span, .dark h2.selected span:hover { background: #434343; background: -webkit-gradient(linear, left top, right top, color-stop(0, #353535), color-stop(1, #555555)); background: -moz-linear-gradient(top left, #353535 0%, #555555 100%); }
39 32 .dark li > div { background: #030303; margin-left: 5px; }
40 33
41 34 /*************************************** Rounded */
42 35 .rounded { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
43   -
44 36 .rounded li > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
45 37
46 38 /***************************************** Light */
310 demo.html
... ... @@ -1,310 +0,0 @@
1   -<!DOCTYPE HTML>
2   -<html lang="en">
3   - <head>
4   - <meta charset="utf-8" />
5   - <title>liteAccordion - a horizontal accordion plugin for jQuery</title>
6   - <style>
7   - body { font: 14px/24px 'Helvetica Neue', Arial, sans-serif; color: #333; width: 960px; margin: 30px auto 60px; background: #eee }
8   - body > h2 { margin: 30px 0 15px; text-shadow: 1px 1px 0 white; border-bottom: 2px solid #333; padding-bottom: 5px }
9   - h1 { text-align: center; margin-bottom: 30px; text-shadow: 1px 1px 0 white }
10   - dt { font-weight: bold }
11   - dd { margin: 0 }
12   - figure { display: block; width: 100%; height: 100% }
13   - figcaption { padding: 10px 15px; position: absolute; bottom: 20px; right: 30px; z-index: 3; background: rgba(0,0,0,0.7); color: white;
14   - -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px }
15   - </style>
16   - <link rel="stylesheet" href="css/liteaccordion.css">
17   - <link href="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/styles/shCore.css" rel="stylesheet" />
18   - <link href="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/styles/shThemeDefault.css" rel="stylesheet" />
19   - </head>
20   - <body>
21   -
22   - <h1>liteAccordion - a horizontal accordion plugin for jQuery</h1>
23   - <div id="one" class="accordion">
24   - <ol>
25   - <li>
26   - <h2><span>Slide One</span></h2>
27   - <div>
28   - <figure>
29   - <img src="img-demo/1.jpg" alt="image" />
30   - <figcaption>I can haz big caek?</figcaption>
31   - </figure>
32   - </div>
33   - </li>
34   - <li>
35   - <h2><span>Slide Two</span></h2>
36   - <div>
37   - <figure>
38   - <img src="img-demo/3.jpg" alt="image" />
39   - <figcaption>Whoops.</figcaption>
40   - </figure>
41   - </div>
42   - </li>
43   - <li>
44   - <h2><span>Slide Three</span></h2>
45   - <div>
46   - <figure>
47   - <img src="img-demo/2.jpg" alt="image" />
48   - <figcaption>Some caption text goes in here...</figcaption>
49   - </figure>
50   - </div>
51   - </li>
52   - <li>
53   - <h2><span>Slide Four</span></h2>
54   - <div>
55   - <figure>
56   - <img src="img-demo/5.jpg" width="768" alt="image" />
57   - <figcaption>Pew pew pew!</figcaption>
58   - </figure>
59   - </div>
60   - </li>
61   - <li>
62   - <h2><span>Slide Five</span></h2>
63   - <div>
64   - <figure>
65   - <img src="img-demo/2.jpg" alt="image" />
66   - <figcaption>Bonus points for spotting the theme of these slides, tweet me @nicolahibbert :)</figcaption>
67   - </figure>
68   - </div>
69   - </li>
70   - </ol>
71   - <noscript>
72   - <p>Please enable JavaScript to get the full experience.</p>
73   - </noscript>
74   - </div>
75   -
76   - <h2>Download</h2>
77   - <p>Get liteAccordion from <a href="https://github.com/nikki/liteAccordion">Github</a></p>
78   -
79   - <h2>FAQ</h2>
80   - <dl>
81   - <dt>Q. Why is this plugin called 'liteAccordion'?</dt>
82   - <dd>A. It is called liteAccordion because the raw JavaScript source is only 100000kb in size, and the themes don't use any background images. If you minify and gzip the JS, you can get the file size down to XKB!</dd>
83   - <dt>Q. What can I use it for?</dt>
84   - <dd>A. Anything you like! Text, images, video - anything you can put in a div, you can put in a slide.</dd>
85   - <dt>Q. But my page isn't 960px wide...</dt>
86   - <dd>A. Not a problem. The plugin has a range of options, and I've tried to use relative measurements in the css so that the styles scale.</dd>
87   - <dt>Q. What themes are available?</dt>
88   - <dd>A. There are currently two themes available, 'basic' and 'dark', though I plan to add a light theme and a stitch theme based on <a href="http://www.ormanclark.com/">Orman Clark</a>'s <a href="http://www.premiumpixels.com/stitched-fabric-accordion/">stitch</a> theme for SlideDeck in the very near future. If these themes aren't suitable, you can always customise the css :)</dd>
89   - <dt>Q. Does it work in...</dt>
90   - <dd>A. It works in Firefox, Chrome, Safari, Opera and IE7 upwards.</dd>
91   - <dt>Q. Sounds good! Can I use it for commercial projects?</dt>
92   - <dd>A. liteAccordion is released under the MIT license, so it's free to use for commercial and personal projects.</dd>
93   - </dl>
94   - <p>If you find any bugs, please <a href="https://github.com/nikki/liteAccordion/issues">file a ticket on Github</a> and I'll fix it as soon as possible. Thanks!</p>
95   -
96   - <h2>Basic Implementation</h2>
97   - <p>1. Include jQuery, the liteAccordion CSS and the liteAccordion JavaScript files in your page:</p>
98   - <pre class="brush: xml">
99   - &lt;head&gt;
100   - &lt;link rel="stylesheet" href="liteAccordion.css"&gt;
101   - &lt;/head&gt;
102   - &lt;body&gt;
103   - ... <!-- Before the closing body tag -->
104   - &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"&gt;&lt;/script&gt;
105   - &lt;script src="liteaccordion.jquery.js"&gt;&lt;/script&gt;
106   - &lt;/body&gt;</pre>
107   - <p>2. Insert the basic liteAccordion markup into your page:</p>
108   - <pre class="brush: xml">
109   - <div class="accordion">
110   - <ol>
111   - <li>
112   - <h2>Slide One</h2>
113   - <div></div>
114   - </li>
115   - <li>
116   - <h2>Slide Two</h2>
117   - <div></div>
118   - </li>
119   - <li>
120   - <h2>Slide Three</h2>
121   - <div></div>
122   - </li>
123   - <li>
124   - <h2>Slide Four</h2>
125   - <div></div>
126   - </li>
127   - <li>
128   - <h2>Slide Five</h2>
129   - <div></div>
130   - </li>
131   - </ol>
132   - <noscript>
133   - <p>Please enable JavaScript to get the full experience.</p>
134   - </noscript>
135   - </div></pre>
136   - <p>3. Call the plugin</p>
137   - <pre class="brush: xml">
138   - &lt;script&gt;
139   - $('#yourdiv').liteAccordion();
140   - &lt;/script&gt;</pre>
141   -
142   - <h2>Basic Example</h2>
143   - <p>This is a demonstration of the default implementation above, but with some text content added to the slides.</p>
144   - <div id="two" class="accordion">
145   - <ol>
146   - <li>
147   - <h2>Slide One</h2>
148   - <div>
149   - <h3>This is Slide One.</h3>
150   - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
151   - magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
152   - consequat. <a href="#">Link somewhere</a>
153   - </p>
154   - </div>
155   - </li>
156   - <li>
157   - <h2>Slide Two</h2>
158   - <div>
159   - <h3>This is Slide Two.</h3>
160   - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
161   - magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. <br /><a href="#">Link somewhere</a>
162   - </p>
163   - </div>
164   - </li>
165   - <li>
166   - <h2>Slide Three</h2>
167   - <div>
168   - <h3>This is Slide Three.</h3>
169   - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
170   - magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
171   - consequat. <a href="#">Link somewhere</a>
172   - </p>
173   - </div>
174   - </li>
175   - <li>
176   - <h2>Slide Four</h2>
177   - <div>
178   - <h3>This is Slide Four.</h3>
179   - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
180   - magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. <br /><a href="#">Link somewhere</a>
181   - </p>
182   - </div>
183   - </li>
184   - <li>
185   - <h2>Slide Five</h2>
186   - <div>
187   - <h3>This is Slide Five.</h3>
188   - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
189   - magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
190   - consequat. <a href="#">Link somewhere</a>
191   - </p>
192   - </div>
193   - </li>
194   - </ol>
195   - <noscript>
196   - <p>Please enable JavaScript to get the full experience.</p>
197   - </noscript>
198   - </div>
199   -
200   - <h2>Options</h2>
201   - <p>These are the default settings for the liteAccordion plugin:</p>
202   - <pre class="brush: js">
203   - containerWidth : 960, // width of accordion (px)
204   - containerHeight : 320, // height of accordion (px)
205   - headerWidth : 48, // width of tabs (px)
206   -
207   - firstSlide : 1, // number of the first active slide (integer)
208   - onActivate : function() {}, // callback function triggered on tab click/mouseover (function)
209   - slideSpeed : 800, // speed of slide animation (time/ms)
210   - slideCallback : function() {}, // callback function triggered after slide animation is complete (function)
211   -
212   - autoPlay : false, // automatically scroll through the slides (boolean)
213   - cycleSpeed : 6000, // time between slide activation (time/ms)
214   - pauseOnHover : false, // pause slides on hover (boolean)
215   -
216   - theme : 'basic', // which theme to use ('basic', 'light'*, 'dark', or 'stitch'*)
217   - rounded : false // whether to use rounded corners or not** (boolean)</pre>
218   - <p>(* coming soon, **doesn't work in IE)</p>
219   - <p>Simply pass options into the liteAccordion function with an object literal, for example, below is the code for the accordion at the top of the page.</p>
220   - <pre class="brush: js">
221   - $('#one').liteAccordion({
222   - theme : 'dark',
223   - rounded : true,
224   - onActivate : function() {
225   - this.find('figcaption').fadeOut();
226   - },
227   - slideCallback : function() {
228   - $('figcaption').fadeIn();
229   - },
230   - autoPlay : true
231   - }).find('figcaption:first').show();</pre>
232   - <p>Note: the context for the two callback functions is the (jQuery wrapped) slide div (adjacent to the tab trigger).</p>
233   -
234   - <h2>More Examples</h2>
235   - <div id="three" class="accordion">
236   - <ol>
237   - <li>
238   - <h2><span>Slide One</span></h2>
239   - <div>
240   - <img src="img-demo/1.jpg" alt="image" />
241   - </div>
242   - </li>
243   - <li>
244   - <h2><span>Slide Two</span></h2>
245   - <div>
246   - <img src="img-demo/2.jpg" alt="image" />
247   - </div>
248   - </li>
249   - <li>
250   - <h2><span>Slide Three</span></h2>
251   - <div>
252   - <img src="img-demo/3.jpg" alt="image" />
253   - </div>
254   - </li>
255   - <li>
256   - <h2><span>Slide Four</span></h2>
257   - <div>
258   - <img src="img-demo/5.jpg" width="768" alt="image" />
259   - </div>
260   - </li>
261   - <li>
262   - <h2><span>Slide Five</span></h2>
263   - <div>
264   - <img src="img-demo/2.jpg" alt="image" />
265   - </div>
266   - </li>
267   - </ol>
268   - <noscript>
269   - <p>Please enable JavaScript to get the full experience.</p>
270   - </noscript>
271   - </div>
272   - <pre class="brush: js">$('#yourdiv').liteAccordion({ theme : 'dark', containerWidth : 600, containerHeight : 200 });</pre>
273   -
274   - <h2>Licence</h2>
275   - <p>The liteAccordion plugin is free for personal and commercial use, providing that the copyright notices are left intact.
276   - You may freely use this jQuery plugin in websites, web applications, templates, themes, and any other format intended for sale and/or distribution.
277   - Derivative works are not permitted.</p>
278   -
279   - <h2>Attribution</h2>
280   - <p>The '<a href="http://www.premiumpixels.com/horizontal-accordion-slider-psd/">dark</a>' theme was inspired by Orman Clark</a>. Thanks Orman! :)</p>
281   -
282   - <!-- Syntax Highlighter -->
283   - <script src="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/scripts/shCore.js"></script>
284   - <script src="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/scripts/shBrushXml.js"></script>
285   - <script src="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/scripts/shBrushJScript.js"></script>
286   - <script>SyntaxHighlighter.all();</script>
287   - <!-- end Syntax Highlighter -->
288   -
289   - <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
290   - <script src="js/liteaccordion.jquery.js"></script>
291   - <script>
292   - // liteAccordion demos
293   - $('#one').liteAccordion({
294   - theme : 'dark',
295   - rounded : true,
296   - onActivate : function() {
297   - this.find('figcaption').fadeOut();
298   - },
299   - slideCallback : function() {
300   - $('figcaption').fadeIn();
301   - },
302   - autoPlay : true,
303   - pauseOnHover : true
304   - }).find('figcaption:first').show();
305   - $('#two').liteAccordion();
306   - $('#three').liteAccordion({ theme : 'dark', containerWidth : 600, containerHeight : 200 });
307   - </script>
308   -
309   - </body>
310   -</html>
386 index.html
... ... @@ -1,80 +1,320 @@
1   -<!DOCTYPE html>
  1 +<!DOCTYPE HTML>
2 2 <html lang="en">
3   -<head>
4   - <meta charset="utf-8" />
5   - <title>test accordion</title>
6   - <style>
7   - body { font: 14px/24px 'Helvetica Neue', Arial, sans-serif; color: #333; margin: 50px; background: #eee }
8   - body > h2 { margin: 30px 0 15px; text-shadow: 1px 1px 0 white; border-bottom: 2px solid #333; padding-bottom: 5px }
9   - h1 { text-align: center; margin-bottom: 30px; text-shadow: 1px 1px 0 white }
10   - dt { font-weight: bold }
11   - dd { margin: 0 }
12   - figure { display: block; width: 100%; height: 100% }
13   - figcaption { padding: 10px 15px; position: absolute; bottom: 20px; right: 20px; z-index: 3; background: rgba(0,0,0,0.7); color: white; display: none;
14   - -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px }
15   - </style>
16   - <link rel="stylesheet" href="css/liteaccordion.css">
17   -</head>
18   -<body>
19   -
20   - <div class="accordion">
21   - <ol>
22   - <li>
23   - <h2><span>Slide One</span></h2>
24   - <div>
25   - <figure>
  3 + <head>
  4 + <meta charset="utf-8" />
  5 + <title>liteAccordion - a horizontal accordion plugin for jQuery</title>
  6 + <style>
  7 + body { font: 14px/24px 'Helvetica Neue', Arial, sans-serif; color: #333; width: 960px; margin: 30px auto 60px; background: #eee }
  8 + body > h2 { margin: 30px 0 15px; text-shadow: 1px 1px 0 white; border-bottom: 2px solid #333; padding-bottom: 5px }
  9 + h1 { text-align: center; margin-bottom: 30px; text-shadow: 1px 1px 0 white }
  10 + dt { font-weight: bold }
  11 + dd { margin: 0 }
  12 + figure { display: block; width: 100%; height: 100% }
  13 + figcaption { padding: 10px 15px; position: absolute; bottom: 20px; right: 30px; z-index: 3; background: rgba(0,0,0,0.7); color: white;
  14 + -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px }
  15 + </style>
  16 + <link rel="stylesheet" href="css/liteaccordion.css">
  17 + <link href="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/styles/shCore.css" rel="stylesheet" />
  18 + <link href="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/styles/shThemeDefault.css" rel="stylesheet" />
  19 + <!--[if IE]>
  20 + <script>
  21 + document.createElement('figure');
  22 + document.createElement('figcaption');
  23 + </script>
  24 + <![endif]-->
  25 + </head>
  26 + <body>
  27 +
  28 + <h1>liteAccordion - a horizontal accordion plugin for jQuery</h1>
  29 + <div id="one" class="accordion">
  30 + <ol>
  31 + <li>
  32 + <h2><span>Slide One</span></h2>
  33 + <div>
  34 + <figure>
  35 + <img src="img-demo/1.jpg" alt="image" />
  36 + <figcaption>I can haz big caek?</figcaption>
  37 + </figure>
  38 + </div>
  39 + </li>
  40 + <li>
  41 + <h2><span>Slide Two</span></h2>
  42 + <div>
  43 + <figure>
  44 + <img src="img-demo/3.jpg" alt="image" />
  45 + <figcaption>Whoops.</figcaption>
  46 + </figure>
  47 + </div>
  48 + </li>
  49 + <li>
  50 + <h2><span>Slide Three</span></h2>
  51 + <div>
  52 + <figure>
  53 + <img src="img-demo/2.jpg" alt="image" />
  54 + <figcaption>Some caption text goes in here...</figcaption>
  55 + </figure>
  56 + </div>
  57 + </li>
  58 + <li>
  59 + <h2><span>Slide Four</span></h2>
  60 + <div>
  61 + <figure>
  62 + <img src="img-demo/5.jpg" width="768" alt="image" />
  63 + <figcaption>Pew pew pew!</figcaption>
  64 + </figure>
  65 + </div>
  66 + </li>
  67 + <li>
  68 + <h2><span>Slide Five</span></h2>
  69 + <div>
  70 + <figure>
  71 + <img src="img-demo/2.jpg" alt="image" />
  72 + <figcaption>Bonus points for spotting the theme of these slides, tweet me @nicolahibbert :)</figcaption>
  73 + </figure>
  74 + </div>
  75 + </li>
  76 + </ol>
  77 + <noscript>
  78 + <p>Please enable JavaScript to get the full experience.</p>
  79 + </noscript>
  80 + </div>
  81 +
  82 + <h2>Download</h2>
  83 + <p>Get liteAccordion from <a href="https://github.com/nikki/liteAccordion">Github</a></p>
  84 +
  85 + <h2>FAQ</h2>
  86 + <dl>
  87 + <dt>Q. Why is this plugin called 'liteAccordion'?</dt>
  88 + <dd>A. It is called liteAccordion because the raw JavaScript source is only 100000kb in size, and the themes don't use any background images. If you minify and gzip the JS, you can get the file size down to XKB!</dd>
  89 + <dt>Q. What can I use it for?</dt>
  90 + <dd>A. Anything you like! Text, images, video - anything you can put in a div, you can put in a slide.</dd>
  91 + <dt>Q. But my page isn't 960px wide...</dt>
  92 + <dd>A. Not a problem. The plugin has a range of options, and I've tried to use relative measurements in the css so that the styles scale.</dd>
  93 + <dt>Q. What themes are available?</dt>
  94 + <dd>A. There are currently two themes available, 'basic' and 'dark', though I plan to add a light theme and a stitch theme based on <a href="http://www.ormanclark.com/">Orman Clark</a>'s <a href="http://www.premiumpixels.com/stitched-fabric-accordion/">stitch</a> theme for SlideDeck in the very near future. If these themes aren't suitable, you can always customise the css :)</dd>
  95 + <dt>Q. Does it work in...</dt>
  96 + <dd>A. It works in Firefox, Chrome, Safari, Opera and IE7 upwards.</dd>
  97 + <dt>Q. Sounds good! Can I use it for commercial projects?</dt>
  98 + <dd>A. liteAccordion is released under the MIT license, so it's free to use for commercial and personal projects.</dd>
  99 + </dl>
  100 + <p>If you find any bugs, please <a href="https://github.com/nikki/liteAccordion/issues">file a ticket on Github</a> and I'll fix it as soon as possible. Thanks!</p>
  101 +
  102 + <h2>Basic Implementation</h2>
  103 + <p>1. Include jQuery, the liteAccordion CSS and the liteAccordion JavaScript files in your page:</p>
  104 + <pre class="brush: xml">
  105 + &lt;head&gt;
  106 + &lt;link rel="stylesheet" href="liteAccordion.css"&gt;
  107 + &lt;/head&gt;
  108 + &lt;body&gt;
  109 + ... <!-- Before the closing body tag -->
  110 + &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"&gt;&lt;/script&gt;
  111 + &lt;script src="liteaccordion.jquery.js"&gt;&lt;/script&gt;
  112 + &lt;/body&gt;</pre>
  113 + <p>2. Insert the basic liteAccordion markup into your page:</p>
  114 + <pre class="brush: xml">
  115 + <div class="accordion">
  116 + <ol>
  117 + <li>
  118 + <h2><span>Slide One</span></h2>
  119 + <div></div>
  120 + </li>
  121 + <li>
  122 + <h2><span>Slide Two</span></h2>
  123 + <div></div>
  124 + </li>
  125 + <li>
  126 + <h2><span>Slide Three</span></h2>
  127 + <div></div>
  128 + </li>
  129 + <li>
  130 + <h2><span>Slide Four</span></h2>
  131 + <div></div>
  132 + </li>
  133 + <li>
  134 + <h2><span>Slide Five</span></h2>
  135 + <div></div>
  136 + </li>
  137 + </ol>
  138 + <noscript>
  139 + <p>Please enable JavaScript to get the full experience.</p>
  140 + </noscript>
  141 + </div></pre>
  142 + <p>3. Call the plugin</p>
  143 + <pre class="brush: xml">
  144 + &lt;script&gt;
  145 + $('#yourdiv').liteAccordion();
  146 + &lt;/script&gt;</pre>
  147 +
  148 + <h2>Basic Example</h2>
  149 + <p>This is a demonstration of the default implementation above, but with some text content added to the slides.</p>
  150 + <div id="two" class="accordion">
  151 + <ol>
  152 + <li>
  153 + <h2><span>Slide One</span></h2>
  154 + <div>
  155 + <h3>This is Slide One.</h3>
  156 + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
  157 + magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  158 + consequat. <a href="#">Link somewhere</a>
  159 + </p>
  160 + </div>
  161 + </li>
  162 + <li>
  163 + <h2><span>Slide Two</span></h2>
  164 + <div>
  165 + <h3>This is Slide Two.</h3>
  166 + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
  167 + magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. <br /><a href="#">Link somewhere</a>
  168 + </p>
  169 + </div>
  170 + </li>
  171 + <li>
  172 + <h2><span>Slide Three</span></h2>
  173 + <div>
  174 + <h3>This is Slide Three.</h3>
  175 + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
  176 + magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  177 + consequat. <a href="#">Link somewhere</a>
  178 + </p>
  179 + </div>
  180 + </li>
  181 + <li>
  182 + <h2><span>Slide Four</span></h2>
  183 + <div>
  184 + <h3>This is Slide Four.</h3>
  185 + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
  186 + magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. <br /><a href="#">Link somewhere</a>
  187 + </p>
  188 + </div>
  189 + </li>
  190 + <li>
  191 + <h2><span>Slide Five</span></h2>
  192 + <div>
  193 + <h3>This is Slide Five.</h3>
  194 + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
  195 + magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  196 + consequat. <a href="#">Link somewhere</a>
  197 + </p>
  198 + </div>
  199 + </li>
  200 + </ol>
  201 + <noscript>
  202 + <p>Please enable JavaScript to get the full experience.</p>
  203 + </noscript>
  204 + </div>
  205 +
  206 + <h2>Options</h2>
  207 + <p>These are the default settings for the liteAccordion plugin:</p>
  208 + <pre class="brush: js">
  209 + containerWidth : 960, // width of accordion (px)
  210 + containerHeight : 320, // height of accordion (px)
  211 + headerWidth : 48, // width of tabs (px)
  212 +
  213 + firstSlide : 1, // number of the first active slide (integer)
  214 + onActivate : function() {}, // callback function triggered on tab click/mouseover (function)
  215 + slideSpeed : 800, // speed of slide animation (time/ms)
  216 + slideCallback : function() {}, // callback function triggered after slide animation is complete (function)
  217 +
  218 + autoPlay : false, // automatically scroll through the slides (boolean)
  219 + cycleSpeed : 6000, // time between slide activation (time/ms)
  220 + pauseOnHover : false, // pause slides on hover (boolean)
  221 +
  222 + theme : 'basic', // which theme to use ('basic', 'light'*, 'dark', or 'stitch'*)
  223 + rounded : false, // whether to use rounded corners or not** (boolean)
  224 + enumerateSlides : false // show slide number in tab</pre>
  225 + <p>(* coming soon, **doesn't work in IE)</p>
  226 + <p>Simply pass options into the liteAccordion function with an object literal, for example, below is the code for the accordion at the top of the page.</p>
  227 + <pre class="brush: js">
  228 + $('#one').liteAccordion({
  229 + onActivate : function() {
  230 + this.find('figcaption').fadeOut();
  231 + },
  232 + slideCallback : function() {
  233 + this.find('figcaption').fadeIn();
  234 + },
  235 + autoPlay : true,
  236 + pauseOnHover : true,
  237 + theme : 'dark',
  238 + rounded : true,
  239 + enumerateSlides : true
  240 + }).find('figcaption:first').show();</pre>
  241 + <p>Note: the context for the two callback functions is the (jQuery wrapped) slide div (adjacent to the tab trigger).</p>
  242 +
  243 + <h2>More Examples</h2>
  244 + <div id="three" class="accordion">
  245 + <ol>
  246 + <li>
  247 + <h2><span>Slide One</span></h2>
  248 + <div>
26 249 <img src="img-demo/1.jpg" alt="image" />
27   - <figcaption>I can haz big caek?</figcaption>
28   - </figure>
29   - </div>
30   - </li>
31   - <li>
32   - <h2><span>Slide Two</span></h2>
33   - <div>
34   - <figure>
  250 + </div>
  251 + </li>
  252 + <li>
  253 + <h2><span>Slide Two</span></h2>
  254 + <div>
35 255 <img src="img-demo/2.jpg" alt="image" />
36   - <figcaption>Some caption text goes in here...</figcaption>
37   - </figure>
38   - </div>
39   - </li>
40   - <li>
41   - <h2><span>Slide Three</span></h2>
42   - <div>
43   - <figure>
  256 + </div>
  257 + </li>
  258 + <li>
  259 + <h2><span>Slide Three</span></h2>
  260 + <div>
44 261 <img src="img-demo/3.jpg" alt="image" />
45   - <figcaption>Whoops.</figcaption>
46   - </figure>
47   - </div>
48   - </li>
49   - <li>
50   - <h2><span>Slide Four</span></h2>
51   - <div>
52   - <figure>
  262 + </div>
  263 + </li>
  264 + <li>
  265 + <h2><span>Slide Four</span></h2>
  266 + <div>
53 267 <img src="img-demo/5.jpg" width="768" alt="image" />
54   - <figcaption>Pew pew pew!</figcaption>
55   - </figure>
56   - </div>
57   - </li>
58   - <li>
59   - <h2><span>Slide Five</span></h2>
60   - <div>
61   - <figure>
  268 + </div>
  269 + </li>
  270 + <li>
  271 + <h2><span>Slide Five</span></h2>
  272 + <div>
62 273 <img src="img-demo/2.jpg" alt="image" />
63   - <figcaption>Bonus points for spotting the theme of these slides, tweet me @nicolahibbert :)</figcaption>
64   - </figure>
65   - </div>
66   - </li>
67   - </ol>
68   - <noscript>
69   - <p>Please enable JavaScript to get the full experience.</p>
70   - </noscript>
71   - </div>
72   -
73   - <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
74   - <script src="js/liteaccordion.jquery.js"></script>
75   - <script>
76   - $('.accordion').liteAccordion({ theme : 'dark', containerWidth: 600, containerHeight: 200, autoPlay: true });
77   - </script>
78   -
79   -</body>
  274 + </div>
  275 + </li>
  276 + </ol>
  277 + <noscript>
  278 + <p>Please enable JavaScript to get the full experience.</p>
  279 + </noscript>
  280 + </div>
  281 + <pre class="brush: js">$('#yourdiv').liteAccordion({ theme : 'dark', containerWidth : 600, containerHeight : 200 });</pre>
  282 +
  283 + <h2>Licence</h2>
  284 + <p>The liteAccordion plugin is free for personal and commercial use, providing that the copyright notices are left intact.
  285 + You may freely include this jQuery plugin in websites, web applications, templates, themes, and other materials intended for sale and/or distribution.
  286 + You are not permitted to offer this plugin for distribution and/or resale 'as is' without prior consent.</p>
  287 +
  288 + <h2>Attribution</h2>
  289 + <p>The '<a href="http://www.premiumpixels.com/horizontal-accordion-slider-psd/">dark</a>' theme was inspired by Orman Clark</a>. Thanks Orman! :)</p>
  290 +
  291 + <!-- Syntax Highlighter -->
  292 + <script src="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/scripts/shCore.js"></script>
  293 + <script src="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/scripts/shBrushXml.js"></script>
  294 + <script src="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/scripts/shBrushJScript.js"></script>
  295 + <script>SyntaxHighlighter.all();</script>
  296 + <!-- end Syntax Highlighter -->
  297 +
  298 + <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  299 + <script src="js/liteaccordion.jquery.js"></script>
  300 + <script>
  301 + // liteAccordion demos
  302 + $('#one').liteAccordion({
  303 + onActivate : function() {
  304 + this.find('figcaption').fadeOut();
  305 + },
  306 + slideCallback : function() {
  307 + this.find('figcaption').fadeIn();
  308 + },
  309 + autoPlay : true,
  310 + pauseOnHover : true,
  311 + theme : 'dark',
  312 + rounded : true,
  313 + enumerateSlides : true
  314 + }).find('figcaption:first').show();
  315 + $('#two').liteAccordion();
  316 + $('#three').liteAccordion({ theme : 'dark', containerWidth : 600, containerHeight : 200 });
  317 + </script>
  318 +
  319 + </body>
80 320 </html>
51 js/liteaccordion.jquery.js
@@ -29,7 +29,8 @@
29 29 pauseOnHover : false,
30 30
31 31 theme : 'basic', // basic, light*, dark, stitch*
32   - rounded : false
  32 + rounded : false,
  33 + enumerateSlides : false
33 34 },
34 35
35 36 // merge defaults with options in new settings object
@@ -75,11 +76,7 @@
75 76 playing = setInterval(start, settings.cycleSpeed);
76 77 },
77 78 pause : function() {
78   - // clearInterval(playing);
79   - },
80   - slideCallbackContext : function() {
81   - // fix context
82   - return settings.slideCallback.call();
  79 + clearInterval(playing);
83 80 }
84 81 };
85 82
@@ -94,26 +91,30 @@
94 91 $header
95 92 .width(settings.containerHeight)
96 93 .height(settings.headerWidth)
97   - .eq(settings.firstSlide - 1).children().addClass('selected');
  94 + .eq(settings.firstSlide - 1).addClass('selected');
98 95
99 96 // set initial positions for each slide
100 97 $header.each(function(index) {
101 98 var $this = $(this),
102 99 left = index * settings.headerWidth;
103 100
104   - if (index >= settings.firstSlide) {
105   - left += slideWidth;
106   - }
107   -
108   - $this
109   - .css('left', left)
110   - .next()
111   - .width(slideWidth)
112   - .css({ left : left, paddingLeft : settings.headerWidth });
  101 + if (index >= settings.firstSlide) {
  102 + left += slideWidth;
  103 + }
  104 +
  105 + $this
  106 + .css('left', left)
  107 + .next()
  108 + .width(slideWidth)
  109 + .css({ left : left, paddingLeft : settings.headerWidth });
  110 +
  111 + // add number to bottom of tab
  112 + settings.enumerateSlides && $this.append('<b>' + (index + 1) + '</b>');
  113 +
113 114 });
114   -
  115 +
115 116 // bind event handler for activating slides
116   - $header.click(function() {
  117 + $header.click(function(e) {
117 118 var $this = $(this),
118 119 index = $header.index($this),
119 120 pos = {
@@ -124,35 +125,36 @@
124 125 $group = utils.getGroup.call(this, pos, index);
125 126
126 127 // stop animation on click
127   - // utils.pause();
  128 + if (playing && e.originalEvent) {
  129 + utils.pause();
  130 + }
128 131
129 132 // activate onclick callback with slide div as context
130   - settings.onActivate.call($slides.children('div').eq(index));
  133 + settings.onActivate.call($slides.eq(index));
131 134
132 135 // set animation direction
133 136 if (this.offsetLeft === pos.left) {
134 137 newPos = slideWidth;
135 138 } else if (this.offsetLeft === pos.right) {
136 139 newPos = -slideWidth;
137   - } // rewrite
  140 + }
138 141
139 142 // check if animation in progress
140 143 if (!$header.is(':animated')) {
141 144
142 145 // remove, then add selected class
143   - $header.children().removeClass('selected').filter($this.children()).addClass('selected');
  146 + $header.removeClass('selected').filter($this).addClass('selected');
144 147
145 148 // get group of tabs & animate
146 149 $group
147 150 .add($group.next())
148 151 .animate({
149 152 left : '+=' + newPos
150   - }, settings.slideSpeed, utils.slideCallbackContext);
  153 + }, settings.slideSpeed, function() { return settings.slideCallback.call($slides.eq(index)) });
151 154 }
152 155 });
153 156
154 157 // pause accordion on hover
155   - /*
156 158 if (settings.pauseOnHover) {
157 159 $slides.hover(function() {
158 160 utils.pause();
@@ -160,7 +162,6 @@
160 162 utils.play($slides.index($(this)) + 1);
161 163 });
162 164 }
163   - */
164 165
165 166 // start autoplay, call utils with no args = start from firstSlide
166 167 settings.autoPlay && utils.play();

0 comments on commit 37501b0

Please sign in to comment.
Something went wrong with that request. Please try again.